/* ═══════════════════════════════════════════════════════════════════════════
   seo-pages.css — the editorial pages (Features, Learn, Compare, Team)

   ONE STYLESHEET, LINKED, NOT INLINED, and the reason is already written in
   this repo: shop.html says it in its own head, where the block that used to
   sit there became shop.css because "three copies of a palette is how three
   pages come to disagree about what --primary is". That argument gets worse
   the more copies there are. index.html carries roughly five hundred lines of
   inline CSS; a hundred editorial pages built the same way would carry fifty
   thousand, and the day the teal moves, ninety-nine of them would not.

   index.html keeps its inline block and is not touched by this file. It is one
   document with a hero, a bento, a comparison table and a plan grid — layout
   that exists once and is needed once, and inlining it is what keeps its first
   paint free of a second request. These pages are the opposite case: one
   layout, many documents.

   THE TOKENS BELOW ARE COPIES, NOT A FORK. Every value is lifted verbatim from
   the :root block in index.html and from DESIGN.md, which is the document that
   settles a disagreement. A value that moves there has to move here on the same
   day. Only the tokens the editorial layout actually uses are repeated; the
   hero bloom, the plan cards and the comparison table live in index.html
   because nothing here draws them.

   Everything renders with scripting off. There is no JavaScript on these pages
   at all: no reveal observer, no translation pass, no language handler. Each
   page is one locale, written in that locale, served from its own URL — so the
   opacity:0 reveal that index.html uses would be a way for this page to arrive
   blank, buying an animation nobody asked for.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}

:root{
  --bg:#0A0A0F;
  --bg-deep:#08080D;
  --surface:#101017;
  --primary:#00E5CC;
  --gold:#C9A84C;
  --white:#FFFFFF;
  --text-secondary:#9AA6B8;
  --text-muted:#77869A;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);

  /* Flat, not a ramp. Kept under the old gradient's name so the name still
     reads at every call site (DESIGN.md §3). */
  --cta:#00E5CC;

  --font-head:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* FLUID TYPE. One scale, and no per-breakpoint font-size override anywhere
     below — the reason is Russian, which runs 15-20% longer than English on
     this content, and Turkish, which produces long unbreakable compounds. A
     hard size chosen while looking at English becomes a four-line heading at a
     width nobody screenshots. */
  --t-mono:clamp(.64rem,.6rem + .12vw,.72rem);
  --t-xs:clamp(.76rem,.73rem + .12vw,.83rem);
  --t-sm:clamp(.84rem,.81rem + .14vw,.92rem);
  --t-base:clamp(.94rem,.9rem + .2vw,1.03rem);
  --t-lead:clamp(1.02rem,.96rem + .3vw,1.18rem);
  --t-h3:clamp(1.06rem,.98rem + .38vw,1.28rem);
  --t-h2:clamp(1.65rem,1.32rem + 1.5vw,2.55rem);
  --t-h1:clamp(2.05rem,1.55rem + 2.4vw,3.5rem);

  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:clamp(2.25rem,1.6rem + 2.4vw,3.5rem);
  --s7:clamp(3.5rem,2.4rem + 4vw,6rem);
  --gutter:clamp(1.25rem,5vw,4rem);
  --shell:1240px;

  --r-sm:4px; --r-md:12px; --r-lg:18px;   /* nothing above 24px, ever */

  /* In em and not px, and the unit is the whole point: a custom property is
     substituted as a token, so the em resolves against the font-size of
     whichever element uses it. 36em is ~70 characters at 16px and still ~70
     characters at 13px; a px cap chosen for 16px prose runs to 120. */
  --measure:36em;
}

html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--white);font-family:var(--font-body);font-size:var(--t-base);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;line-height:1.14}
a{color:var(--primary);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.78}
img{max-width:100%;display:block}
strong{font-weight:600;color:var(--white)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:2px}

.skip-nav{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-nav:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:12px 20px;background:var(--primary);color:#000;z-index:9999;border-radius:8px;font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Under lang="tr" the CSS uppercase maps i to İ, so an uppercased "Omnisio"
   renders "OMNİSİO" and "Horizon" renders "HORİZON". Any control whose label
   contains a brand name wears this. */
.brandcase{text-transform:none!important;letter-spacing:.01em!important}

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════════════════════════════ */
.shell{max-width:var(--shell);margin:0 auto;width:100%}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) clamp(1rem,2.5vw,2rem)}
/* The 1rem floor on the column gap is load-bearing rather than taste. Twelve
   1fr tracks have a minimum width of nothing, so the grid's own minimum is the
   ELEVEN GAPS — at a fixed 2rem that is 352px, wider than the content column a
   320px phone has, and the whole document then scrolls sideways in every
   language at once. Any future value must satisfy 11 x gap < (viewport - 2 x
   gutter) at 320px. */
.grid12>*{min-width:0}

