/* toblokaki.app: what the three pages share on top of their own styles: night mode, the sticky header, smooth
   scrolling to sections, the theme button, the iPhone/Android switch and the hover animations (desktop only). */

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.site { --btn: #2242c8; overflow: visible !important; overflow-x: clip !important; }

/* ── Night: the app's own dark palette ── */
:root[data-theme="dark"] body { background: #1c2029 !important; }
:root[data-theme="dark"] .site {
  --bg: #1c2029; --ink: #e9ebf2; --muted: #a3abbb; --quiet: #929bad; --hair: rgba(233,235,242,.12);
  --accent: #9db0ff; --accent-ink: #c3cfff; --soft: #232b45; --good: #7cc4a0; --btn: #3a57d8;
  --nd: rgba(0,0,0,.55); --nl: rgba(255,255,255,.045); --sq-hi: #262b38; --sq-lo: #171a21;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: #1c2029 !important; }
  :root:not([data-theme="light"]) .site {
    --bg: #1c2029; --ink: #e9ebf2; --muted: #a3abbb; --quiet: #929bad; --hair: rgba(233,235,242,.12);
    --accent: #9db0ff; --accent-ink: #c3cfff; --soft: #232b45; --good: #7cc4a0; --btn: #3a57d8;
    --nd: rgba(0,0,0,.55); --nl: rgba(255,255,255,.045); --sq-hi: #262b38; --sq-lo: #171a21;
  }
}
/* filled buttons keep a deep blue with white text in both themes; ticks follow the accent */
.site [style*="background: var(--accent)"] { background: var(--btn) !important; }
.site svg[stroke="#2242c8"] { stroke: var(--accent); }
.dark-on .matte, :root[data-theme="dark"] .matte { background-image: url("/assets/matte-dark.png") !important; }
:root[data-theme="dark"] .paper:not([style*="#fffefa"]) { background-image: url("/assets/paper-dark.png") !important; }
:root[data-theme="dark"] [style*="background-color: #e4dfd6"] { background-color: var(--sq-lo) !important; }
:root[data-theme="dark"] .banner.night { background: #12151b; box-shadow: 0 0 0 1px var(--hair), 0 30px 70px rgba(0,0,0,.4); }
:root[data-theme="dark"] .wash { background: linear-gradient(100deg, rgba(28,32,41,.9), rgba(28,32,41,.68) 55%, rgba(28,32,41,.55)); }
:root[data-theme="dark"] .badge b { border-color: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .matte { background-image: url("/assets/matte-dark.png") !important; }
  :root:not([data-theme="light"]) .paper:not([style*="#fffefa"]) { background-image: url("/assets/paper-dark.png") !important; }
  :root:not([data-theme="light"]) [style*="background-color: #e4dfd6"] { background-color: var(--sq-lo) !important; }
  :root:not([data-theme="light"]) .banner.night { background: #12151b; box-shadow: 0 0 0 1px var(--hair), 0 30px 70px rgba(0,0,0,.4); }
  :root:not([data-theme="light"]) .wash { background: linear-gradient(100deg, rgba(28,32,41,.9), rgba(28,32,41,.68) 55%, rgba(28,32,41,.55)); }
  :root:not([data-theme="light"]) .badge b { border-color: var(--bg); }
}
.mail { color: #1d1f24; }

/* ── The header: stays on top, frosted, a hairline once the page has moved ── */
.sitehead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: box-shadow .3s ease; }
.sitehead.scrolled { box-shadow: 0 1px 0 var(--hair), 0 12px 30px rgba(0,0,0,.06); }
.sitehead > header { padding-top: 14px !important; padding-bottom: 14px !important; }
.headtools { display: flex; align-items: center; gap: 12px; }

/* ── Day / night button ── */
.themebtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background-color: var(--bg); box-shadow: var(--out-s); transition: transform .25s ease, box-shadow .25s ease; }
.themebtn svg { grid-area: 1 / 1; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.themebtn .moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .themebtn .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .themebtn .moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themebtn .sun { opacity: 0; transform: rotate(60deg) scale(.6); }
  :root:not([data-theme="light"]) .themebtn .moon { opacity: 1; transform: none; }
}

/* ── iPhone / Android ── */
.seg { background: transparent; color: var(--muted); transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.seg[aria-pressed="true"] { background-color: var(--bg); color: var(--accent); box-shadow: var(--out-s); }

/* ── Hover, only where there is a mouse ── */
@media (hover: hover) and (pointer: fine) {
  .site a, .site button, .matte, .banner, .phone, .cardshot, .owlart, .crop img { transition: transform .35s cubic-bezier(.2,.8,.2,1), translate .45s cubic-bezier(.2,.8,.2,1), scale .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .25s ease, background-size .3s ease, color .2s ease; }
  .site a[style*="border-radius: 999px"]:hover, .site button[style*="border-radius: 999px"]:hover { translate: 0 -2px; filter: brightness(1.08); }
  .site a[style*="border-radius: 999px"]:active, .site button[style*="border-radius: 999px"]:active { translate: 0 0; scale: .98; }
  .themebtn:hover { translate: 0 -2px; box-shadow: var(--out); }
  .navlinks a, footer nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px; }
  .navlinks a:hover, footer nav a:hover { background-size: 100% 2px; }
  .steps > .matte:hover, .duo > .matte:hover { translate: 0 -6px; box-shadow: var(--out-l); }
  .steps > .matte:hover .crop img { scale: 1.04; }
  .duo > .matte:hover .phone { translate: 0 -14px; }
  .banner:hover .phone { translate: 0 -12px; }
  .banner:hover .owlart { translate: 0 -6px; rotate: -2deg; }
  .phones:hover > .phone { translate: 0 -8px; }
  .phones:hover .cardshot { translate: 6px -10px; scale: 1.03; }
  .faq > div:hover h3 { color: var(--accent); }
  .faq h3 { transition: color .2s ease; }
  .inbox:hover .badge { scale: 1.08; }
  .badge { transition: scale .35s cubic-bezier(.2,.8,.2,1); }
  .qrbox:hover { translate: 0 -6px; }
  .how > .matte:hover, .toc a:hover { translate: 0 -3px; }
  /* hero: the three phones fan out a little and lift; the one under the mouse rises most */
  .bhero-card { transition: translate .45s cubic-bezier(.2,.8,.2,1), scale .45s cubic-bezier(.2,.8,.2,1), rotate .45s cubic-bezier(.2,.8,.2,1); }
  .bhero-phones:hover .phone.left { translate: -26px -10px; }
  .bhero-phones:hover .phone.right { translate: 26px -10px; }
  .bhero-phones:hover .phone.center { translate: 0 -14px; }
  .bhero-phones .phone.left:hover { translate: -26px -30px; }
  .bhero-phones .phone.right:hover { translate: 26px -30px; }
  .bhero-phones .phone.center:hover { translate: 0 -30px; }
  .bhero-phones:hover .bhero-card { translate: 34px -18px; scale: 1.04; rotate: 2deg; }
}

/* plain links inside text follow the accent (light blue at night) */
.site a:not([style]) { color: var(--accent); }

/* ═══ Hero B: all blue, the header sitting on it; three phones across the blue's lower edge ═══ */
.bhero { position: relative; margin-top: -76px; }
.bhero-blue { position: relative; overflow: hidden; background: #2242c8; color: #ffffff; border-radius: 0 0 56px 56px; padding: 132px 24px 330px; text-align: center; }
.bhero-glow { position: absolute; left: 50%; bottom: -260px; width: 1200px; height: 760px; margin-left: -600px; border-radius: 50%; background: radial-gradient(closest-side, rgba(157,176,255,.38), rgba(157,176,255,0)); pointer-events: none; }
.bhero-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 980px; margin: 0 auto; }
.bhero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 13px; font-weight: 700; }
.bhero-pill span { width: 8px; height: 8px; border-radius: 50%; background: #9db0ff; }
.bhero-title { margin: 0; font-family: var(--cond); font-size: 104px; line-height: .88; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.bhero-text { margin: 0; max-width: 620px; font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.86); }
.bhero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
.bhero-main, .bhero-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 28px; box-sizing: border-box; font-size: 17px; text-decoration: none; }
.site .bhero-main { background: #ffffff; color: #2242c8; font-weight: 800; box-shadow: 0 14px 30px rgba(10,20,70,.25); }
.site .bhero-ghost { border: 2px solid rgba(255,255,255,.45); color: #ffffff; font-weight: 700; }
.bhero-note { margin: 0; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); }
.bhero-phones { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; margin-top: -300px; }
.bhero-phones .phone { width: 290px; }
.bhero-phones .phone.side { width: 250px; margin-top: 70px; }
.bhero-phones .phone.left { transform: rotate(-9deg) translateX(70px); }
.bhero-phones .phone.right { transform: rotate(9deg) translateX(-70px); }
.bhero-phones .phone.center { z-index: 2; }
.bhero-card { position: absolute; z-index: 3; left: calc(50% + 60px); top: 120px; width: 250px; border-radius: 24px; transform: rotate(6deg); box-shadow: 0 30px 60px rgba(10,20,70,.45); }
.bhero-next { display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; margin: 46px auto 64px; color: var(--quiet) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.bhero-next svg { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .bhero-next svg { animation: none; } }
@media (max-width: 860px) {
  .bhero { margin-top: -68px; }
  .bhero-blue { border-radius: 0 0 36px 36px; padding: 100px 20px 230px; }
  .bhero-title { font-size: 58px; line-height: .9; }
  .bhero-text { font-size: 16px; }
  .bhero-ctas { flex-direction: column; align-self: stretch; gap: 10px; }
  .bhero-main, .bhero-ghost { height: 54px; }
  .bhero-note { font-size: 13px; }
  .bhero-phones { margin-top: -200px; }
  .bhero-phones .phone { width: 150px; padding: 7px; border-radius: 34px; }
  .bhero-phones .phone img { border-radius: 27px; border-top-width: 22px; }
  .bhero-phones .phone::before { top: 13px; width: 56px; height: 15px; margin-left: -28px; }
  .bhero-phones .phone.side { width: 130px; margin-top: 40px; }
  .bhero-phones .phone.left { transform: rotate(-9deg) translateX(40px); }
  .bhero-phones .phone.right { transform: rotate(9deg) translateX(-40px); }
  .bhero-card { left: calc(50% + 28px); top: 64px; width: 150px; border-radius: 15px; }
  .bhero-next { margin: 34px auto 48px; }
}

/* the header while it sits on the blue: clear, white */
.sitehead.onblue { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.sitehead.onblue header > a span, .sitehead.onblue .navlinks a { color: #ffffff !important; }
.sitehead.onblue header > a span[style*="border"] { border-color: rgba(255,255,255,.6) !important; }
.sitehead.onblue .navcta { background: #ffffff !important; color: #2242c8 !important; font-weight: 800 !important; box-shadow: none !important; }
.sitehead.onblue .themebtn { background: rgba(255,255,255,.14); color: #ffffff; box-shadow: none; }
.sitehead { transition: background-color .3s ease, box-shadow .3s ease; }

/* screenshots: the phone's top band follows the picture's own theme */
:root[data-theme="dark"] .phone img { border-top-color: #1c2029; background: #1c2029; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone img { border-top-color: #1c2029; background: #1c2029; } }

/* «Μέρα και νύχτα»: always the other theme from the page's */
.banner.night { --nb-ink: #e9ebf2; --nb-muted: rgba(233,235,242,.78); --nb-k: #9db0ff; }
:root[data-theme="dark"] .banner.night { background: #ebe7e0; --nb-ink: #1d1f24; --nb-muted: #6b665e; --nb-k: #2242c8; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
:root[data-theme="dark"] .banner.night .phone img { border-top-color: #ebe7e0; background: #ebe7e0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .banner.night { background: #ebe7e0; --nb-ink: #1d1f24; --nb-muted: #6b665e; --nb-k: #2242c8; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
  :root:not([data-theme="light"]) .banner.night .phone img { border-top-color: #ebe7e0; background: #ebe7e0; }
}
:root:not([data-theme="dark"]) .banner.night .phone.dark img { border-top-color: #1c2029; background: #1c2029; }

/* phones: room for the logo, the theme button and «Μπες στην beta» on one line */
@media (max-width: 860px) {
  .sitehead header > a span[style*="border"] { display: none; }
  .headtools { gap: 8px; }
  .themebtn { width: 40px; height: 40px; }
}
@media (max-width: 380px) { .sitehead header > a span { font-size: 24px !important; } }

/* night: cream phone frames (the app's paper), so they don't melt into the dark page; the camera island stays black.
   The night banner is paper on a dark page, so its phones keep the black frame. */
:root[data-theme="dark"] .phone { background: #ebe7e0; box-shadow: 0 34px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.08); }
:root[data-theme="dark"] .banner.night .phone { background: #0f1115; box-shadow: 0 34px 70px rgba(20,24,40,.32), inset 0 0 0 2px #2b2f37; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone { background: #ebe7e0; box-shadow: 0 34px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.08); }
  :root:not([data-theme="light"]) .banner.night .phone { background: #0f1115; box-shadow: 0 34px 70px rgba(20,24,40,.32), inset 0 0 0 2px #2b2f37; }
}

/* hero: the confirmation card wears a thin blue line that keeps sending a soft ring outwards */
.bhero-card { box-shadow: 0 0 0 2px #6d88ff, 0 0 0 2px rgba(109,136,255,.6), 0 30px 60px rgba(10,20,70,.45); animation: cardring 2.8s cubic-bezier(.2,.7,.3,1) infinite; }
@keyframes cardring {
  0% { box-shadow: 0 0 0 2px #6d88ff, 0 0 0 2px rgba(109,136,255,.6), 0 30px 60px rgba(10,20,70,.45); }
  75%, 100% { box-shadow: 0 0 0 2px #6d88ff, 0 0 0 20px rgba(109,136,255,0), 0 30px 60px rgba(10,20,70,.45); }
}
@media (max-width: 860px) { @keyframes cardring {
  0% { box-shadow: 0 0 0 1.5px #6d88ff, 0 0 0 1.5px rgba(109,136,255,.6), 0 18px 36px rgba(10,20,70,.45); }
  75%, 100% { box-shadow: 0 0 0 1.5px #6d88ff, 0 0 0 13px rgba(109,136,255,0), 0 18px 36px rgba(10,20,70,.45); }
} }
@media (prefers-reduced-motion: reduce) { .bhero-card { animation: none; } }

/* Αναφορά and Λογαριασμοί screenshots (app v0.25+): their top is blue, so the band above them (the phone's status
   bar area) is blue too, a little deeper on the night shots. Follows the swapped src (site.js). */
.site .phone img:is([src*="/report"], [src*="/accounts"]) { border-top-color: #2242c8 !important; background: #2242c8 !important; }
.site .phone img:is([src*="report-d"], [src*="accounts-d"], [src*="report-dark"]) { border-top-color: #2a44c4 !important; background: #2a44c4 !important; }
.site .phone img[src*="/coach.jpg"] { border-top-color: #16276c !important; background: #16276c !important; } /* the owl's sheet dims the blue */
.site .phone img[src*="/coach-d"] { border-top-color: #192768 !important; background: #192768 !important; }

/* Section labels in a pill (like the hero's): a soft tint of the accent on the paper, see-through white on the blue
   banners, the night banner's own accent there */
.kpill {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: max-content; padding: 7px 14px 7px 12px;
  border-radius: 999px; font-size: 13.5px; font-weight: 700; line-height: 1.2;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink);
}
.kpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
:root[data-theme="dark"] .kpill { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kpill { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } }
.banner .kpill { background: rgba(255,255,255,.14) !important; color: #ffffff !important; }
.banner .kpill::before { background: #9db0ff; opacity: 1; }
.banner.night .kpill { background: color-mix(in srgb, var(--nb-k) 16%, transparent) !important; color: var(--nb-k) !important; }
.banner.night .kpill::before { background: currentColor; }
#beta .kpill { background: rgba(34,66,200,.12); color: var(--accent-ink); }
/* «Τα μικρά του σπιτιού, στο ίδιο μέρος.» on one line where it fits */
@media (min-width: 900px) { .h2.oneline { white-space: nowrap; } }
/* The hero's two lines break where the words say, not on the phone's width */
@media (max-width: 640px) { .bhero-text br { display: none; } }

/* ═══ Hero · the confirmation card's loop (site.js) ═══
   Rest (over the middle phone, a little right) → right: the phone's screen fills blue, «Επιβεβαιώθηκε» → rest →
   left: the card fades out, the screen fills orange, «Αναιρέθηκε». Before each move right the record button sends one
   ring. The app's wordmark glides to the middle of the filled screen, white, as in the app. Positions come from
   site.js in the hero's own units (--u: 1 on desktop, smaller on phones). */
.bhero-phones .phone.center { --pad: 10px; --band: 34px; --scr: 40px; }
@media (max-width: 860px) { .bhero-phones .phone.center { --pad: 7px; --band: 22px; --scr: 27px; } }
.cfill, .clogo, .cpulse { display: none; }
.bhero-phones.looping .cfill { display: grid; position: absolute; z-index: 1; inset: var(--pad); border-radius: var(--scr); place-items: center; opacity: 0; pointer-events: none; }
.bhero-phones.looping .cfill.ok { background: #2242c8; }
.bhero-phones.looping .cfill.undo { background: #c8681e; }
.bhero-phones.looping .cfill span { color: #ffffff; font-family: var(--sans); font-weight: 800; font-size: calc(19px * var(--u, 1)); letter-spacing: -.01em; }
.bhero-phones.looping .clogo {
  display: block; position: absolute; z-index: 3; left: calc(22.4% + 27.6% * var(--t, 0)); top: calc(var(--pad) + var(--band) + 33px * var(--s, .72));
  translate: calc(-50% * var(--t, 0)) -50%; opacity: var(--t, 0); pointer-events: none; white-space: nowrap;
  font-family: var(--cond); font-weight: 700; font-size: calc(26px * var(--s, .72)); letter-spacing: .06em; text-transform: uppercase; color: #ffffff;
}
.bhero-phones.looping .cpulse {
  display: block; position: absolute; z-index: 1; left: 50%; top: 71.4%; width: 33%; aspect-ratio: 1; border-radius: 30%;
  translate: -50% -50%; scale: var(--ps, 1); opacity: var(--po, 0); border: calc(2.5px * var(--u, 1)) solid var(--accent); pointer-events: none;
}
.bhero-phones.looping .bhero-card { left: 50%; top: 0; transform: var(--card, none); opacity: var(--co, 1); }

/* ═══ Η κλειστή beta: the family video behind, under the blue (site.js loads it only near the section) ═══ */
.betavid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#beta .wash { display: none; } /* the video carries its own blue */
#beta { background: #2242c8; } /* under the video until it loads */
#beta .split > div:first-child, #beta .split > div:first-child .h2 { color: #ffffff; }
#beta .split > div:first-child p { color: #ffffff !important; opacity: .88 !important; }
#beta .split > div:first-child li b, #beta .split > div:first-child li strong { color: #ffffff; }
#beta .split > div:first-child ul svg { stroke: #ffffff; }
#beta .kpill { background: rgba(255,255,255,.16) !important; color: #ffffff !important; }
#beta .kpill::before { background: #9db0ff; opacity: 1; }

/* ═══ Mobile fixes (2026-10-20) ═══ */
@media (max-width: 860px) {
  .bhero-title { font-size: min(58px, 11.4vw); white-space: nowrap; }      /* two lines, as written */
  .bhero-note .note-dot { display: none; }
  .bhero-note .note-free { display: block; }                               /* «δωρεάν στη beta» on its own line */
  .banner .split { row-gap: 28px !important; }                             /* no empty band between text and phones */
  .banner .split > div:first-child { padding-bottom: 0 !important; }
  .banner .owlart { width: 210px !important; }
  footer nav[aria-label="Υποσέλιδο"] { flex-direction: column; align-items: center; gap: 14px !important; width: 100%; text-align: center; }
}

/* ── «Μέρα | Νύχτα» in the night banner: the app's segmented switch, drawn in the banner's own (opposite) theme ── */
.banner.night { --nb-bg: #1c2029; --nb-nd: rgba(0,0,0,.55); --nb-nl: rgba(255,255,255,.06); }
:root[data-theme="dark"] .banner.night { --nb-bg: #ebe7e0; --nb-nd: rgba(166,155,138,.55); --nb-nl: rgba(255,253,248,.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner.night { --nb-bg: #ebe7e0; --nb-nd: rgba(166,155,138,.55); --nb-nl: rgba(255,253,248,.95); } }
.themetry { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; }
.themeseg { display: flex; gap: 4px; padding: 4px; border-radius: 18px; background: var(--nb-bg); box-shadow: inset 2px 2px 5px var(--nb-nd), inset -2px -2px 5px var(--nb-nl); }
.tseg { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 14px; background: transparent;
  color: var(--nb-muted); font: 700 15px var(--sans); cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.tseg[aria-pressed="true"] { background: var(--nb-bg); color: var(--nb-k); box-shadow: 3px 3px 7px var(--nb-nd), -3px -3px 7px var(--nb-nl); }
.tseg:active { transform: scale(.97); }
.themetry-say { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cond); font-size: 26px; font-weight: 700; letter-spacing: .02em; color: var(--nb-k); }
@media (hover: hover) and (pointer: fine) { .tseg:not([aria-pressed="true"]):hover { color: var(--nb-ink); } }

/* ── The owl in «Πού να κάνω οικονομία;»: its writing loop over the still (site.js) ── */
.owlmove img, .owlmove video { transition: opacity .5s ease; }
.owlmove video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.owlmove.playing video { opacity: 1; }
.owlmove.playing img { opacity: 0; }