/* OSIRIS inner pages: shared layout pieces (page hero, split rows, grids, tabs, indicator window, lightbox). */
.phero{padding:calc(var(--nav-h) + clamp(4rem,9vw,8rem)) 0 clamp(2rem,5vw,4rem)}
.phero .h1{max-width:12em}
.phero .lead{max-width:44em}
.facts{display:flex;flex-wrap:wrap;gap:var(--s5) clamp(2rem,6vw,5rem);margin:clamp(2rem,4vw,3.5rem) 0 0;padding-top:var(--s5);border-top:1px solid var(--line-strong)}
.facts dt{font-size:var(--t-small);color:var(--fog)}
.facts dd{margin:.2rem 0 0;font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em}

.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.split--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.split .ticks{margin-bottom:var(--s6)}
.shot{display:block;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line-strong);background:var(--night);cursor:zoom-in;transition:transform var(--d-med) var(--ease-out),border-color var(--d-fast)}
.shot:hover{transform:scale(1.012);border-color:rgba(238,241,244,.34)}
.shot img{width:100%;height:auto}
.scard--tall,.scard--tall .scard__fg{min-height:24rem}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:2.6rem 2.2rem;justify-items:center;padding:1.4rem .9rem}
.pgrid--two{grid-template-columns:repeat(2,minmax(0,max-content));justify-content:start;gap:3rem}
.pgrid[hidden]{display:none}

.tabs__list{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s6);padding:.3rem;border-radius:var(--r-panel);background:rgba(238,241,244,.05);width:max-content;max-width:100%}
.tabs__btn{min-height:2.75rem;padding:0 1.15rem;border-radius:var(--r-pill);font-size:.9375rem;font-weight:700;color:var(--mist);transition:background-color var(--d-fast),color var(--d-fast)}
.tabs__btn:hover{color:var(--bone)}
.tabs__btn.is-on{background:var(--bone);color:var(--obsidian)}

.pcta{text-align:center}
.pcta .lead{margin:var(--s4) auto var(--s6)}

/* indicator window */
.modal__panel.ind{width:min(100%,64rem);padding:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);overflow:hidden}
.ind__media{display:block;min-height:18rem;background:var(--obsidian);cursor:zoom-in}
.ind__media img{width:100%;height:100%;object-fit:cover}
.ind__media.is-empty{cursor:default;background:radial-gradient(120% 90% at 20% 10%,var(--nile-dim),var(--night) 70%)}
.ind__body{padding:2.25rem 2rem 2rem}
.ind__tag{display:inline-block;padding:.3rem .8rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);font-size:var(--t-small);font-weight:700;color:var(--nile-strong)}
.ind__title{margin-top:1rem;font-size:clamp(1.6rem,3vw,2.25rem);line-height:1.05;letter-spacing:-.03em}
.ind__desc{margin-top:1rem;color:var(--mist);line-height:1.6}
.ind__how{margin-top:1.4rem;padding:1rem 1.1rem;border-radius:16px;background:rgba(78,177,194,.08);border:1px solid rgba(78,177,194,.25)}
.ind__how b{display:block;margin-bottom:.35rem;font-size:var(--t-small);color:var(--nile-strong)}
.ind__how p{font-size:.9375rem;line-height:1.55}
.ind__note{margin-top:1rem;font-size:var(--t-small);color:var(--gold-strong)}
.ind__note[hidden]{display:none}

