/* ══════════════════════════════════════════════════════════════
   Ocly — marketing site
   Palette: concrete paper, ink, dark screen insets, one signal red.
   No gradients. No glows. Contrast does the work.
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:   #E5E6E2;
  --paper-2: #EDEEEA;
  --ink:     #15171B;
  --slate:   #5C626B;
  --screen:  #0B0C0F;
  --screen-2:#14161A;
  --live:    #DD3524;
  --rule:    #CFD0CB;
  --rule-dk: #262A31;

  --f-disp: "Archivo", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 3rem);
  --r:   12px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--ink); color:var(--paper); }

:focus-visible{ outline:2.5px solid var(--live); outline-offset:3px; }

.skip{
  position:absolute; left:-999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1rem; font-family:var(--f-mono); font-size:.8rem;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:1080px; margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:1240px; }
.wrap--narrow{ max-width:760px; }

/* ── type primitives ─────────────────────────────────────────── */

.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--slate);
  margin:0 0 1.1rem;
}
.eyebrow--light{ color:#7E858F; }

.h2{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 108;
  font-weight:800;
  font-size:clamp(1.95rem, 1.2rem + 2.6vw, 3.3rem);
  line-height:1.02;
  letter-spacing:-.028em;
  margin:0 0 1.1rem;
  max-width:16ch;
}
.h2--light{ color:var(--paper); }

.lede{ color:var(--slate); max-width:52ch; margin:0 0 2.6rem; }

/* One step down from .h2 — used on the post-purchase page. */
.h3{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 108;
  font-weight:700;
  font-size:clamp(1.25rem, .95rem + 1vw, 1.6rem);
  line-height:1.12;
  letter-spacing:-.018em;
  margin:0 0 1.1rem;
}

/* Numbered setup steps. A counter rather than list-style, so the numeral gets
   the same mono treatment as every other index on the site. */
.steps-list{ list-style:none; counter-reset:step; margin:0; padding:0; max-width:60ch; }
.steps-list li{
  counter-increment:step;
  position:relative;
  padding:0 0 1.15rem 2.4rem;
  margin-bottom:1.15rem;
  border-bottom:1px solid var(--rule);
  color:var(--slate);
  line-height:1.6;
}
.steps-list li:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.steps-list li::before{
  content:counter(step);
  position:absolute; left:0; top:.15em;
  font-family:var(--f-mono); font-size:.78rem; color:var(--ink);
}
.steps-list strong{ color:var(--ink); font-weight:600; }

.mono{ font-family:var(--f-mono); font-size:.92em; }

/* ── buttons ─────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-weight:600; font-size:1rem;
  padding:.95rem 1.55rem;
  border:1.5px solid var(--ink);
  border-radius:8px;
  text-decoration:none;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:#000; transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); }
.btn--sm{ padding:.6rem 1.05rem; font-size:.9rem; border-radius:7px; }
.btn--wide{ width:100%; max-width:420px; padding:1.1rem 1.5rem; }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ── keycaps ─────────────────────────────────────────────────── */

.kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.9em; height:1.9em; padding:0 .45em;
  /* system-ui first for the ⌘⇧⌥⌃ glyphs Plex Mono doesn't carry */
  font-family:"IBM Plex Mono", system-ui, -apple-system, ui-monospace, monospace;
  font-size:.78rem; font-weight:500;
  background:var(--paper-2);
  border:1.5px solid var(--rule);
  border-bottom-width:2.5px;
  border-radius:5px;
  color:var(--ink);
}

/* ══════════════════════════  NAV  ══════════════════════════ */

.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:2rem;
  padding:.85rem var(--pad);
  background:rgba(229,230,226,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav__brand{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; margin-right:auto;
}
.nav__mark{ width:26px; height:26px; color:var(--ink); flex:none; }
.nav__word{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 118;
  font-weight:800; font-size:1.28rem; letter-spacing:-.02em;
}
.nav__links{ display:flex; gap:1.75rem; }
.nav__links a{
  font-size:.92rem; color:var(--slate); text-decoration:none;
  padding-bottom:2px; border-bottom:1.5px solid transparent;
}
.nav__links a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
@media (max-width:820px){ .nav__links{ display:none; } }

/* ══════════════════════════  HERO  ══════════════════════════ */

.hero{ padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,6vw,5rem); }

