/* sync.photos — a photographer's light table.
   Dark room (#0B0D14), white paper sheets with crop marks, film-strip frames numbered
   01–04, mono captions that read like photo metadata, masonry mosaics.
   Bricolage Grotesque for headlines, Inter for body text, JetBrains Mono for labels.
   The CSP forbids style attributes, so every visual is a class here; site.js only
   toggles attributes. */

@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-var-latin.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter var";src:url(fonts/inter-var-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-var-latin.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0B0D14;--ink-2:#10131B;--ink-3:#11141C;--ink-4:#161A24;--screen:#0E1118;
  --paper:#F6F8FA;--paper-white:#FFFFFF;--paper-text:#0B0D14;--paper-body:#3A4150;--paper-muted:#4A5263;--paper-dim:#5A6170;
  --text:#F6F8FA;--soft:#C9CED8;--muted:#A3ABBA;--dim:#8B93A6;--faint:#7D8597;
  --blue:#0A84FF;--cyan:#00E5FF;--button:#0071E3;--link:#4DA3FF;--link-hover:#8CC4FF;--paper-link:#0066CC;--warn:#FFB340;
  --line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.08);--paper-line:rgba(11,13,20,.12);
  --mark:rgba(246,248,250,.34);
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Inter var",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(1rem,4vw,2.5rem);
  --ease:cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 1.0625rem/1.55 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:.22em}