/* full-screen picture */
.lightbox{position:fixed;inset:0;z-index:calc(var(--z-modal) + 30);display:none;place-items:center;padding:1rem;background:rgba(3,5,10,.92);cursor:zoom-out}
.lightbox.is-open{display:grid;animation:modalIn var(--d-med) var(--ease-out)}
.lightbox img{max-width:100%;max-height:92svh;border-radius:14px;box-shadow:0 40px 120px -30px #000}

@media (max-width:860px){
  .tabs__list{flex-wrap:nowrap;overflow-x:auto;width:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);border-radius:0;background:none;scrollbar-width:none}
  .tabs__list::-webkit-scrollbar{display:none}
  .tabs__btn{flex:0 0 auto;border:1px solid var(--line-strong)}
  .tabs__btn.is-on{border-color:var(--bone)}
  .split,.split--flip{grid-template-columns:1fr}
  .split--flip>div:first-child{order:2}
  .modal__panel.ind{grid-template-columns:1fr}
  .ind__media{min-height:0;aspect-ratio:16/10}
  .pgrid--two{grid-template-columns:1fr;justify-items:center}
}

/* ---------- page not found ---------- */
.lost{min-height:92svh;display:grid;align-items:center;padding:calc(var(--nav-h) + 4rem) 0 4rem;text-align:center}
.lost__in{display:grid;justify-items:center}
.lost__art{--mascot:clamp(7rem,14vw,11rem);margin-bottom:1.5rem}
.lost__code{font-size:var(--t-small);font-weight:700;letter-spacing:.3em;color:var(--nile-strong)}
.lost .h1{margin-top:.6rem}
.lost .lead{margin:var(--s4) auto 0}
.lost__row{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.lost__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin-top:2rem;font-size:var(--t-small);color:var(--mist)}
.lost__links a{padding:.4rem 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);transition:color var(--d-fast)}
.lost__links a:hover{color:var(--bone)}

/* ---------- account preferences ---------- */
.acc__wrap{max-width:66rem}
.phero--acc{padding-bottom:clamp(1rem,2vw,1.5rem)}
.section--acc{padding-top:clamp(.5rem,1.5vw,1.5rem)}
.acc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.acc[hidden]{display:none}
.acc__side{position:sticky;top:calc(var(--nav-h) + 2rem)}
.acc__card{width:min(100%,26rem);margin-inline:auto}
.acc__hint{margin-top:1rem;text-align:center;font-size:var(--t-small);color:var(--fog)}
.acc__main{display:grid;gap:1.1rem}
.acc__box{padding:clamp(1.15rem,2.2vw,1.75rem);border-radius:var(--r-panel);border:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(238,241,244,.045),rgba(238,241,244,.015))}
.acc__box h2{font-size:var(--t-small);font-weight:700;color:var(--mist)}
.acc__rows{margin-top:.6rem}
.acc__rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.acc__rows>div:last-child{border-bottom:0;padding-bottom:0}
.acc__rows dt{color:var(--mist);font-size:.9375rem}
.acc__rows dd{margin:0;text-align:right;font-weight:700;min-width:0;overflow-wrap:anywhere}
.acc__rows dd small{display:block;margin-top:.15rem;font-size:var(--t-small);font-weight:400;color:var(--mist)}
.acc__rows dd .link{margin-left:.8rem;font-size:var(--t-small)}
.acc__rows .is-on{color:var(--up)}
.acc__rows .is-off{color:var(--mist);font-weight:400}
.acc__mail{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}
.acc__mail b{display:block}
.acc__mail p{margin-top:.2rem;font-size:var(--t-small);color:var(--mist)}
.acc__sub{display:flex;align-items:center;gap:.8rem;flex-shrink:0}
.acc__state{font-size:var(--t-small);font-weight:700;color:var(--mist)}
.acc__state.is-on{color:var(--up)}
.acc__switch{display:inline-flex;min-height:2.75rem;align-items:center;cursor:pointer}
.acc__choose{display:flex;gap:.4rem}
.acc__choose[hidden],.acc__switch[hidden],.acc__state[hidden]{display:none}
.acc__status{margin-top:1rem;padding:.7rem .9rem;border-radius:12px;font-size:var(--t-small);border:1px solid rgba(53,208,143,.35);background:rgba(53,208,143,.08);color:#a7efcf}
.acc__status.is-bad{border-color:rgba(255,84,102,.35);background:rgba(255,84,102,.08);color:#ff9aa5}
.acc__status[hidden]{display:none}
.acc__fine{margin-top:1rem;font-size:var(--t-small);line-height:1.55;color:var(--fog)}
.acc__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.acc__wait{padding:4rem 0}
.acc__wait[hidden]{display:none}
@media (max-width:860px){
  .acc{grid-template-columns:1fr}
  .acc__side{position:static}
  .acc__card{width:min(100%,21rem)}
  .acc__mail{flex-direction:column;align-items:flex-start}
}

/* ---------- /pricing in palette E (22 Oct 2026, the member cards step): the gold of the old proof goes ----------
   pricing.css (loaded after this file) still holds the old gold rules; these win by scope (.page-pricing), so nothing there
   is edited until step 7. The Shark plan is set apart by light, like its card: the accent, never gold. */
/* the Shark plan's button: the primary accent, with the card's sheen sliding across on hover (also meant for checkout, step 7) */
.btn--shark{--btn-bg:var(--accent);--btn-fg:var(--bg);--btn-bd:var(--accent);font-weight:600;overflow:hidden;isolation:isolate}
.btn--shark::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.42) 47%,rgba(224,242,254,.3) 53%,rgba(255,255,255,0) 68%) -160% 0/260% 100% no-repeat;
  transition:background-position .75s var(--ease)}