.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin-bottom:var(--s3)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.lede{font-size:var(--t-lead);line-height:1.62;color:var(--text-secondary);max-width:var(--measure)}
.note{font-size:var(--t-xs);line-height:1.7;color:var(--text-muted);max-width:var(--measure)}
.rule{border:0;border-top:1px solid var(--border);margin:0}
.tag{align-self:flex-start;font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--primary);opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV
   Static, and not the landing page's nav. index.html's bar is fixed, collapses
   to a burger and carries a scroll handler; all three need JavaScript, and an
   editorial page that needs JavaScript to show its own navigation is a page
   that shows none when the script is blocked. This one is in flow, wraps
   instead of collapsing, and has nothing to open.
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar{border-bottom:1px solid var(--border);background:var(--bg-deep)}
.topbar-inner{max-width:var(--shell);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav-logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.nav-logo img{width:32px;height:32px;object-fit:contain}
.nav-logo-text{font-family:var(--font-head);font-weight:400;font-size:1.1rem;letter-spacing:.42em;color:var(--primary);text-transform:uppercase}
.topbar-links{display:flex;align-items:center;gap:22px;list-style:none;flex-wrap:wrap}
.topbar-links a{font-size:var(--t-xs);font-weight:500;color:var(--text-secondary);letter-spacing:.01em;transition:color .2s}
.topbar-links a:hover{color:var(--white);opacity:1}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang-switcher{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;padding:3px}
/* Anchors, not buttons: each language is its own pre-rendered URL, so
   switching is a navigation and has to be one a crawler can follow. */
.lang-btn{color:var(--text-muted);font-family:var(--font-mono);font-size:.68rem;text-decoration:none;padding:4px 7px;border-radius:7px;transition:background .2s,color .2s;letter-spacing:.05em}
.lang-btn.active{background:var(--primary);color:#000;font-weight:500}
.lang-btn:hover{color:var(--white);opacity:1}
.lang-btn.active:hover{color:#000}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   Rendered, not only declared. The BreadcrumbList in the head tells a crawler
   where the page sits; this row tells a reader, and a structured-data claim
   with nothing visible behind it is the kind a search engine is entitled to
   ignore.
   ═══════════════════════════════════════════════════════════════════════════ */
.crumbs{max-width:var(--shell);margin:0 auto;padding:var(--s4) var(--gutter) 0;font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.08em;color:var(--text-muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--border-strong)}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--primary);opacity:1}
.crumbs [aria-current]{color:var(--text-secondary)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ARTICLE
   7/5, not centred. DESIGN.md rejects the centred-hero composition outright,
   and prose that fills a 1240px shell is unreadable anyway — the measure token
   is what stops it.
   ═══════════════════════════════════════════════════════════════════════════ */
.page{padding:var(--s6) var(--gutter) var(--s7)}
.page-head{grid-column:span 8}
.page-aside{grid-column:span 4;align-self:end}
.page-h1{font-size:var(--t-h1);text-wrap:balance;margin-bottom:var(--s3)}
.page-h1 em{font-style:normal;color:var(--text-secondary)}
/* The intro is one or more paragraphs and they need a gap between them. Without
   this they set as a single block: same size, same colour, no indent and no
   space, so the second one reads as a run-on of the first. */
.page-head .lede+.lede{margin-top:var(--s3)}
.page-dates{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border-left:2px solid rgba(0,229,204,.4);padding-left:14px;line-height:1.9}

.body{grid-column:span 8;display:grid;gap:var(--s6);margin-top:var(--s5)}
.side{grid-column:span 4;margin-top:var(--s5);align-self:start;position:sticky;top:var(--s4)}

.sec h2{font-size:var(--t-h2);text-wrap:balance;margin-bottom:var(--s3)}
.sec h2 em{font-style:normal;color:var(--text-secondary)}
.sec p{font-size:var(--t-base);line-height:1.78;color:var(--text-secondary);max-width:var(--measure)}
.sec p+p{margin-top:var(--s3)}
.sec p strong{color:var(--white)}

/* Hairline dashes and dots, never a floating emoji (DESIGN.md §4). */
.points{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s4);max-width:var(--measure)}
.points li{position:relative;padding-left:20px;font-size:var(--t-sm);line-height:1.78;color:var(--text-secondary)}
.points li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--primary);opacity:.75}
.points li strong{color:var(--white)}

/* Deliberately not three equal cards in a row: this is the quiet register, a
   hairline above and typography below, and it stacks at 720px. */
.readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5);border-top:1px solid var(--border);margin-top:var(--s4)}
.readout>div{padding:var(--s4) 0 0}
.readout dt{font-family:var(--font-head);font-weight:600;font-size:var(--t-sm);margin-bottom:.45rem}
.readout dd{font-size:var(--t-xs);line-height:1.72;color:var(--text-secondary)}

.callout{border-left:2px solid rgba(0,229,204,.4);padding:2px 0 2px 16px;margin-top:var(--s4);max-width:var(--measure)}
.callout p{font-size:var(--t-sm);line-height:1.78;color:var(--text-secondary)}

