/* ============================================================
   Afthonia — site styles (Studio Light)
   Plain CSS design system shared by every page.
   ============================================================ */

:root{
  --navy:#12203a;
  --ink-2:#5a6675;
  --ink-3:#8a93a1;
  --cream:#f6f5f1;
  --white:#ffffff;
  --line:#e6e8ec;
  --card-line:#ebedf1;

  --grad:linear-gradient(135deg,#2f6df6 0%,#1f9fd0 52%,#22c39a 100%);
  --deepblue-grad:linear-gradient(150deg,#1f7fc0,#0a2b50);

  --ftnss:#c56a10;      /* accessible text tone of the app orange */
  --deepblue:#0a5fa0;   /* accessible text tone of the app blue  */

  --maxw:1120px;
  --radius:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 14px 34px -14px rgba(16,24,40,.16);

  /* product-page palette (Apple-ish neutrals) — used by .band on any page */
  --k-black:#000; --k-light:#f5f5f7; --k-ink:#1d1d1f; --k-gray:#86868b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--font);
  color:var(--navy);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  /* sticky footer: keeps the footer bar at the bottom of the window on short pages */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}
img,svg{max-width:100%}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,245,241,.82);
  backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid rgba(18,32,58,.06)}
.nav{display:flex;align-items:center;padding:16px 0}
.nav .brand{display:inline-flex;align-items:center;text-decoration:none}
.nav .brand img{height:36px;width:auto;display:block}

/* ---------- generic type ---------- */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);margin:0}
h1{font-size:clamp(38px,6vw,68px);line-height:1.03;letter-spacing:-1.6px;font-weight:700;margin:14px 0 0}
h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.6px;font-weight:700;margin:0}
h3{font-size:22px;letter-spacing:-.3px;margin:0}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink-2)}
.muted{color:var(--ink-2)}

/* ---------- buttons (available, used sparingly) ---------- */
.btn{font-family:inherit;font-size:15.5px;font-weight:600;padding:13px 24px;border-radius:999px;
  cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-block}