.hero__h1{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 112;
  font-weight:800;
  font-size:clamp(2.7rem, 1.1rem + 6.6vw, 5.5rem);
  line-height:.94;
  letter-spacing:-.038em;
  margin:0 0 1.6rem;
  max-width:15ch;
}
.hero__h1-alt{
  font-variation-settings:"wdth" 92;
  font-weight:500;
  font-style:italic;
  letter-spacing:-.03em;
}
.hero__sub{
  font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);
  color:var(--slate);
  max-width:54ch;
  margin:0 0 2.2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.1rem; }
.hero__fine{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.05em;
  color:var(--slate); margin:0 0 clamp(3rem,6vw,4.5rem);
}

/* ══════════════  SIGNATURE: the two-view proof  ══════════════ */

.proof{ margin:0; }

.proof__head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:1rem;
}

.switch{
  display:inline-flex;
  border:1.5px solid var(--ink);
  border-radius:9px;
  padding:3px;
  background:var(--paper-2);
}
.switch__opt{
  appearance:none; border:0; cursor:pointer;
  font-family:var(--f-body); font-size:.88rem; font-weight:600;
  padding:.5rem 1.05rem; border-radius:6px;
  background:transparent; color:var(--slate);
  transition:background .18s ease, color .18s ease;
}
.switch__opt.is-on{ background:var(--ink); color:var(--paper); }

.proof__state{
  font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate); margin:0;
}

/* the dark stage — a screen inset in the paper */
.stage{
  background:var(--screen);
  border:1px solid var(--rule-dk);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 22px 50px -28px rgba(11,12,15,.55);
}