.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.35rem,1rem + 1.4vw,2rem);display:flex;flex-direction:column;gap:.7rem;transition:border-color .3s}
.tile:hover{border-color:rgba(0,229,204,.24)}
.tile h3{font-size:var(--t-h3);font-weight:600}
.tile p{font-size:var(--t-sm);line-height:1.7;color:var(--text-secondary)}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ
   details/summary, so it works with scripting blocked and more than one answer
   can be held open at once.
   ═══════════════════════════════════════════════════════════════════════════ */
.faq-item{border-top:1px solid var(--border)}
.faq-item:last-of-type{border-bottom:1px solid var(--border)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:20px 0;font-family:var(--font-head);font-weight:600;font-size:var(--t-base);color:var(--white)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:1.1rem;color:var(--primary);flex:0 0 auto;line-height:1.2}
.faq-item[open] summary::after{content:"\2013"}
.faq-a{padding:0 34px 22px 0;font-size:var(--t-sm);line-height:1.8;color:var(--text-secondary);max-width:var(--measure)}
.faq-a p+p{margin-top:.85rem}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDE RAIL, CTA, RELATED
   ═══════════════════════════════════════════════════════════════════════════ */
.rail{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--s4)}
.rail h2{font-family:var(--font-head);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-bottom:14px}
.rail ul{list-style:none;display:grid;gap:11px}
.rail a{font-size:var(--t-sm);color:var(--text-secondary);line-height:1.5;display:block;overflow-wrap:anywhere}
.rail a:hover{color:var(--primary);opacity:1}
.rail .soon{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:var(--t-sm);letter-spacing:.03em;padding:15px 28px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary{background:var(--cta);color:#000}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,229,204,.34);opacity:1;color:#000}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--white);border-color:var(--border-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.09);opacity:1;color:var(--white)}

.endcta{border-top:1px solid var(--border);background:linear-gradient(180deg,var(--bg) 0%,#0A0E14 100%);padding:var(--s7) var(--gutter)}
.endcta-copy{grid-column:span 7}
.endcta-act{grid-column:span 5;align-self:center;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.endcta h2{font-size:var(--t-h2);text-wrap:balance;margin-bottom:var(--s3)}
.endcta h2 em{font-style:normal;color:var(--text-secondary)}

/* An icon and a label with no href yet. The Google Play listing does not
   exist, and a live-looking link to a page that is not there is worse than an
   honest gap — so the slot is drawn as text a reader can read and a crawler
   cannot follow, and it becomes an <a> on the day there is somewhere for it to
   go. Do not put a placeholder URL here. */
.cta-pending{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:600;font-size:var(--t-sm);letter-spacing:.03em;padding:15px 28px;border-radius:12px;border:1px dashed var(--border-strong);color:var(--text-muted);cursor:default}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
footer{background:var(--bg-deep);border-top:1px solid var(--border);padding:var(--s6) var(--gutter) var(--s5)}
.footer-grid{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:var(--s5)}
.footer-tagline{font-size:var(--t-xs);color:var(--text-secondary);line-height:1.7;margin:14px 0;max-width:30em}
.footer-contact{font-size:var(--t-xs);color:var(--text-secondary);line-height:1.9}
.footer-col h2{font-family:var(--font-head);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-bottom:14px}
.footer-links{list-style:none;display:grid;gap:9px}
.footer-links a{font-size:var(--t-xs);color:var(--text-secondary)}
.footer-links a:hover{color:var(--primary);opacity:1}
/* The regulatory boundary, stated on every page rather than only beside the
   paid card. The wording is the app's own standing disclaimer and the two are
   one statement; they must not drift apart. No badge, no seal, no
   certification mark, because we hold none. */
.footer-disclaimer{max-width:var(--shell);margin:var(--s5) auto 0;padding-top:var(--s4);border-top:1px solid var(--border);font-size:var(--t-xs);line-height:1.75;color:var(--text-muted)}
.footer-bottom{max-width:var(--shell);margin:var(--s4) auto 0;font-size:var(--t-mono);font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.04em}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVENESS
   Three collapse steps and no font-size override in any of them — the fluid
   scale already handles size, so what changes is only how many columns a thing
   occupies (DESIGN.md §6).
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:960px){
  .page-head,.page-aside,.body,.side,.endcta-copy,.endcta-act{grid-column:span 12}
  .side{position:static;margin-top:0}
  .page-aside{align-self:start}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .readout{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .topbar-inner{gap:12px}
}
@media(max-width:560px){
  .btn,.cta-pending{width:100%}
  .endcta-act{align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* A touch device has no hover — it has a tap that sticks, and without this the
   thing you scrolled past stays lifted. Colour and border changes survive,
   because those still read as "this is the one I just pressed". hover:none and
   not pointer:coarse: a laptop trackpad reports coarse on some browsers and
   does have a cursor. */
@media(hover:none){
  .btn:hover,.btn-primary:hover{transform:none;box-shadow:none}
}