.btn-primary{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;border-color:#cfd3dc;color:var(--navy)}

/* ---------- hero ---------- */
.hero{padding:56px 0 30px}
.hero .lead{max-width:34ch;margin:20px 0 0}

/* ---------- section scaffolding ---------- */
.section{padding:26px 0}
.section-label{font-size:14px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#9aa2af;margin:0 0 20px}

/* ---------- app cards ---------- */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:720px){.apps{grid-template-columns:1fr}}
.appcard{display:block;text-decoration:none;color:inherit;
  border-radius:var(--radius);padding:26px;background:var(--white);border:1px solid var(--card-line);
  box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.appcard:hover{transform:translateY(-3px);border-color:#dfe3ea;
  box-shadow:0 2px 4px rgba(16,24,40,.05),0 22px 44px -16px rgba(16,24,40,.24)}
a.appcard:focus-visible{outline:2px solid var(--deepblue);outline-offset:3px}
.appcard .more{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--deepblue)}
a.appcard:hover .more{text-decoration:underline}
.appcard .appicon{width:62px;height:62px;border-radius:14px;overflow:hidden;flex:none;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.3)}
.appcard .appicon img,.appcard .appicon svg{width:100%;height:100%;display:block;object-fit:cover}
.appcard h3{margin:16px 0 0}
.appcard p{margin:8px 0 0;color:var(--ink-2);font-size:15.5px}
.appcard ul.features{margin:14px 0 0;padding:0;list-style:none}
.appcard ul.features li{position:relative;padding:3px 0 3px 20px;color:var(--ink-2);font-size:14.5px}
.appcard ul.features li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--grad)}
.meta{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tags{font-size:12.5px;color:var(--ink-3);font-weight:500}
.badge{font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.badge.soon{background:#fff3e6;color:var(--ftnss)}
.badge.dev{background:#e7f1fb;color:var(--deepblue)}

/* ---------- content / prose pages (support, privacy) ---------- */
/* The section spans full width so its .wrap centers on the same 1120px grid as the
   header and hero. The readable measure is applied to the children instead, so prose
   stays ~760px wide but its left edge lines up with the logo above it. */
.content{padding:20px 0 10px}
.content .wrap > *{max-width:760px}
.content h2{margin:38px 0 0}
.content h3{margin:26px 0 0;font-size:19px}
.content p{margin:12px 0 0;color:#374151}
.content ul,.content ol{margin:12px 0 0;padding-left:22px;color:#374151}
.content li{margin:6px 0}
.content a{color:#0a5fa0;text-decoration:underline;text-underline-offset:2px}
.content .updated{font-size:13.5px;color:var(--ink-3);margin-top:8px}
.callout{margin-top:20px;padding:14px 16px;border-radius:12px;background:#eef4fb;border:1px solid #dbe8f6;
  color:#274257;font-size:14px}

/* FAQ */
.faq{margin-top:8px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details[open] summary{color:var(--navy)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400;font-size:22px;margin-left:16px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0}

/* email/contact block */
.contact-card{margin-top:20px;padding:22px 24px;border-radius:var(--radius);background:var(--white);
  border:1px solid var(--card-line);box-shadow:var(--shadow-card)}
.contact-card a{font-weight:600;color:var(--deepblue);text-decoration:none;font-size:18px}

/* ---------- footer ---------- */
.site-footer{margin-top:auto;border-top:1px solid var(--line)}
.site-footer .row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:22px 0;
  color:var(--ink-3);font-size:13.5px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--navy)}
.site-footer .copy{margin-left:auto}

/* small note */
.note{color:#a7aeb9;font-size:12.5px;font-style:italic}

/* ============================================================
   Product pages (app marketing) — ftnss.html, deep-blue.html
   Full-bleed black/light bands, oversized centred type, and the
   device floating on black with a glow.
   Each page sets its own identity on <body class="product ...">:
     --acc       accent on dark bands
     --acc-ink   accent on light bands (contrast-safe)
     --acc-soft  translucent accent (badges)
     --glow / --glow-alt  radial gradients behind the device
   ============================================================ */
.product{background:#000;color:#fff}
.product .site-header{background:rgba(0,0,0,.72);border-bottom:1px solid rgba(255,255,255,.09)}
.product .nav .brand img{height:34px}

.band{padding:clamp(72px,11vw,132px) 0}
.band.black{background:var(--k-black);color:#fff}
.band.light{background:var(--k-light);color:var(--k-ink)}
.band .wrap{text-align:center}

.k-eyebrow{font-size:14px;font-weight:600;letter-spacing:.2px;color:var(--acc);margin:0 0 14px}
.band.light .k-eyebrow{color:var(--acc-ink)}
.k-h1{font-size:clamp(46px,8.4vw,100px);line-height:1.04;letter-spacing:-.038em;font-weight:700;margin:0}
.k-h2{font-size:clamp(32px,5vw,60px);line-height:1.08;letter-spacing:-.032em;font-weight:700;margin:0}
.k-sub{font-size:clamp(18px,2.1vw,23px);line-height:1.42;color:var(--k-gray);margin:22px auto 0;
  max-width:34ch;font-weight:400}
.band.light .k-sub{color:#6e6e73}
.k-badge{display:inline-block;margin-top:26px;font-size:12.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;background:var(--acc-soft);color:var(--acc)}
.k-plat{margin-top:16px;font-size:14.5px;color:var(--k-gray)}

/* the device, floating, with a glow behind it */
.stage{position:relative;display:flex;justify-content:center;margin-top:clamp(44px,6vw,72px)}
.stage::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(760px,120%);aspect-ratio:1;border-radius:50%;pointer-events:none;background:var(--glow)}
.stage.alt::before{background:var(--glow-alt)}
/* Corner radii are rx% / ry% (not px) so the corner stays circular at ANY display
   width: rx = r/w, ry = r/h of the captured device. Two capture profiles exist. */
.ph{position:relative;display:block;width:320px;height:auto}
.ph.ring{border-radius:14.18% / 6.78%}    /* 416x870 outer, r59 — box-shadow ring frames */
.ph.mod{border-radius:11.79% / 5.45%}     /* 390x844 outer, r46 — 11px border frames     */
.wtch{position:relative;display:block;width:240px;height:auto}
.wtch.ftn{border-radius:28.24% / 23.46%}  /* 216x260 outer, r61 */
.wtch.db{border-radius:26.26% / 21.49%}   /* 198x242 outer, r52 */
@media(max-width:520px){.ph{width:260px}}

/* highlights strip */
.highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:clamp(56px,7vw,84px);text-align:left}
@media(max-width:820px){.highlights{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:480px){.highlights{grid-template-columns:1fr}}
.hl{border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
.band.light .hl{border-top-color:rgba(0,0,0,.14)}
.hl b{display:block;font-size:16px;font-weight:600;color:#fff}
.band.light .hl b{color:var(--k-ink)}
.hl span{display:block;margin-top:5px;font-size:14.5px;color:var(--k-gray);line-height:1.45}

/* split rows (copy + device) */
.split-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;text-align:left}
@media(max-width:860px){.split-row{grid-template-columns:1fr;text-align:center}}
.split-row .k-h2{margin-bottom:16px}
.split-row .k-sub{margin-left:0;margin-right:0;max-width:44ch}
@media(max-width:860px){.split-row .k-sub{margin-left:auto;margin-right:auto}}
.split-row .stage{margin-top:0}
.rowlist{margin:24px 0 0;padding:0;list-style:none}
@media(max-width:860px){.rowlist{display:inline-block;text-align:left}}
.rowlist li{position:relative;padding:7px 0 7px 22px;font-size:16px;line-height:1.5;color:var(--k-gray)}
.band.light .rowlist li{color:#6e6e73}
.rowlist li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.rowlist b{color:#fff;font-weight:600}
.band.light .rowlist b{color:var(--k-ink)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,5vw,60px);text-align:left}
@media(max-width:820px){.bento{grid-template-columns:1fr}}
.tile{grid-column:span 2;background:#fff;border-radius:24px;padding:30px 32px}
.band.black .tile{background:#101012;border:1px solid rgba(255,255,255,.08)}
.tile h3{font-size:19px;margin:0;letter-spacing:-.2px}
.tile p{margin:9px 0 0;font-size:15.5px;line-height:1.5;color:#6e6e73}
.band.black .tile p{color:var(--k-gray)}
.tile .big{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.03em;color:var(--acc);
  margin:0 0 6px;font-variant-numeric:tabular-nums}
.band.light .tile .big{color:var(--acc-ink)}

/* big stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:clamp(40px,5vw,64px)}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}}
.stat b{display:block;font-size:clamp(36px,5.2vw,64px);font-weight:700;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
.band.light .stat b{color:var(--k-ink)}
.stat span{display:block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--k-gray)}
.stat.hr b{color:#ff4d4d}
.stat.acc b{color:var(--acc)}

/* simple card row (export / etc) */
.exports{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(36px,4vw,52px);text-align:left}
@media(max-width:820px){.exports{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.exports{grid-template-columns:1fr}}
.exp{background:#fff;border-radius:20px;padding:24px 26px}
.band.black .exp{background:#101012;border:1px solid rgba(255,255,255,.08)}
.exp h4{margin:0;font-size:16.5px;letter-spacing:-.2px}
.exp p{margin:7px 0 0;font-size:14.5px;color:#6e6e73;line-height:1.45}
.band.black .exp p{color:var(--k-gray)}

/* colour vocabulary pills */
.phases{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.phase{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--k-gray);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 15px 8px 9px}
.band.light .phase{border-color:rgba(0,0,0,.12);color:#6e6e73}
.phase i{width:16px;height:16px;border-radius:50%;display:block}

.k-cta a{color:var(--acc);font-weight:600;text-decoration:none}
.k-cta a:hover{text-decoration:underline}

/* dark footer on product pages */
.product .site-footer{background:var(--k-black);border-top:1px solid rgba(255,255,255,.11)}
.product .site-footer .row{color:var(--k-gray)}
.product .site-footer a:hover{color:#fff}