.btn--shark:hover{--btn-bg:var(--accent-hover);--btn-bd:var(--accent-hover);box-shadow:0 8px 24px -12px rgba(56,189,248,.65)}
.btn--shark:hover::after{background-position:160% 0}
.btn--shark:active{--btn-bg:var(--accent-press);--btn-bd:var(--accent-press);box-shadow:none}
.btn--shark[disabled]::after{display:none}
.page-pricing .tier__badge{color:var(--nile-strong);border-color:rgba(56,189,248,.42);background:rgba(56,189,248,.1)}
.page-pricing .tier__badge--shark{color:var(--bg);border-color:transparent;background:linear-gradient(110deg,var(--accent),var(--nile-strong))}
.page-pricing .tier--shark{border-color:rgba(56,189,248,.34);
  background:radial-gradient(110% 60% at 85% 0%,rgba(56,189,248,.12),transparent 62%),linear-gradient(180deg,rgba(29,78,216,.08),rgba(242,244,248,.012) 55%)}
.page-pricing .tier--shark.is-yours{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.page-pricing .tier.is-wanted{animation-name:tierWantedE}
@keyframes tierWantedE{0%{box-shadow:0 0 0 0 rgba(56,189,248,.55)}100%{box-shadow:0 0 0 1.6rem rgba(56,189,248,0)}}
.page-pricing .planstate--shark{border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.08)}
.page-pricing .planstate--shark b{color:var(--nile-strong)}
.ticks--shark>li::before{border-color:var(--nile-strong)}
.page-pricing .ticks .chips li{border-color:rgba(56,189,248,.26);background:rgba(56,189,248,.06)}
.page-pricing .cmpt td:last-child,.page-pricing .cmpt thead th:last-child{background:rgba(56,189,248,.05)}
.page-pricing .cmpt tbody tr:not(.cmpt__grp):hover td:last-child{background:rgba(56,189,248,.1)}
.page-pricing .cmpt td.cmpt__y:last-child::before{border-color:var(--nile-strong)}
.page-pricing .cmpt__t{color:var(--nile-strong)}
.cmpt__shark{color:var(--nile-strong)}
/* the link under the Shark button ("7 days free, no card needed", "Manage it in your profile"): a 44 px tall tap area on
   phones, without moving the line it sits in */
.page-pricing .tier__sub .link{display:inline-block;padding:.75rem .3rem;margin:-.75rem -.3rem}
.page-pricing .notice .link{display:inline-block;padding:.6rem 0;margin:-.6rem 0}
/* without JavaScript the stream has no height (scanner.js never adds .scan), so its note "Drag the cards…" hides too */
.scanband__run:not(.scan)+.scanband__note{display:none}