.stage__bar{
  display:flex; align-items:center; gap:.9rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--rule-dk);
  background:var(--screen-2);
}
.dots{ display:inline-flex; gap:.4rem; flex:none; }
.dots i{ width:10px; height:10px; border-radius:50%; background:#2C3138; display:block; }
.stage__title{
  font-family:var(--f-mono); font-size:.76rem; color:#79808B;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rec{
  margin-left:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; color:#9AA1AB;
  opacity:0; transition:opacity .3s ease;
}
.rec__dot{ width:8px; height:8px; border-radius:50%; background:var(--live); display:block; }
.stage[data-stage="them"] .rec{ opacity:1; }

.stage__body{
  position:relative;
  display:grid;
  grid-template-columns:1fr 152px;
  gap:1rem;
  padding:1rem;
  min-height:520px;
}
@media (max-width:760px){
  .stage__body{ grid-template-columns:1fr; min-height:0; }
}

/* the window being shared */
.shared{
  background:var(--screen-2);
  border:1px solid var(--rule-dk);
  border-radius:10px;
  overflow:hidden;
}
.shared__tab{
  font-family:var(--f-mono); font-size:.74rem; color:#8B929C;
  padding:.55rem .9rem;
  border-bottom:1px solid var(--rule-dk);
}
.code{
  margin:0; padding:1rem .9rem;
  font-family:var(--f-mono);
  font-size:clamp(.66rem,.55rem + .3vw,.82rem);
  line-height:1.75;
  color:#C3C9D2;
  overflow-x:auto;
}
.c-k{ color:#A78BFA; }
.c-f{ color:#7DD3FC; }
.c-t{ color:#5EEAD4; }
.c-n{ color:#FCA5A5; }
.c-c{ color:#5A626D; font-style:italic; }

/* participants */
.tiles{ display:grid; gap:.65rem; align-content:start; }
@media (max-width:760px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
.tile{
  position:relative;
  aspect-ratio:4/3;
  background:var(--screen-2);
  border:1px solid var(--rule-dk);
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.tile--you{ border-color:#39414B; }
.tile__initial{
  font-family:var(--f-disp); font-weight:700; font-size:1.15rem;
  color:#6C7480;
  width:2.35rem; height:2.35rem; border-radius:50%;
  background:#20242A;
  display:flex; align-items:center; justify-content:center;
}
.tile__name{
  position:absolute; left:.5rem; bottom:.4rem;
  font-family:var(--f-mono); font-size:.62rem; color:#79808B;
}

/* ── THE OVERLAY PANEL ── */
.panel{
  position:absolute; right:1.35rem; bottom:1.35rem;
  width:min(300px, calc(100% - 2.7rem));
  background:rgba(18,20,24,.94);
  border:1px solid #333A44;
  border-radius:12px;
  padding:.85rem;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
  transition:opacity .42s ease, transform .42s ease;
}
.stage[data-stage="them"] .panel{
  opacity:0;
  transform:scale(.985);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .panel{ transition:none; } }

.panel__head{ display:flex; align-items:center; gap:.45rem; margin-bottom:.7rem; }
.panel__mark{ width:15px; height:15px; color:#98A0AC; flex:none; }
.panel__label{
  font-family:var(--f-disp); font-variation-settings:"wdth" 115;
  font-weight:700; font-size:.82rem; color:#C7CDD6;
}
.panel__live{
  margin-left:auto; display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:#7C838E;
}
.panel__live-dot{ width:6px; height:6px; border-radius:50%; background:var(--live); display:block; }

.panel__heard{
  font-size:.76rem; line-height:1.5; color:#8D949F;
  border-left:2px solid #3A424D;
  padding:.15rem 0 .15rem .6rem;
  margin-bottom:.7rem;
}
.panel__who{
  display:block;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:#646C77; margin-bottom:.15rem;
}
.panel__answer{ font-size:.79rem; line-height:1.55; color:#DCE1E8; }
.panel__answer p{ margin:0 0 .5rem; }
.panel__answer code{
  font-family:var(--f-mono); font-size:.92em;
  background:#22262D; border-radius:3px; padding:.08em .3em; color:#9DE7DA;
}
.panel__answer em{ color:#F0F3F7; font-style:italic; }

.panel__foot{
  display:flex; align-items:center; gap:.35rem;
  margin-top:.8rem; padding-top:.65rem;
  border-top:1px solid #262B33;
  font-family:var(--f-mono); font-size:.62rem; color:#6B727D;
}
.panel__foot .kbd{
  min-width:1.5em; height:1.5em; font-size:.6rem;
  background:#20242B; border-color:#333A44; color:#98A0AC;
}
.panel__sep{ width:1px; height:.9rem; background:#2C323A; margin-inline:.35rem; }

/* the ghost outline — the shape of what isn't there */
.ghost{
  position:absolute; right:1.35rem; bottom:1.35rem;
  width:min(300px, calc(100% - 2.7rem)); height:258px;
  border:1.5px dashed #333A44;
  border-radius:12px;
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding:.7rem .85rem;
  opacity:0; transition:opacity .42s ease .1s;
  pointer-events:none;
}
.ghost span{
  font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:#454D58;
}
.stage[data-stage="them"] .ghost{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .ghost{ transition:none; } }
/* Stacked: the panel and its absence swap places in the flow, so the
   toggle still proves the point on a phone. */
@media (max-width:760px){
  .panel{ position:relative; right:auto; bottom:auto; width:100%; }
  .ghost{
    position:relative; right:auto; bottom:auto;
    width:100%; height:132px; display:none;
  }
  .stage[data-stage="them"] .panel{ display:none; }
  .stage[data-stage="them"] .ghost{ display:flex; }
}

.proof__cap{
  margin:1.1rem 0 0;
  font-size:.9rem; color:var(--slate); max-width:66ch;
}

/* ══════════════════════════  BANDS  ══════════════════════════ */

.band{ padding:clamp(3.5rem,8vw,6.5rem) 0; border-top:1px solid var(--rule); }
.band--paper{ background:var(--paper-2); }
.band--dark{ background:var(--screen); border-top-color:var(--rule-dk); }

/* ── how it works ── */
.steps{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:var(--r);
  overflow:hidden;
  margin-top:2.6rem;
}
.step{ background:var(--paper); padding:1.9rem 1.6rem; }
.step__tag{
  font-family:var(--f-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--live);
  margin:0 0 1.4rem;
}
.step__h{
  font-family:var(--f-disp); font-variation-settings:"wdth" 105;
  font-weight:700; font-size:1.22rem; line-height:1.2;
  letter-spacing:-.018em; margin:0 0 .7rem;
}
.step__p{ margin:0 0 1.5rem; color:var(--slate); font-size:.95rem; }
.step__key{ margin:0; display:flex; gap:.3rem; }

/* ── feature grid ── */
.grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:2.6rem;
}
.card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:1.6rem 1.5rem;
}
.card__tag{
  font-family:var(--f-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); margin:0 0 1.1rem;
}
.card__h{
  font-family:var(--f-disp); font-variation-settings:"wdth" 104;
  font-weight:700; font-size:1.1rem; line-height:1.25;
  letter-spacing:-.015em; margin:0 0 .55rem;
}
.card__p{ margin:0; color:var(--slate); font-size:.92rem; }

/* ── hotkeys ── */
.keys{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  border-top:1px solid var(--rule);
}
.keyrow{
  display:flex; align-items:center; gap:1rem;
  padding:.85rem .25rem;
  border-bottom:1px solid var(--rule);
}
.keyrow__k{ display:inline-flex; gap:.25rem; flex:none; min-width:9.5rem; }
.keyrow__d{ color:var(--slate); font-size:.93rem; }

/* ── byok ── */
.split{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1.05fr .95fr;
  margin-top:2.4rem;
}
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.split__p{ color:#9AA1AB; margin:0 0 1.15rem; max-width:48ch; }
.split__p--em{ color:var(--paper); font-weight:500; }

.providers{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dk); }
.provider{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--rule-dk);
}
.provider__n{
  font-family:var(--f-disp); font-variation-settings:"wdth" 108;
  font-weight:700; font-size:1.05rem; color:var(--paper);
  min-width:8rem;
}
.provider__d{ font-family:var(--f-mono); font-size:.78rem; color:#79808B; }

/* ── pricing ── */
.price{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:16px;
  padding:clamp(1.75rem,4vw,2.75rem);
  max-width:560px;
  margin-top:2.4rem;
}
.price__top{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.price__amount{
  font-family:var(--f-disp); font-variation-settings:"wdth" 112;
  font-weight:800; font-size:clamp(3.5rem,2rem + 5vw,5.2rem);
  line-height:.85; letter-spacing:-.045em; margin:0;
}
.price__cur{ font-size:.42em; vertical-align:super; font-weight:700; letter-spacing:-.02em; }
.price__unit{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--slate); margin:0;
}
.price__list{ list-style:none; margin:2rem 0; padding:0; }
.price__list li{
  position:relative; padding:.6rem 0 .6rem 1.7rem;
  border-bottom:1px solid var(--rule);
  font-size:.95rem;
}
.price__list li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:9px; height:9px; border-radius:2px; background:var(--ink);
}
.price__fine{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--slate); margin:.9rem 0 0;
}
.price__note{
  font-size:.86rem; color:var(--slate);
  margin:1.6rem 0 0; padding-top:1.2rem;
  border-top:1px solid var(--rule);
}
.price__note strong{ color:var(--ink); }

/* ── faq ── */
.faq{ margin-top:2.4rem; border-top:1px solid var(--rule); }
.qa{ border-bottom:1px solid var(--rule); }
.qa__q{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:1rem;
  padding:1.15rem 0;
  font-family:var(--f-disp); font-variation-settings:"wdth" 104;
  font-weight:600; font-size:1.05rem; letter-spacing:-.012em;
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__q::after{
  content:"+"; margin-left:auto; flex:none;
  font-family:var(--f-mono); font-size:1.2rem; color:var(--slate);
}
.qa[open] .qa__q::after{ content:"–"; }
.qa__a{ padding:0 0 1.3rem; max-width:64ch; }
.qa__a p{ margin:0; color:var(--slate); font-size:.95rem; }

/* ── close ── */
.close{
  background:var(--screen); color:var(--paper);
  padding:clamp(4rem,9vw,7rem) 0;
  text-align:center;
}
.close__h{
  font-family:var(--f-disp); font-variation-settings:"wdth" 112;
  font-weight:800; font-size:clamp(2.4rem,1.2rem + 4.5vw,4.4rem);
  line-height:.97; letter-spacing:-.035em; margin:0 0 .9rem;
}
.close__p{ color:#8B929C; margin:0 auto 2.2rem; max-width:40ch; }
.close .btn--solid{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
  margin-inline:auto;
}
.close .btn--solid:hover{ background:#fff; border-color:#fff; }

/* ── footer ── */
.foot{ background:var(--screen); color:#79808B; padding:0 0 3rem; }
.foot__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
  padding-top:2.4rem;
  border-top:1px solid var(--rule-dk);
}
.foot .nav__mark,
.foot .nav__word{ color:var(--paper); }
.foot__note{ margin:0; font-size:.85rem; max-width:34ch; }
.foot__links{ display:flex; gap:1.4rem; margin-left:auto; }
.foot__links a{ font-size:.85rem; text-decoration:none; color:#79808B; }
.foot__links a:hover{ color:var(--paper); }

/* ── scroll reveal ── */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); }
  .reveal.is-in{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
}