img,svg{display:block;max-width:100%}
p,h1,h2,h3,h4,figure,dl,dd,ol,ul{margin:0}
ul,ol{padding:0;list-style:none}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
::selection{background:rgba(10,132,255,.4)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.75rem 1rem;border-radius:999px;background:var(--text);color:var(--ink);font-weight:600}
.skip-link:focus{top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.icon{width:1em;height:1em;flex-shrink:0;stroke-width:2}
.dot{color:var(--blue)}
.wrap{max-width:75rem;margin:0 auto}
.wrap-wide{max-width:80rem;margin:0 auto}

/* ---------- navigation: floating dark capsule ---------- */
.nav-dock{position:sticky;top:16px;z-index:40;margin-top:16px;padding:0 16px;display:flex;justify-content:center;pointer-events:none}
.nav-shell{position:relative;width:100%;max-width:760px;pointer-events:auto}
.nav-capsule{height:56px;padding:0 8px 0 20px;border-radius:999px;background:rgba(11,13,20,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(0,0,0,.7);display:flex;align-items:center;gap:12px}
.brand{flex-shrink:0;margin-right:auto;display:flex;gap:10px;align-items:center;color:var(--text);font:700 19px/1 var(--display);letter-spacing:-.02em}
.brand:hover{color:var(--text);text-decoration:none}
.brand-dot{color:var(--blue)}
.loop-mark{width:28px;height:14px}
.nav-links{display:none;align-items:center;gap:2px;white-space:nowrap}
.nav-link{padding:8px 12px;border-radius:999px;color:#B4BBC8;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.nav-link:hover{color:var(--text);text-decoration:none;background:rgba(255,255,255,.06)}
.nav-link[aria-current="page"]{background:rgba(255,255,255,.08);color:var(--text)}
.nav-cta{margin-left:8px;min-height:40px;padding:0 18px;border-radius:999px;background:var(--button);color:#fff;font-size:14px;font-weight:600;display:inline-flex;align-items:center}
.nav-cta:hover{color:#fff;text-decoration:none;background:#0A7CF0}
.menu-toggle{flex-shrink:0;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:transparent;color:var(--text);display:inline-flex;gap:8px;align-items:center;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.menu-toggle .icon{font-size:14px}
.site-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;flex-direction:column;padding:8px;border-radius:24px;background:var(--ink);border:1px solid var(--line);box-shadow:0 24px 48px -16px rgba(0,0,0,.75)}
.site-menu[hidden]{display:none}
.site-menu a{padding:14px 16px;border-bottom:1px solid var(--line-soft);color:var(--text);font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.site-menu a[aria-current="page"]{color:var(--link)}
.site-menu a.site-menu-cta{margin-top:8px;min-height:48px;border:0;border-radius:999px;background:var(--button);color:#fff;font:600 16px/1 var(--body);letter-spacing:0;text-transform:none;display:flex;align-items:center;justify-content:center}
@media (min-width:640px){.nav-links{display:flex}.menu-toggle,.site-menu{display:none}.site-menu[hidden]{display:none}}

/* ---------- type ---------- */
.eyebrow{display:flex;gap:10px;align-items:center;color:var(--muted);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:999px;background:var(--cyan)}
.eyebrow.is-draft::before{background:var(--warn)}
.mono{font-family:var(--mono);font-size:.75rem;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.mono-xs{font-family:var(--mono);font-size:.6875rem;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}
.no{color:var(--blue)}
.display-hero,.display-page,.display-xl,.display-l,.display-m,.display-s{font-family:var(--display);font-optical-sizing:auto;letter-spacing:calc(.09rem - .055em)}
.display-hero{font-size:clamp(3.25rem,9vw,8.5rem);line-height:.92;font-weight:800}
.display-page{font-size:clamp(3.25rem,8.4vw,7.5rem);line-height:.92;font-weight:800}
.display-xl{font-size:clamp(3rem,8vw,7rem);line-height:.95;font-weight:800}
.display-l{font-size:clamp(2.25rem,4.4vw,3.75rem);line-height:1.02;font-weight:700}
.display-m{font-size:clamp(1.875rem,3vw,2.5rem);line-height:1.05;font-weight:700}
.display-s{font-size:1.875rem;line-height:1.1;font-weight:700}
.title{font:600 1.375rem/1.2 var(--display);letter-spacing:-.01em}
.title-l{font:600 1.5rem/1.15 var(--display);letter-spacing:-.012em}
.lede{max-width:40rem;color:var(--muted);font-size:clamp(1.0625rem,1.3vw,1.1875rem)}
.muted{color:var(--muted)}
.soft{color:var(--soft)}
.small{font-size:.9375rem}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.25rem}.mt-3{margin-top:2rem}.mt-4{margin-top:clamp(2.5rem,5vw,3.5rem)}.mt-5{margin-top:clamp(3rem,6vw,4.5rem)}

/* ---------- layout ---------- */
.section{padding:clamp(4rem,8vw,7rem) var(--gutter)}
.section-tight{padding:0 var(--gutter) clamp(4rem,8vw,7rem)}
.hero{padding:clamp(3.5rem,8vw,6.5rem) var(--gutter) clamp(3.5rem,7vw,6rem)}
.hero-short{padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero-split{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:2rem 4rem;align-items:flex-end}
.hero-split>.hero-title{flex:999 1 32rem;min-width:0}
.hero-split>.hero-aside{flex:1 1 18rem;min-width:0;padding-bottom:.5rem}
.hero-tagline{font:600 clamp(1.5rem,2.2vw,1.875rem)/1.12 var(--display);letter-spacing:-.015em}
.actions{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
.split{display:flex;flex-wrap:wrap;gap:2.5rem 4rem;align-items:flex-start}
.split>*{flex:1 1 20rem;min-width:0}
.split>.split-wide{flex:1.4 1 26rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2rem}
.col{padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14)}
.col h3{color:var(--text);font:600 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.col h3.title{font:600 1.375rem/1.2 var(--display);letter-spacing:-.01em;text-transform:none}
.col p{margin-top:.625rem;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.25rem}
.cards-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.cards-narrow{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.center{display:flex;flex-direction:column;align-items:center;text-align:center}
.v-line{width:2px;height:clamp(3rem,6vw,4.5rem);margin:0 auto 2.5rem;border-radius:1px;background:linear-gradient(var(--blue),var(--cyan))}
.v-line-hero{height:clamp(3rem,7vw,5.5rem);margin-bottom:clamp(2.5rem,5vw,4rem)}
.border-top{border-top:1px solid var(--line-soft)}

.section-label{display:flex;align-items:center;gap:1rem;color:var(--dim);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.section-label::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.section-label+h2{margin-top:1.5rem;max-width:50rem}
h2+.lede,.display-l+.lede{margin-top:1.25rem}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3rem;padding:0 1.5rem;border-radius:999px;font:600 1rem/1.2 var(--body);text-align:center}
.btn:hover{text-decoration:none}
.btn-lg{min-height:3.25rem}
.btn-primary{background:var(--button);color:#fff}
.btn-primary:hover{color:#fff;background:#0A7CF0}
.btn-dark{background:var(--ink-4);border:1px solid rgba(255,255,255,.14);color:var(--text)}
.btn-dark:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.store-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.arrow-link{display:inline-flex;gap:6px;align-items:center;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.arrow-link .icon{font-size:14px}
@media (prefers-reduced-motion:no-preference){
  [data-lift]{transition:transform 220ms var(--ease)}
  [data-lift]:hover{transform:translateY(-4px)}
  [data-lift]:active{transform:translateY(-1px) scale(.985)}
}

/* ---------- crop marks: four registration corners just outside a box ---------- */
.crop{position:relative;--crop-out:18px;--crop-len:12px;--crop-at:11px}
.crop::before{content:"";position:absolute;inset:calc(var(--crop-out) * -1);pointer-events:none;background:
  linear-gradient(var(--mark),var(--mark)) var(--crop-at) 0/1px var(--crop-len) no-repeat,
  linear-gradient(var(--mark),var(--mark)) 0 var(--crop-at)/var(--crop-len) 1px no-repeat,
  linear-gradient(var(--mark),var(--mark)) right var(--crop-at) top 0/1px var(--crop-len) no-repeat,
  linear-gradient(var(--mark),var(--mark)) right 0 top var(--crop-at)/var(--crop-len) 1px no-repeat,
  linear-gradient(var(--mark),var(--mark)) var(--crop-at) 100%/1px var(--crop-len) no-repeat,
  linear-gradient(var(--mark),var(--mark)) 0 calc(100% - var(--crop-at))/var(--crop-len) 1px no-repeat,
  linear-gradient(var(--mark),var(--mark)) right var(--crop-at) bottom 0/1px var(--crop-len) no-repeat,
  linear-gradient(var(--mark),var(--mark)) right 0 bottom var(--crop-at)/var(--crop-len) 1px no-repeat}
/* Phones: smaller marks that still sit inside the 16px page gutter. */
@media (max-width:600px){.crop{--crop-out:13px;--crop-len:8px;--crop-at:7px}}

/* ---------- paper sheets ---------- */
.sheet-gutter{padding:0 clamp(1rem,2.5vw,2rem)}
.paper{max-width:80rem;margin:0 auto;border-radius:1.75rem;background:var(--paper);color:var(--paper-text);padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,4vw,4rem)}
.paper a{color:var(--paper-link)}
.paper .lede{color:var(--paper-muted)}
.paper .section-label{color:var(--paper-dim)}
.paper .section-label::after{background:rgba(11,13,20,.14)}
.paper .no{color:var(--paper-link)}
.paper-note{margin-top:1.5rem;max-width:46rem;color:var(--paper-muted);font-size:.9375rem}
.light-table{border-radius:1.75rem;color:var(--paper-text);background-color:var(--paper);background-image:linear-gradient(rgba(11,13,20,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,13,20,.045) 1px,transparent 1px);background-size:2rem 2rem;background-position:-1px -1px;padding:clamp(1.25rem,3vw,2.5rem)}
.card-paper{border-radius:1.25rem;background:var(--paper-white);border:1px solid rgba(11,13,20,.1);padding:clamp(1.5rem,3vw,2.25rem);color:var(--paper-text)}
.card-paper p{color:var(--paper-muted)}
.card-paper .card-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--paper-dim)}
.card-paper .card-head .icon{font-size:30px;color:var(--paper-link);stroke-width:1.6}
.card-paper .card-head .icon.icon-s{font-size:22px}
.card-paper h3{margin-top:1.25rem}
.card-paper h3.title{margin-top:1rem}
.card-paper h3+p{margin-top:.75rem}
.card-paper h3.title+p{margin-top:.5rem;font-size:1rem}
.status{display:inline-flex;gap:8px;align-items:center;font:600 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.status::before{content:"";width:8px;height:8px;border-radius:999px}
.status-on{color:#00707D}.status-on::before{background:#00A0B0}
.status-off{color:var(--paper-dim)}.status-off::before{border:1.5px solid var(--paper-dim)}
.squares{margin-top:1rem;display:flex;flex-direction:column;gap:.625rem;color:var(--paper-body)}
.squares li{display:flex;gap:10px;align-items:baseline}
.squares li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:1px;background:var(--paper-text);transform:translateY(-2px)}
.squares-dark{color:var(--muted)}
.squares-dark li{gap:12px}
.squares-dark li::before{background:var(--blue)}

/* ---------- dark cards ---------- */
.card-dark{border-radius:1.25rem;background:var(--ink-3);border:1px solid rgba(255,255,255,.1);padding:clamp(1.25rem,2.5vw,2rem)}
.card-dark p{color:var(--muted)}
.card-dark .icon-lg{font-size:28px;color:var(--blue);stroke-width:1.6}
.card-dark h3.title{margin-top:1rem}
.card-dark h3+p{margin-top:.5rem;font-size:1rem}
.card-dark .display-m+p{margin-top:.75rem}
.card-dark .mono{color:var(--dim)}
.card-dark .mono+.display-m{margin-top:.75rem}
.kv{margin-top:1.5rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.kv>div{display:flex;gap:1rem;padding:.625rem 0;border-top:1px solid var(--line-soft)}
.kv>div:last-child{border-bottom:1px solid var(--line-soft)}
.kv dt{flex:0 0 9rem;color:var(--soft)}
.kv dd{color:var(--dim)}
.bento{display:flex;flex-wrap:wrap;gap:1rem}
.bento-main{flex:2 1 34rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.bento-row{display:flex;flex-wrap:wrap;gap:1rem}
.bento-row>*{flex:1 1 16rem;min-width:0}
.bento-side{flex:1 1 20rem;min-width:0;display:flex;flex-direction:column}
.bento-full{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-start}
.bento-full>*{flex:1 1 22rem;min-width:0}
.mini-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1.25rem}
.mini-cols ul{margin-top:.625rem;display:flex;flex-direction:column;gap:.375rem;color:var(--soft);font-size:.9375rem}
.mono.is-cyan,.card-dark .mono.is-cyan{color:var(--cyan)}
.strip-demo{margin-top:1.25rem;display:flex;gap:.375rem}
.strip-demo span{flex:1 1 0;height:3rem;border-radius:.25rem}
.strip-demo .never{flex:1.8 1 0;border:1px dashed rgba(246,248,250,.36);display:flex;align-items:center;justify-content:center;color:var(--muted);font:500 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.server-diagram{width:100%;max-width:22rem;margin:auto auto 0;padding-top:2rem}
.limit{display:flex;gap:1.25rem;align-items:flex-start}
.limit .icon{font-size:28px;color:var(--blue);stroke-width:1.6}
.limit h3+p{margin-top:.5rem;font-size:1rem}
.stack{display:flex;flex-direction:column;gap:1rem}

/* ---------- photo tones and sizes ---------- */
.t1{background:#1F3A5C}.t2{background:#3A3328}.t3{background:#23382F}.t4{background:#33283A}
.t5{background:#2C3644}.t6{background:#3B2F2A}.t7{background:#1E2E3D}.t8{background:#2A3040}
.h-35{height:3.5rem}.h-40{height:4rem}.h-45{height:4.5rem}.h-50{height:5rem}.h-55{height:5.5rem}.h-60{height:6rem}.h-65{height:6.5rem}
.h-70{height:7rem}.h-75{height:7.5rem}.h-80{height:8rem}.h-85{height:8.5rem}.h-90{height:9rem}.h-95{height:9.5rem}
.h-100{height:10rem}.h-120{height:12rem}
.masonry{column-width:6.75rem;column-gap:.5rem}
.tile{position:relative;break-inside:avoid;margin:0 0 .5rem;border-radius:.5rem}
.tile-stamp{position:absolute;left:.45rem;bottom:.4rem;color:rgba(246,248,250,.8);font:500 .6875rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.masonry-library{column-width:7.5rem}
.masonry-library .tile{border-radius:.375rem}
.masonry-strip{column-count:3;column-width:auto;column-gap:6px}
.masonry-strip .tile{margin-bottom:6px;border-radius:5px}
.wall{flex:1.3 1 26rem;min-width:0;column-width:10.5rem;column-gap:1rem}
.wall-item{break-inside:avoid;margin:0 0 1.25rem}
.wall-photo{border-radius:.375rem}
.wall-caption{margin-top:.5rem;color:var(--dim);font:500 .6875rem/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ---------- home: light table with a device switcher ---------- */
.table-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.table-head .mono{color:var(--paper-dim)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#E3E8EF;border:1px solid rgba(11,13,20,.08)}
.seg button{min-height:2.5rem;padding:0 1rem;border:0;border-radius:999px;background:transparent;color:var(--paper-body);display:inline-flex;gap:8px;align-items:center;cursor:pointer;font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.seg button .icon{font-size:16px;stroke-width:1.8}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--text)}
.table-body{margin-top:clamp(1.5rem,3vw,2rem);display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:center}
.table-stage{flex:999 1 26rem;min-width:0;display:flex;justify-content:center;padding:1rem 0}
.table-copy{flex:1 1 15rem;min-width:0;max-width:26rem}
.table-copy p{margin-top:1rem;color:var(--paper-body)}
.table-copy strong{color:var(--paper-text)}
.table-copy .table-note{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--paper-line);color:var(--paper-dim);font-size:.9375rem}
.device{width:100%;max-width:19rem;display:flex;flex-direction:column;align-items:center}
.device-body{position:relative;width:100%;padding:.625rem;border-radius:3rem;background:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 44px 64px -32px rgba(11,13,20,.55),0 12px 24px -14px rgba(11,13,20,.4)}
.device-screen{position:relative;height:35rem;padding:3rem .75rem 0;border-radius:2.45rem;background:var(--screen);overflow:hidden;display:flex;flex-direction:column}
.device-camera{position:absolute;top:.7rem;left:50%;transform:translateX(-50%);width:5.75rem;height:1.65rem;border-radius:999px;background:#000}
.device-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:.625rem;font:500 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.device-bar .label{color:var(--soft)}
.device-bar .state{display:inline-flex;gap:6px;align-items:center;color:var(--dim)}
.device-bar .state::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--cyan)}
.device-tiles{flex:1 1 auto;min-height:0;overflow:hidden}
.device-base{display:none;position:relative;width:calc(100% + 2rem);height:.875rem;border-radius:.125rem .125rem 1rem 1rem;background:#1C2130}
.device-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:5rem;height:.3rem;border-radius:0 0 .4rem .4rem;background:var(--ink)}
.device figcaption{margin-top:1.25rem;color:var(--paper-dim);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.device[data-device="android"] .device-body{padding:.5rem;border-radius:2.25rem}
.device[data-device="android"] .device-screen{padding-top:2.5rem;border-radius:1.75rem}
.device[data-device="android"] .device-camera{top:.9rem;width:.8rem;height:.8rem}
.device[data-device="mac"]{max-width:46rem}
.device[data-device="mac"] .device-body{padding:.625rem .625rem .875rem;border-radius:1.25rem 1.25rem .375rem .375rem}
.device[data-device="mac"] .device-screen{height:clamp(13rem,52vw,24rem);padding-top:1.75rem;border-radius:.5rem}
.device[data-device="mac"] .device-camera{top:0;width:4.5rem;height:.9rem;border-radius:0 0 .5rem .5rem}
.device[data-device="mac"] .device-base{display:block}
@media (prefers-reduced-motion:no-preference){
  .device,.device-body,.device-screen{transition:max-width 320ms var(--ease),border-radius 320ms var(--ease),height 320ms var(--ease),padding 320ms var(--ease)}
}

/* ---------- home: the loop ---------- */
.loop{position:relative;max-width:56rem;margin:clamp(3rem,6vw,4.5rem) auto 0;aspect-ratio:2/1}
.loop-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop-tag,.loop-node{position:absolute;transform:translate(-50%,-50%)}
.loop-tag{top:15%;padding:2px 8px;background:var(--ink);color:var(--dim);white-space:nowrap;font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.loop-tag-a{left:30%}.loop-tag-b{left:73.3%}
.loop-node{top:50%}
.node-iphone{left:7.5%}.node-android{left:50%}.node-mac{left:92.5%}
.node-ring{display:flex;width:clamp(3rem,6vw,4.75rem);height:clamp(3rem,6vw,4.75rem);align-items:center;justify-content:center;border-radius:999px;background:var(--ink);border:1px solid rgba(10,132,255,.7);box-shadow:0 0 0 6px var(--ink);color:var(--text)}
.node-mac .node-ring{border-color:rgba(0,229,255,.7)}
.node-ring .icon{font-size:26px;stroke-width:1.6}
.node-label{position:absolute;top:calc(100% + .75rem);left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--text);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ---------- film strip frames ---------- */
.frames{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr));row-gap:2.5rem}
.frame{display:flex;flex-direction:column;min-width:0}
.film{background:var(--ink);padding:.875rem .625rem}
.film::before,.film::after{content:"";display:block;height:.5rem;background-image:repeating-linear-gradient(90deg,#262C3A 0 .75rem,transparent .75rem 1.5rem)}
.film-alt{border-radius:.25rem;background:var(--ink-4);padding:.875rem .75rem}
.film-alt::before,.film-alt::after{background-image:repeating-linear-gradient(90deg,var(--ink) 0 .75rem,transparent .75rem 1.5rem)}
.film-shot{position:relative;margin:.75rem 0;height:12rem;border-radius:.375rem;display:flex;align-items:center;justify-content:center;gap:.875rem;padding:0 .875rem}
.film-shot-lg{height:clamp(15rem,24vw,19rem);gap:1.25rem;padding:0 1rem}
.film-caption{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.75rem;color:var(--soft);font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.film-caption .no{color:var(--cyan)}
.film-caption .ref{color:var(--faint)}
.frame-text{padding:1.5rem 1.5rem 0 .625rem}
.frame-text p{margin-top:.5rem;font-size:1rem;color:var(--paper-muted)}
.qr-card{position:relative;padding:.75rem;border-radius:.625rem;background:var(--paper)}
.qr-card .qr{width:84px;height:84px;fill:var(--ink)}
.film-shot-lg .qr-card{padding:1rem;border-radius:.75rem}
.film-shot-lg .qr-card .qr{width:120px;height:120px}
.scan-corner{position:absolute;width:14px;height:14px;border:0 solid var(--cyan)}
.film-shot-lg .scan-corner{width:18px;height:18px}
.sc-tl{top:-8px;left:-8px;border-top-width:2px;border-left-width:2px;border-radius:3px 0 0 0}
.sc-tr{top:-8px;right:-8px;border-top-width:2px;border-right-width:2px;border-radius:0 3px 0 0}
.sc-bl{bottom:-8px;left:-8px;border-bottom-width:2px;border-left-width:2px;border-radius:0 0 0 3px}
.sc-br{bottom:-8px;right:-8px;border-bottom-width:2px;border-right-width:2px;border-radius:0 0 3px 0}
.film-shot-lg .sc-tl,.film-shot-lg .sc-tr{top:-10px}.film-shot-lg .sc-bl,.film-shot-lg .sc-br{bottom:-10px}
.film-shot-lg .sc-tl,.film-shot-lg .sc-bl{left:-10px}.film-shot-lg .sc-tr,.film-shot-lg .sc-br{right:-10px}
.code-phone{width:4.75rem;height:8rem;border-radius:.875rem;background:var(--ink);border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;color:var(--text);font:600 1.0625rem/1 var(--mono);letter-spacing:.1em}
.film-shot-lg .code-phone{width:6rem;height:10.5rem;border-radius:1.125rem;gap:.375rem;font-size:1.375rem}
.code-equals{color:var(--cyan);font:600 1.25rem/1 var(--mono)}
.mini-card{width:100%;max-width:13.5rem;padding:.875rem;border-radius:.75rem;background:var(--ink);color:var(--text)}
.film-shot-lg .mini-card{max-width:17rem;padding:1.125rem;border-radius:.875rem}
.mini-label{display:block;color:var(--dim);font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mini-value{display:block;margin-top:.125rem;font:600 1.125rem/1.3 var(--display);letter-spacing:-.01em}
.film-shot-lg .mini-value{font-size:1.5rem;line-height:1.2}
.mini-row{display:flex;gap:.5rem;align-items:center;margin-top:.375rem;font-size:.8125rem;color:var(--soft)}
.mini-row:first-of-type{margin-top:.625rem;padding-top:.625rem;border-top:1px solid rgba(255,255,255,.1)}
.film-shot-lg .mini-row{font-size:.875rem;margin-top:.5rem}
.film-shot-lg .mini-row:first-of-type{margin-top:.875rem;padding-top:.875rem}
.mini-row .icon{font-size:14px;color:var(--cyan);stroke-width:2.4}
.mini-row .icon.is-warn{color:var(--warn);stroke-width:2}
.mini-progress{position:relative;display:block;margin-top:.875rem;height:6px;border-radius:3px;background:#2A3040}
.mini-progress .fill{position:absolute;left:0;top:0;bottom:0;width:68%;border-radius:3px;background:var(--blue)}
.mini-progress .drop{position:absolute;left:41%;top:-5px;width:2px;height:16px;border-radius:1px;background:var(--cyan)}
.mini-ends{display:flex;justify-content:space-between;margin-top:.5rem;color:var(--dim);font:500 .6875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mini-text{display:block;margin-top:.875rem;font-size:.8125rem;line-height:1.4;color:var(--soft)}
.film-shot-lg .mini-text{padding-top:.875rem;border-top:1px solid rgba(255,255,255,.1);font-size:.875rem;line-height:1.45}

/* ---------- home: what comes along ---------- */
.along{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:stretch}
.photo-figure{flex:1 1 19rem;min-width:0;display:flex;flex-direction:column}
.photo-block{position:relative;flex:1 1 auto;min-height:clamp(18rem,30vw,26rem);border-radius:.375rem;background:#3A3328;overflow:hidden}
.photo-ground{position:absolute;left:0;right:0;bottom:0;height:34%;background:#2E281F}
.photo-sun{position:absolute;right:18%;top:22%;width:18%;aspect-ratio:1/1;border-radius:999px;background:#4A3F30}
.live-badge{position:absolute;top:.875rem;left:.875rem;display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(11,13,20,.6);color:var(--text);font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.live-badge .icon{font-size:14px;stroke-width:1.8}
.photo-figure figcaption{margin-top:.875rem;color:var(--dim);font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.info-panel{flex:1.6 1 28rem;min-width:0;border-radius:1.25rem;background:var(--ink-2);border:1px solid var(--line);padding:clamp(1.25rem,3vw,2rem)}
.info-top{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;color:var(--dim);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.info-top .is-cyan{color:var(--cyan)}
.info-list{margin-top:1rem}
.info-list>div{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;padding:1rem 0;border-top:1px solid var(--line-soft)}
.info-list dt{flex:0 0 11.5rem;display:flex;gap:8px;align-items:center;color:var(--text);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.info-list dt .icon{font-size:14px;color:var(--cyan);stroke-width:2.4}
.info-list dd{flex:1 1 16rem;color:var(--soft)}
.info-foot{margin-top:.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14)}
.info-foot>.mono{color:var(--dim)}
.chips{margin-top:.875rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.375rem .875rem;border-radius:999px;border:1px dashed rgba(246,248,250,.3);color:var(--soft);font-size:.9375rem}
.info-foot .note{margin-top:.875rem;color:var(--muted);font-size:.9375rem}

/* ---------- home: nothing is deleted ---------- */
.keep-grid{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.5rem}
.slot{position:relative;height:10rem;border-radius:.375rem}
.slot-empty{border:1px dashed rgba(246,248,250,.32);display:flex;align-items:center;justify-content:center;color:var(--dim);font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.slot-stamp{position:absolute;left:.625rem;bottom:.5rem;color:rgba(246,248,250,.8);font:500 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.slot-caption{margin-top:.75rem;display:flex;gap:8px;align-items:center;color:var(--dim);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.slot-caption strong{color:var(--text);font-weight:500}
.slot-caption .icon{font-size:14px;color:var(--cyan);stroke-width:2.4}

/* ---------- home: Mac menu bar ---------- */
.mac-window{flex:1.2 1 24rem;min-width:0;border-radius:1rem;background:var(--ink);color:var(--text);overflow:hidden;box-shadow:0 32px 56px -28px rgba(11,13,20,.5)}
.mac-bar{height:2rem;padding:0 .875rem;display:flex;align-items:center;justify-content:flex-end;gap:.875rem;background:var(--ink-4);border-bottom:1px solid var(--line-soft)}
.mac-bar .glyph-a{width:.875rem;height:.5rem;border-radius:2px;background:rgba(246,248,250,.22)}
.mac-bar .glyph-b{width:.625rem;height:.625rem;border-radius:999px;background:rgba(246,248,250,.22)}
.mac-bar .glyph-app{display:inline-flex;padding:3px 6px;border-radius:5px;background:rgba(10,132,255,.24)}
.mac-bar .glyph-app svg{width:22px;height:11px}
.mac-bar .clock{color:var(--soft);font:500 .6875rem/1 var(--mono)}
.mac-pad{padding:1rem 1rem 1.25rem;display:flex;justify-content:flex-end}
.mac-pop{width:100%;max-width:19rem;border-radius:.75rem;background:var(--ink-4);border:1px solid rgba(255,255,255,.1);padding:.875rem}
.mac-pop-head{display:flex;justify-content:space-between;color:var(--dim);font:500 .6875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mac-pop-head .ready{display:inline-flex;gap:6px;align-items:center;color:var(--cyan)}
.mac-pop-head .ready::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--cyan)}
.mac-row{padding:.625rem 0;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;font-size:.875rem}
.mac-row:first-of-type{margin-top:.75rem}
.mac-row strong{font-weight:500}
.mac-row span{color:var(--muted);font-size:.8125rem}
.mac-row .mac-progress{flex:1 1 100%;position:relative;height:4px;border-radius:2px;background:#2A3040}
.mac-row .mac-progress::after{content:"";position:absolute;left:0;top:0;bottom:0;width:46%;border-radius:2px;background:var(--blue)}
.mac-foot{padding-top:.625rem;border-top:1px solid var(--line-soft);color:var(--dim);font:500 .6875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* ---------- CTA and requirements ---------- */
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:3rem 4rem;align-items:flex-start}
.cta-copy{flex:1 1 24rem;min-width:0}
.requirements{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.requirements div{display:flex;gap:8px;align-items:center}
.requirements dt{color:var(--dim)}
.requirements dd{color:var(--text)}

/* ---------- how it works ---------- */
.step-index{margin-top:1.5rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.step-index li{border-top:1px solid var(--line)}
.step-index li:last-child{border-bottom:1px solid var(--line)}
.step-index a{display:flex;gap:1rem;padding:.75rem 0;color:var(--text)}
.step-index a:hover{color:var(--link-hover)}
.step-index .no{color:var(--blue)}
.step{display:flex;flex-wrap:wrap;gap:2.5rem 4rem;align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid rgba(255,255,255,.1)}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.step-visual{flex:1 1 24rem;min-width:0}
.step-text{flex:1.15 1 24rem;min-width:0}
.step-text .mono{color:var(--dim)}
.step-text h2{margin-top:1rem;font:700 clamp(2rem,3.6vw,3rem)/1.04 var(--display);letter-spacing:calc(.09rem - .055em)}
.step-text .step-lede{margin-top:1rem;max-width:34rem;color:var(--soft);font-size:clamp(1.0625rem,1.3vw,1.1875rem)}
.step-text .squares{margin-top:1.5rem}
.table-scroll{position:relative;margin-top:clamp(2rem,4vw,3rem);overflow-x:auto;border-radius:1.25rem;background:var(--ink-2);border:1px solid var(--line)}
.sync-table{width:100%;min-width:720px;border-collapse:collapse;text-align:left;font-size:1rem;line-height:1.45}
.sync-table th{padding:1.375rem 1.5rem 1rem;vertical-align:bottom;color:var(--text);font:600 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sync-table th span{display:inline-flex;gap:8px;align-items:center}
.sync-table th span::before{content:"";width:8px;height:8px;border-radius:999px}
.sync-table .key-all::before{background:var(--cyan)}
.sync-table .key-ios::before{background:var(--blue)}
.sync-table .key-local::before{border:1px dashed var(--muted)}
.sync-table tr+tr,.sync-table tbody tr{border-top:1px solid var(--line-soft)}
.sync-table td{padding:1rem 1.5rem;color:var(--text);vertical-align:top}
.sync-table td.is-local{color:var(--muted)}
.sync-table tbody tr:last-child td{padding-bottom:1.375rem}

/* ---------- privacy ---------- */
.panels{margin-top:clamp(3rem,6vw,4.5rem);display:flex;flex-wrap:wrap;gap:1rem}
.panel{position:relative;flex:1 1 22rem;min-width:0;border-radius:1.25rem;background:var(--ink-3);border:1px solid rgba(255,255,255,.1);padding:clamp(1rem,2.5vw,1.5rem);display:flex;flex-direction:column}
.panel-server{background:var(--ink)}
.panel-head{display:flex;justify-content:space-between;gap:1rem;color:var(--text);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.panel-head .is-cyan{display:inline-flex;gap:6px;align-items:center;color:var(--cyan)}
.panel-head .is-cyan::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--cyan)}
.panel-head .is-dim{color:var(--dim)}
.panel-body{margin-top:1rem;height:15rem;overflow:hidden}
.panel-empty{margin-top:1rem;height:15rem;border-radius:.5rem;border:1px dashed rgba(246,248,250,.22);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center;color:var(--soft);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.panel p{margin-top:1rem;color:var(--muted);font-size:.9375rem}
.panel .inline-kv{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.inline-kv div{display:flex;gap:8px}
.inline-kv dt{color:var(--dim)}
.inline-kv dd{color:var(--text)}

/* ---------- download ---------- */
.platforms{margin-top:clamp(3rem,6vw,4.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1rem}
.platform{border-radius:1.25rem;background:var(--ink-3);border:1px solid rgba(255,255,255,.1);overflow:hidden;display:flex;flex-direction:column}
.platform-strip{background:var(--ink);padding:.75rem .75rem .625rem}
.platform-strip::before,.platform-strip::after{content:"";display:block;height:.4375rem;background-image:repeating-linear-gradient(90deg,#1C2130 0 .625rem,transparent .625rem 1.25rem)}
.platform-shots{margin:.625rem 0;display:flex;gap:.5rem;align-items:flex-end;height:5.5rem}
.platform-shots span{flex:1 1 0;border-radius:.25rem}
.ps-a{height:100%}.ps-b{height:78%;flex-grow:1.3!important}.ps-c{height:90%;flex-grow:.8!important}
.ps-d{height:86%;flex-grow:1.2!important}.ps-e{height:72%}.ps-f{height:80%;flex-grow:.8!important}.ps-g{height:88%}.ps-h{height:100%;flex-grow:1.4!important}
.platform-body{flex:1 1 auto;padding:clamp(1.25rem,2.5vw,1.75rem);display:flex;flex-direction:column}
.platform-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--dim)}
.platform-head .icon{font-size:28px;color:var(--text);stroke-width:1.5}
.platform h2{margin-top:1rem;font:700 2.25rem/1.05 var(--display);letter-spacing:calc(.09rem - .055em)}
.platform-req{margin-top:.75rem;display:flex;gap:.75rem;padding:.625rem 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.platform-req span:first-child{color:var(--dim)}
.platform .squares{margin:1rem 0 1.75rem;gap:.5rem;font-size:1rem;color:var(--soft)}
.platform .squares li::before{background:var(--blue)}
.platform .btn{margin-top:auto;width:100%}
.link-row{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem}

/* ---------- FAQ accordion (details/summary) ---------- */
.faq-layout{display:flex;flex-wrap:wrap;gap:3rem 4rem;align-items:flex-start}
.faq-intro{flex:1 1 20rem;min-width:0}
.faq-intro h1{margin-top:1.5rem;font:800 clamp(2.75rem,4.6vw,4rem)/.96 var(--display);letter-spacing:calc(.09rem - .055em)}
.faq-intro .lede{margin-top:1.25rem}
.faq-help{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.faq-help .mono{color:var(--dim)}
.faq-help p+p{margin-top:.625rem;color:var(--soft)}
.faq-sheet{flex:2 1 34rem;min-width:0;border-radius:1.75rem;background:var(--paper);color:var(--paper-text);padding:clamp(.75rem,2vw,1.25rem)}
.faq-item{border-radius:1rem;padding:0 clamp(.75rem,2vw,1.25rem);border-top:1px solid rgba(11,13,20,.1)}
.faq-item:first-child,.faq-item[open],.faq-item[open]+.faq-item{border-top-color:transparent}
.faq-item[open]{background:var(--paper-white);box-shadow:0 1px 0 rgba(11,13,20,.04),0 12px 28px -18px rgba(11,13,20,.35)}
.faq-item summary{list-style:none;min-height:4.5rem;padding:1.125rem 0;display:flex;gap:1rem;align-items:center;cursor:pointer;color:var(--paper-text);font:600 1.1875rem/1.3 var(--display);letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-no{flex:0 0 2.75rem;color:var(--paper-link);font:500 .75rem/1 var(--mono);letter-spacing:.08em}
.faq-q{flex:1 1 auto;min-width:0}
.faq-sign{flex-shrink:0;width:2rem;height:2rem;border-radius:999px;border:1px solid rgba(11,13,20,.18);color:var(--paper-text);display:flex;align-items:center;justify-content:center}
.faq-sign .icon{font-size:14px;stroke-width:2.4}
.faq-minus{display:none!important}
.faq-item[open] .faq-sign{background:var(--ink);border-color:var(--ink);color:var(--text)}
.faq-item[open] .faq-plus{display:none!important}
.faq-item[open] .faq-minus{display:block!important}
.faq-a{padding:0 0 1.5rem clamp(0rem,6vw,3.75rem)}
.faq-a p{max-width:40rem;color:var(--paper-body)}
.faq-home{margin-top:clamp(2rem,4vw,3rem)}

/* ---------- legal documents (policy, terms) ---------- */
.doc-layout{display:flex;flex-wrap:wrap;gap:3rem 4rem;align-items:flex-start}
.toc{flex:1 1 15rem;min-width:0}
.toc ol{margin-top:1.25rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.toc li{border-top:1px solid rgba(255,255,255,.1)}
.toc li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.toc a{display:flex;gap:.875rem;padding:.625rem 0;color:var(--soft)}
.toc a:hover{color:var(--link-hover)}
.toc .no{color:var(--blue)}
.toc p.small{margin-top:1.5rem;color:var(--muted)}
.legal{flex:3 1 36rem;min-width:0;border-radius:1.75rem;background:var(--paper);color:#2A2F3A;padding:clamp(1.5rem,5vw,4rem);font-size:1.0625rem;line-height:1.65}
.legal a{color:var(--paper-link)}
.legal-inner{max-width:42rem}
.draft-note{padding:.875rem 1.125rem;border-radius:.875rem;background:#FBEFE2;border:1px solid rgba(196,106,0,.22);color:var(--paper-text);display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;line-height:1.5}
.draft-note .icon{font-size:20px;color:#B35F00;margin-top:1px}
.doc-kicker{margin-top:2rem;color:var(--paper-dim)}
.legal h1{margin-top:.75rem;color:var(--paper-text);font:800 clamp(2.5rem,5vw,3.75rem)/1 var(--display);letter-spacing:calc(.09rem - .055em)}
.doc-date{margin-top:.875rem;color:var(--paper-dim)}
.doc-intro{margin-top:2rem;font-size:1.1875rem;line-height:1.6;color:var(--paper-text)}
.legal-section{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--paper-line)}
.legal-head{display:flex;gap:1rem;align-items:baseline}
.legal-head .no{flex-shrink:0;color:var(--paper-link);font:500 .75rem/1 var(--mono);letter-spacing:.08em}
.legal-head h2{color:var(--paper-text);font:600 1.5rem/1.25 var(--display);letter-spacing:-.012em}
.legal-section p,.legal-section ul{margin-top:.75rem}
.legal-section ul{padding-left:1.375rem;list-style:disc;display:flex;flex-direction:column;gap:.625rem}
.legal-section strong{color:var(--paper-text)}

/* ---------- security ---------- */
.report-box{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-start}
.report-box>*{flex:1 1 20rem;min-width:0}
.report-box ol{counter-reset:report;display:flex;flex-direction:column;gap:.75rem}
.report-box ol li{counter-increment:report;display:flex;gap:1rem;color:var(--soft)}
.report-box ol li::before{content:counter(report,decimal-leading-zero);flex-shrink:0;color:var(--blue);font:500 .75rem/1.9 var(--mono);letter-spacing:.08em}

/* ---------- pair (phone deep-link page) ---------- */
.is-bare main{max-width:26rem;margin:0 auto;padding:1.75rem 20px 2.25rem;min-height:calc(100svh - 5rem);display:flex;flex-direction:column}
.bare-header{max-width:26rem;margin:0 auto;padding:max(1.5rem,env(safe-area-inset-top)) 20px 0;display:flex;justify-content:space-between;align-items:center}
.bare-header .brand{font-size:17px}
.bare-label{color:var(--dim);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pair-strip{position:relative}
.pair-strip .crop-frame{height:180px;overflow:hidden;border-radius:6px}
.pair-strip figcaption{margin-top:10px;display:flex;justify-content:space-between;gap:1rem;color:var(--dim);font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pair-strip .stays{display:inline-flex;gap:6px;align-items:center}
.pair-strip .stays::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--cyan)}
.pair-kicker{margin-top:32px;color:var(--dim)}
.pair-title{margin-top:12px;font:800 36px/1.05 var(--display);letter-spacing:-.6px}
.pair-lede{margin-top:12px;color:var(--muted);font-size:17px;line-height:1.45}
.pair-spacer{flex:1 1 auto;min-height:20px}
.pair-actions{display:flex;flex-direction:column;gap:12px}
.pair-actions .btn{min-height:52px;font-size:17px}
.pair-note{margin-top:16px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:var(--ink-3);display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--soft)}
.pair-note .icon{font-size:18px;color:var(--cyan);stroke-width:1.9;margin-top:1px}
.pair-close{margin-top:14px;text-align:center;color:var(--dim);font-size:13px;line-height:1.4}

/* ---------- 404 ---------- */
.lost{min-height:60vh}

/* ---------- footer ---------- */
.site-footer{padding:clamp(3.5rem,7vw,5.5rem) var(--gutter) 2rem;border-top:1px solid var(--line-soft)}
.footer-brand{display:inline-flex;gap:14px;align-items:center;color:var(--text);font:700 clamp(1.75rem,3vw,2.25rem)/1 var(--display);letter-spacing:-.02em}
.footer-brand:hover{color:var(--text);text-decoration:none}
.footer-loop{width:48px;height:24px}
.footer-nav{margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;color:var(--dim);font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.footer-nav a{color:var(--soft)}
.footer-nav a[aria-current="page"]{color:var(--text)}
.footer-copy{margin-left:auto}

@media (prefers-reduced-transparency:reduce){.nav-capsule{background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.nav-capsule,.card-dark,.panel,.platform{border-color:rgba(255,255,255,.4)}}

/* ---------- page-specific spacing ---------- */
.paper .mono{color:var(--paper-dim)}
.mac-section{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--paper-line)}
.mac-section .split{align-items:center}
.mac-copy{color:var(--paper-muted)}
.cta-title{font-size:clamp(2.5rem,5vw,4.25rem);line-height:1}
.actions-center{justify-content:center}
.narrow{max-width:34rem}
.spacer{height:clamp(4rem,8vw,6rem)}
.title-l+p{margin-top:.5rem}
/* Anchored sections clear the floating nav capsule. */
main [id]{scroll-margin-top:96px}
.paper .report-box ol li{color:var(--paper-body)}
.paper .report-box ol li::before{color:var(--paper-link)}

/* "What syncs": three real lists laid out like a table (rows are not records, so a <table>
   would make screen readers pair unrelated cells). Fixed item heights keep the rows level. */
.sync-cols-scroll{margin-top:clamp(2rem,4vw,3rem);overflow-x:auto;border-radius:1.25rem;background:var(--ink-2);border:1px solid var(--line)}
.sync-cols{min-width:720px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto)}
/* Each column spans the same five rows (heading + four items) through subgrid, so a row
   grows to its tallest item in any column and the rows stay level. */
.sync-col{display:grid;grid-row:1/span 5;grid-template-rows:subgrid}
.sync-col ul{display:contents}
.sync-col h3{padding:1.375rem 1.5rem 1rem;color:var(--text);font:600 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sync-col h3 span{display:inline-flex;gap:8px;align-items:center}
.sync-col h3 span::before{content:"";width:8px;height:8px;border-radius:999px}
.sync-col .key-all::before{background:var(--cyan)}
.sync-col .key-ios::before{background:var(--blue)}
.sync-col .key-local::before{border:1px dashed var(--muted)}
.sync-col li{padding:1rem 1.5rem;border-top:1px solid var(--line-soft);color:var(--text);font-size:1rem;line-height:1.45}
.sync-col li:last-child{padding-bottom:1.375rem}
.sync-col.is-local li{color:var(--muted)}
.platform .store-badge,.platform .store-badge-link{margin-top:auto;align-self:flex-start}
.store-badge{width:auto;height:48px}