/* Skellig website (formerly OneDocSpot; renamed in 0.95.0) (0.50 mockup B). Brand: OneDocSpot Brand Guide v2 (OneDocSpot + Bonjour Page "Solid Silver"). Sans-serif only, self-hosted (fonts.css). */
@import url(fonts.css);
:root{
  --black:#0A0A0B; --navy:#16151F; --navy-2:#2E2B48;
  --grey:#F2F3F5; --grey-2:#E8EAEE; --line:rgba(10,10,11,.08);
  --fg:#0A0A0B; --fg-2:#4B4D57; --fg-3:#7E818C;
  --coral:#E8532F; --coral-ink:#C2401C;
  --silver:linear-gradient(155deg,#f2f3f6,#dfe1e7 52%,#ccd0d8);
  --silver-panel:linear-gradient(180deg,#eceef1,#d5d8de 55%,#c3c7cf);
  --ios:#F2F2F7; --ios-line:#E5E5EA; --ios-grey:#8E8E93; --ios-orange:#E08600; --ios-red:#FF3B30; --ios-green:#34C759;
  --f-display:"Instrument Sans","Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-app:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1200px; --r:28px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--fg);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
img,svg{display:block}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.02em;line-height:1.04;text-wrap:balance;font-weight:600;font-stretch:96%}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--black);color:#fff;padding:10px 14px;border-radius:10px;z-index:50}
.skip:focus{left:12px}

/* buttons: pills, flat, no glow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,transform .3s var(--ease)}
.btn-primary{background:var(--black);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-light{background:var(--grey);color:var(--fg)}
.btn-light:hover{background:var(--grey-2)}
.btn-white{background:#fff;color:var(--black)}
.btn-white:hover{background:var(--grey)}
.btn-line{box-shadow:0 0 0 1.5px var(--black) inset;color:var(--black)}
.btn-line:hover{background:var(--black);color:#fff}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(46,43,72,.4);outline-offset:3px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;height:70px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 19px/1 var(--f-app);letter-spacing:-.02em;color:var(--black)}
.brand svg{width:32px;height:32px;border-radius:9px}
.brand .spot{color:var(--coral)}
.nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--fg-2);transition:color .2s}
.nav a:hover{color:var(--fg)}
.top .actions{display:flex;gap:6px;align-items:center}
.top .signin{font-size:15px;font-weight:500;text-decoration:none;color:var(--fg);padding:10px 14px;border-radius:999px}
.top .signin:hover{background:var(--grey)}
.top .btn{height:42px;padding:0 20px;font-size:14.5px}
@media (max-width:880px){.nav{display:none}.top .actions{margin-left:auto}}
@media (max-width:420px){.top .actions .btn{display:none}}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:48px 88px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 10px;border-radius:999px;background:var(--grey);font-size:14px;font-weight:500;color:var(--fg-2)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(232,83,47,.15)}
.hero h1{font-size:clamp(44px,5.6vw,76px);letter-spacing:-.028em;line-height:1.02;margin-top:24px}
.lede{margin-top:24px;font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--fg-2);max-width:31em}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px}
.fine{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--fg-2)}
.fine span{display:inline-flex;align-items:center;gap:7px}
.fine span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--black) no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3L9.6 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.panel{position:relative;border-radius:36px;background:var(--silver);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 50px 80px -50px rgba(10,10,11,.35);height:610px;display:flex;justify-content:center;align-items:flex-start;padding-top:78px;overflow:hidden}
.panel::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:overlay}
@media (max-width:1000px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:44px;padding-block:36px 64px}}

/* floating document icons on the silver panel */
.ico{position:absolute;z-index:2;width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 18px 30px -16px rgba(10,10,11,.35),0 1px 0 #fff inset;display:grid;place-items:center}
.ico svg{width:28px;height:28px}
.ico.a{left:7%;top:12%}.ico.b{left:4%;top:52%}.ico.c{right:6%;top:9%}.ico.d{right:5%;top:46%}.ico.e{left:12%;bottom:8%}
@media (prefers-reduced-motion:no-preference){.ico{animation:bob 8s ease-in-out infinite}.ico.b{animation-delay:-2s}.ico.c{animation-delay:-4s}.ico.d{animation-delay:-6s}.ico.e{animation-delay:-3s}}

/* iPhone frame */
.device{position:relative;z-index:3;--pw:300px}
.phone{position:relative;width:var(--pw);aspect-ratio:300/622;border-radius:54px;padding:11px;background:linear-gradient(145deg,#2A2A30,#0B0B0D 40%,#1B1B20);box-shadow:0 0 0 1.5px #3A3A42 inset,0 60px 80px -40px rgba(10,10,11,.55),0 30px 50px -30px rgba(10,10,11,.4);flex:none}
.phone::before{content:"";position:absolute;right:-3px;top:150px;width:3px;height:64px;border-radius:0 3px 3px 0;background:#2A2A30}
.screen{position:relative;height:100%;border-radius:44px;overflow:hidden;background:var(--ios);font-family:var(--f-app);color:#000}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:27px;border-radius:20px;background:#000;z-index:3}
.status{display:flex;justify-content:space-between;align-items:center;padding:15px 26px 0 30px;font:600 13.5px/1 var(--f-app);letter-spacing:-.01em;height:44px}
.status i{display:flex;gap:5px;align-items:center}
.status i::before{content:"";width:17px;height:10px;background:linear-gradient(90deg,#000 0 3px,transparent 3px 5px,#000 5px 8px,transparent 8px 10px,#000 10px 13px,transparent 13px 15px,#000 15px);clip-path:polygon(0 100%,100% 0,100% 100%);opacity:.9}
.status i::after{content:"";width:22px;height:11px;border-radius:3.5px;border:1.5px solid rgba(0,0,0,.4);background:linear-gradient(90deg,#000 0 70%,transparent 70%) content-box;padding:1px}
.ios-top{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 0}
.ios-btn{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ios-btn svg{width:16px;height:16px}
.ios-bar{display:flex;gap:2px;background:#fff;border-radius:999px;padding:0 6px;height:34px;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ios-bar svg{width:16px;height:16px;margin:0 7px}
.ios-h{font:700 27px/1.1 var(--f-app);letter-spacing:-.025em;padding:12px 16px 0}
.ios-search{margin:10px 14px 0;height:34px;border-radius:11px;background:rgba(118,118,128,.12);display:flex;align-items:center;gap:7px;padding:0 10px;color:var(--ios-grey);font-size:14px}
.ios-search svg{width:14px;height:14px}
.ios-sec{font:700 15px/1 var(--f-app);letter-spacing:-.01em;padding:16px 16px 8px}
.ios-grp{margin:0 12px;background:#fff;border-radius:16px;overflow:hidden}
.row{display:flex;align-items:center;gap:11px;padding:9px 12px 9px 10px;position:relative;font-family:var(--f-app)}
.row+.row::before{content:"";position:absolute;left:56px;right:0;top:0;height:1px;background:var(--ios-line)}
.row .tx{min-width:0;flex:1}
.row .t1{font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.row .t2{display:block;font-size:12px;color:var(--ios-grey);line-height:1.3;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .when{font-size:12.5px;font-weight:500;color:var(--ios-orange);white-space:nowrap}
.row .when.bad{color:var(--ios-red)}
.row .chev{width:7px;height:12px;flex:none;opacity:.35}
.tabbar{position:absolute;left:10px;right:10px;bottom:10px;height:62px;border-radius:31px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 20px rgba(0,0,0,.08);display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:0 4px}
.tab{display:grid;justify-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#1C1C1E;position:relative}
.tab svg{width:21px;height:21px}
.tab.on{color:#D9431F}
.tab.on::before{content:"";position:absolute;inset:-7px 2px;border-radius:22px;background:rgba(240,106,71,.12);z-index:-1}
.tab .badge{position:absolute;top:-5px;left:calc(50% + 4px);min-width:16px;height:16px;border-radius:8px;background:var(--ios-red);color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px}

/* document pictures (as drawn in the app, cool tones) */
.thumb{position:relative;width:34px;height:42px;border-radius:6px;background:#fff;border:1px solid #E4E4E8;flex:none;overflow:visible}
.thumb::before{content:"";position:absolute;left:6px;right:6px;top:9px;height:14px;background:repeating-linear-gradient(180deg,#D5D5DB 0 2px,transparent 2px 5px)}
.thumb.pass{background:linear-gradient(180deg,#2E3A63,#212B4D);border-color:#1E2746}
.thumb.pass::before{left:9px;right:9px;top:10px;height:14px;border-radius:50%;background:none;border:1.5px solid #C9B37A}
.thumb.pass::after{content:"";position:absolute;left:8px;right:8px;bottom:9px;height:2px;border-radius:2px;background:#C9B37A}
.thumb.card{background:#E6E6EA}
.thumb.card::before{left:3px;right:3px;top:12px;height:17px;border-radius:2px;background:linear-gradient(180deg,#BFE3CF 0 4px,#fff 4px)}
.thumb .b{position:absolute;right:-6px;bottom:-5px;width:17px;height:17px;border-radius:5px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;background:#3B5BFD}
.thumb .b svg{width:10px;height:10px}
.b.home{background:#14A098}.b.car{background:#F05A36}.b.health{background:#E0457B}.b.work{background:#5856D6}.b.school{background:#F2A800}

/* frosted cards */
.float{position:absolute;z-index:4;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(10,10,11,.05);border-radius:20px;box-shadow:0 24px 50px -20px rgba(10,10,11,.35),0 4px 12px rgba(10,10,11,.06);padding:13px 15px;font-size:13px;line-height:1.4;font-family:var(--f-app)}
.notif{left:-18px;right:-18px;top:-34px;display:grid;grid-template-columns:auto 1fr;gap:3px 11px;align-items:start;border-radius:24px;padding:12px 14px}
.notif .ic{width:34px;height:34px;border-radius:9px;overflow:hidden;grid-row:span 2}
.notif .ic svg{width:34px;height:34px}
.notif .h{display:flex;justify-content:space-between;font-size:12px;color:var(--fg-3);font-weight:500}
.notif .h b{color:var(--fg);font-weight:600;letter-spacing:.01em;text-transform:uppercase;font-size:11px}
.notif .m{font-size:13.5px;color:var(--fg)}
.notif .m b{font-weight:600}
.filed{width:224px;right:-96px;top:250px}
.filed .h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.filed .h i{width:20px;height:20px;border-radius:50%;background:var(--ios-green);display:grid;place-items:center}
.filed .h i svg{width:11px;height:11px}
.filed dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:10px 0 0;font-size:12.5px}
.filed dt{color:var(--fg-3)}
.filed dd{margin:0;font-weight:500;text-align:right}
@media (prefers-reduced-motion:no-preference){.notif{animation:bob 7s ease-in-out infinite}.filed{animation:bob 8s ease-in-out -3s infinite}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:1240px){.filed{right:-70px}}
@media (max-width:620px){.panel{height:500px;padding-top:64px;border-radius:28px}.device{--pw:262px}.filed{display:none}.notif{left:-12px;right:-12px;animation:none}.ico{display:none}}

/* document strip */
.strip{padding:26px 0 18px;overflow:hidden}
.strip p{text-align:center;font-size:14px;font-weight:500;color:var(--fg-3);margin-bottom:16px}
.marquee-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:flex;width:max-content;gap:12px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 9px;border-radius:999px;background:var(--grey);font-size:15px;font-weight:500;white-space:nowrap}
.chip .thumb{width:22px;height:27px;border-radius:4px}
.chip .thumb::before{left:4px;right:4px;top:6px;height:9px}
.chip .thumb.pass::before{left:6px;right:6px;top:6px;height:9px;border-width:1px}
.chip .thumb.pass::after{left:5px;right:5px;bottom:5px;height:1.5px}
.chip .thumb.card::before{top:8px;height:11px;left:2px;right:2px}
@media (prefers-reduced-motion:no-preference){.marquee{animation:slide 60s linear infinite}}
@keyframes slide{to{transform:translateX(calc(-50% - 6px))}}

/* sections */
section{padding:112px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--fg-2);margin:0}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.sec-h{max-width:760px}
.sec-h.center{margin:0 auto;text-align:center}
.sec-h h2{font-size:clamp(34px,4.2vw,56px);letter-spacing:-.026em;margin-top:16px}
.sec-h p:not(.eyebrow){margin-top:20px;font-size:clamp(17px,1.4vw,19px);color:var(--fg-2);line-height:1.6}
.sec-h.center p:not(.eyebrow){margin-left:auto;margin-right:auto;max-width:36em}
.grey{background:var(--grey)}
@media (max-width:720px){section{padding:80px 0}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px}
.step{background:#fff;border-radius:var(--r);padding:28px 26px 0;display:flex;flex-direction:column;overflow:hidden;min-height:440px}
.step .n{font:600 14px/1 var(--f-display);color:var(--fg-3)}
.step h3{font-size:25px;margin-top:14px;letter-spacing:-.025em}
.step p{margin-top:10px;color:var(--fg-2);font-size:16px;line-height:1.55}
.step .vis{margin-top:auto;padding:28px 0 0;display:flex;justify-content:center}
.mini{width:100%;max-width:300px;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 0 0 1px var(--line),0 -10px 40px -20px rgba(10,10,11,.25);padding:16px 16px 18px;font-family:var(--f-app)}
.vis.sil{margin:auto -26px 0;margin-top:auto;padding:26px 26px 0;background:var(--silver-panel)}
.scan{position:relative;height:150px;border-radius:14px;background:linear-gradient(160deg,#2B2B31,#141417);display:grid;place-items:center;overflow:hidden}
.scan .doc{width:120px;height:82px;border-radius:7px;background:linear-gradient(180deg,#F4F5F8,#E3E6EC);transform:rotate(-4deg);position:relative;box-shadow:0 10px 20px rgba(0,0,0,.45)}
.scan .doc::before{content:"";position:absolute;left:10px;top:12px;width:26px;height:32px;border-radius:3px;background:#B8BDC8}
.scan .doc::after{content:"";position:absolute;left:44px;right:10px;top:14px;height:30px;background:repeating-linear-gradient(180deg,#9EA3AE 0 2px,transparent 2px 7px)}
.scan .doc i{position:absolute;left:10px;right:10px;bottom:9px;height:12px;background:repeating-linear-gradient(180deg,#7C808A 0 1.5px,transparent 1.5px 5px)}
.scan .corners{position:absolute;inset:22px 46px;border-radius:10px;--c:rgba(255,255,255,.9);background:linear-gradient(var(--c),var(--c)) 0 0/18px 3px,linear-gradient(var(--c),var(--c)) 0 0/3px 18px,linear-gradient(var(--c),var(--c)) 100% 0/18px 3px,linear-gradient(var(--c),var(--c)) 100% 0/3px 18px,linear-gradient(var(--c),var(--c)) 0 100%/18px 3px,linear-gradient(var(--c),var(--c)) 0 100%/3px 18px,linear-gradient(var(--c),var(--c)) 100% 100%/18px 3px,linear-gradient(var(--c),var(--c)) 100% 100%/3px 18px;background-repeat:no-repeat}
.ways{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.ways span{font-size:12px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--grey);color:var(--fg-2)}
.fields{display:grid;gap:8px}
.field{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;background:var(--grey);font-size:13.5px}
.field span{color:var(--fg-3)}
.field b{font-weight:600}
.field.new b::after{content:" ✓";color:#209A49}
.tl{position:relative;padding:8px 4px 4px}
.tl .bar{height:6px;border-radius:6px;background:linear-gradient(90deg,#DADCE2,var(--black))}
.tl .pts{display:flex;justify-content:space-between;margin-top:-12px}
.tl .pt{display:grid;justify-items:center;gap:8px;font-size:12px;font-weight:600;text-align:center;color:var(--fg)}
.tl .pt i{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--black)}
.tl .pt:last-child i{background:var(--coral);border-color:var(--coral)}
.tl .pt small{display:block;font-weight:400;color:var(--fg-3);font-size:11px}
.remind{margin-top:14px;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--grey);font-size:13px;line-height:1.35}
.remind .ic{width:28px;height:28px;border-radius:8px;overflow:hidden;flex:none}
.remind .ic svg{width:28px;height:28px}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}.step{min-height:0}}

/* features */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:60px}
.tile{position:relative;background:var(--grey);border-radius:var(--r);padding:30px;overflow:hidden;display:flex;flex-direction:column;min-height:340px}
.tile h3{font-size:24px;letter-spacing:-.025em}
.tile > p{margin-top:8px;color:var(--fg-2);font-size:16px;line-height:1.55;max-width:30em}
.tile .vis{margin-top:auto;padding-top:26px}
.s4{grid-column:span 4}.s3{grid-column:span 3}.s2{grid-column:span 2}
.tile.dark{background:var(--black);color:#fff}
.tile.dark > p{color:rgba(255,255,255,.7)}
.tile.navy{background:linear-gradient(160deg,var(--navy-2),var(--navy));color:#fff}
.tile.navy > p{color:rgba(255,255,255,.72)}
.tile.sil{background:var(--silver)}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.s4,.s3{grid-column:span 2}.s2{grid-column:span 1}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}.s4,.s3,.s2{grid-column:span 1}.tile{min-height:0;padding:26px}}
.chat{display:grid;gap:10px;max-width:520px;font-family:var(--f-app)}
.bub{max-width:82%;padding:11px 15px;border-radius:20px;font-size:15px;line-height:1.45}
.bub.me{justify-self:end;background:var(--black);color:#fff;border-bottom-right-radius:6px}
.bub.it{background:#fff;border-bottom-left-radius:6px;box-shadow:0 8px 24px -14px rgba(10,10,11,.25)}
.bub.it b{font-weight:600}
.bub .doc{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;border-radius:12px;background:var(--grey);font-size:13px}
.bub .doc .thumb{width:26px;height:32px}
.bub .doc .thumb::before{left:4px;right:4px;top:7px;height:10px}
.bub .doc .thumb.pass::before{left:7px;right:7px;top:7px;height:10px;border-width:1px}
.bub .doc .thumb.pass::after{left:6px;right:6px;bottom:6px;height:1.5px}
.bub .doc small{display:block;color:var(--fg-3);font-size:12px}
.spaces{display:grid;gap:8px;font-family:var(--f-app)}
.sp{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:10px 12px;font-size:14px}
.sp .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.sp .ic svg{width:16px;height:16px}
.sp b{font-weight:600}
.sp small{display:block;color:var(--fg-3);font-size:12.5px}
.av{display:flex;margin-left:auto}
.av i{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-7px;display:grid;place-items:center;font:600 10px/1 var(--f-app);color:#fff;font-style:normal}
.link,.req,.bundle{background:#fff;border-radius:16px;padding:14px;font-size:13.5px;box-shadow:0 10px 30px -18px rgba(10,10,11,.3);font-family:var(--f-app)}
.link .url{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;background:var(--grey);font-weight:500;font-size:13px;overflow:hidden;white-space:nowrap}
.link .url svg{width:14px;height:14px;flex:none}
.link .opt{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--fg-2)}
.link .opt b{color:var(--fg);font-weight:600}
.sw{width:34px;height:20px;border-radius:10px;background:var(--ios-green);position:relative}
.sw::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.req .q{font-weight:600;font-size:14.5px}
.req .from{color:var(--fg-3);font-size:12.5px;margin-top:2px}
.req .drop{margin-top:12px;border:1.5px dashed rgba(10,10,11,.18);border-radius:12px;padding:12px;text-align:center;color:var(--fg-2);font-size:13px}
.bundle .h{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.bundle .h span{color:var(--fg-2)}
.bundle .pb{height:6px;border-radius:6px;background:var(--grey);margin:10px 0 12px;overflow:hidden}
.bundle .pb i{display:block;height:100%;width:66%;border-radius:6px;background:var(--black)}
.bundle ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13px}
.bundle li{display:flex;align-items:center;gap:8px}
.bundle li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(10,10,11,.22);flex:none}
.bundle li.ok::before{border:0;background:var(--ios-green) no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3L9.6 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bundle li:not(.ok){color:var(--fg-3)}
.idcard{position:relative;max-width:360px;aspect-ratio:1.586;border-radius:16px;padding:16px 18px;background:linear-gradient(135deg,#EEF1F6,#D9DEE7 45%,#EEF1F6);color:#1C2230;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);overflow:hidden;transform:rotate(-2.5deg);font-family:var(--f-app)}
.idcard::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 80% 30%,rgba(255,255,255,.35) 0 2px,transparent 2px 9px);opacity:.5}
.idcard .top-l{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.idcard .bodyc{display:flex;gap:14px;margin-top:14px}
.idcard .photo{width:62px;height:76px;border-radius:8px;background:linear-gradient(180deg,#C3C9D3,#A3ABB8);flex:none;position:relative;overflow:hidden}
.idcard .photo::before{content:"";position:absolute;left:50%;top:14px;width:26px;height:26px;border-radius:50%;background:#848D9B;transform:translateX(-50%)}
.idcard .photo::after{content:"";position:absolute;left:50%;bottom:-18px;width:52px;height:40px;border-radius:50%;background:#848D9B;transform:translateX(-50%)}
.idcard .lines{display:grid;gap:6px;font-size:11px;line-height:1.2}
.idcard .lines small{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.6}
.idcard .lines b{font-weight:600;font-size:12.5px}
.idcard .num{position:absolute;left:18px;bottom:14px;font:600 14px/1 var(--f-app);letter-spacing:.12em}
.trust{display:grid;gap:12px;max-width:420px;font-family:var(--f-app)}
.trust .p{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px;font-size:14px}
.trust .p .avatar{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:700;flex:none}
.trust .p small{display:block;color:rgba(255,255,255,.65);font-size:12.5px}
.trust .wait{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.7);padding:0 4px}
.trust .wait b{color:#fff}
.trust .days{display:flex;gap:4px}
.trust .days i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.trust .days i.on{background:#fff}

/* computer */
.desk-panel{margin-top:60px;border-radius:36px;background:var(--silver-panel);padding:56px 56px 0;overflow:hidden}
.browser{border-radius:18px 18px 0 0;background:#fff;box-shadow:0 0 0 1px rgba(10,10,11,.06),0 40px 70px -30px rgba(10,10,11,.45);overflow:hidden}
.browser .bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#F4F5F7;border-bottom:1px solid var(--line)}
.browser .bar i{width:12px;height:12px;border-radius:50%;background:#FF5F57}
.browser .bar i:nth-child(2){background:#FEBC2E}.browser .bar i:nth-child(3){background:#28C840}
.browser .bar span{margin:0 auto;padding:6px 60px;border-radius:8px;background:#fff;font:400 13px/1.2 var(--f-app);color:var(--fg-2);box-shadow:0 0 0 1px var(--line)}
.app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:500px;background:#F2F2F7;font-family:var(--f-app)}
.side{background:#ECECF0;padding:20px 12px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.side .brand{font-size:16px;padding:0 8px 18px}
.side .brand svg{width:28px;height:28px;border-radius:8px}
.si{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#1C1C1E}
.si svg{width:17px;height:17px;opacity:.75}
.si.on{background:#D9431F;color:#fff;font-weight:500}
.si.on svg{opacity:1}
.si .n{margin-left:auto;font-size:12px;font-weight:600;background:var(--ios-red);color:#fff;border-radius:9px;padding:1px 7px}
.side .lab{font-size:12px;color:var(--ios-grey);padding:14px 10px 6px;font-weight:500}
.si .dot{width:9px;height:9px;border-radius:50%}
.main{padding:34px 40px}
.main h4{font:700 30px/1 var(--f-app);letter-spacing:-.03em;margin:0}
.main .sub{color:var(--ios-grey);font-size:14px;margin-top:8px}
.tabs{display:flex;gap:8px;margin-top:20px}
.tabs span{padding:7px 14px;border-radius:999px;background:#fff;font-size:13.5px;font-weight:500;box-shadow:0 0 0 1px var(--line)}
.tabs span.on{background:var(--black);color:#fff;box-shadow:none}
.main .ios-grp{margin:18px 0 0;border-radius:14px}
.main .row{padding:11px 16px 11px 14px;gap:14px}
.main .row+.row::before{left:64px}
.main .row .t1{font-size:15px}
.main .row .t2{font-size:13px}
.main .row .act{font-size:13px;font-weight:600;color:#D9431F;padding:6px 12px;border-radius:999px;background:rgba(240,106,71,.1);white-space:nowrap}
.desk-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:44px}
.desk-pts div{font-size:16px;color:var(--fg-2);line-height:1.55}
.desk-pts b{display:block;color:var(--fg);font:600 18px/1.3 var(--f-display);letter-spacing:-.015em;margin-bottom:6px}
@media (max-width:900px){.app{grid-template-columns:minmax(0,1fr)}.side{display:none}.main{padding:24px 18px}.desk-pts{grid-template-columns:minmax(0,1fr);gap:18px}.browser .bar span{padding:6px 20px}.desk-panel{padding:24px 14px 0;border-radius:28px}}
@media (max-width:620px){.main .row .act{display:none}}

/* privacy (the logo's navy) */
.privacy{background:linear-gradient(170deg,var(--navy-2),var(--navy) 60%);color:#fff}
.privacy .eyebrow{color:rgba(255,255,255,.75)}
.privacy .sec-h p:not(.eyebrow){color:rgba(255,255,255,.72)}
.vaultgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pc{border-radius:22px;padding:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.pc .ic{width:42px;height:42px;border-radius:13px;background:#fff;color:var(--navy);display:grid;place-items:center}
.pc .ic svg{width:20px;height:20px}
.pc h3{font-size:18px;margin-top:16px;letter-spacing:-.015em;line-height:1.25}
.pc p{margin-top:8px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.pnote{margin-top:26px;font-size:14.5px;color:rgba(255,255,255,.65);line-height:1.6;max-width:40em}
.pnote a{color:#fff}
.next{margin-top:26px;display:inline-flex;gap:10px;align-items:baseline;font-size:14.5px;line-height:1.45;padding:11px 18px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.next b{font-weight:600;white-space:nowrap}
@media (max-width:900px){.vaultgrid{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:560px){.pgrid{grid-template-columns:minmax(0,1fr)}}

/* pricing */
.center{text-align:center}
.toggle{display:inline-flex;margin:40px auto 0;padding:4px;border-radius:999px;background:var(--grey);gap:4px}
.toggle button{font:600 15px/1 var(--f-body);color:var(--fg-2);background:none;border:0;padding:11px 20px;border-radius:999px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:#fff;color:var(--fg);box-shadow:0 2px 8px rgba(10,10,11,.1)}
.toggle .save{font-size:12px;color:#1E8A43;margin-left:4px}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:920px;margin:36px auto 0;text-align:left}
.plan{border-radius:30px;padding:36px;background:#fff;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column}
.plan.best{background:var(--black);color:#fff;box-shadow:0 40px 70px -40px rgba(10,10,11,.6)}
.plan .nm{display:flex;justify-content:space-between;align-items:center;font:600 22px/1 var(--f-display);letter-spacing:-.02em}
.plan .tag{font:600 12px/1 var(--f-body);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
.plan .for{margin-top:8px;color:var(--fg-2);font-size:15px}
.plan.best .for{color:rgba(255,255,255,.7)}
.price{display:flex;align-items:baseline;gap:8px;margin-top:26px}
.price b{font:600 56px/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price span{color:var(--fg-2);font-size:16px}
.plan.best .price span{color:rgba(255,255,255,.7)}
.psub{margin-top:8px;font-size:14px;color:var(--fg-2);min-height:1.5em}
.plan.best .psub{color:rgba(255,255,255,.7)}
.plan ul{list-style:none;padding:0;margin:28px 0 30px;display:grid;gap:12px;font-size:15.5px}
.plan li{display:flex;gap:11px;align-items:flex-start;line-height:1.45}
.plan li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;margin-top:1px;background:var(--grey) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3L9.6 3.6' fill='none' stroke='%230A0A0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan.best li::before{background-color:rgba(255,255,255,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3L9.6 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.plan .btn{margin-top:auto;width:100%}
.soon{margin-top:22px;font-size:14.5px;color:var(--fg-2)}
.soon b{color:var(--fg);font-weight:600}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr)}.plan{padding:28px}}

/* AI */
.ai{background:#fff}
.aigrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.ailist{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
.ailist li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line);font-size:16px;color:var(--fg-2);line-height:1.55}
.ailist li:last-child{border-bottom:1px solid var(--line)}
.ailist .ic{width:40px;height:40px;border-radius:12px;background:var(--grey);display:grid;place-items:center;flex:none;color:var(--black)}
.ailist .ic svg{width:19px;height:19px}
.ailist b{display:block;color:var(--fg);font:600 17.5px/1.3 var(--f-display);letter-spacing:-.01em;margin-bottom:3px}
.aifoot{margin-top:20px;font-size:14.5px;color:var(--fg-3)}
.aipanel{position:relative;border-radius:36px;background:var(--silver);padding:100px 48px 56px;min-height:600px;display:flex;align-items:center;justify-content:center}
.askcard{width:100%;max-width:440px;background:#fff;border-radius:26px;box-shadow:0 40px 70px -30px rgba(10,10,11,.4);padding:20px;font-family:var(--f-app)}
.ask-h{display:flex;align-items:center;gap:10px;padding:0 4px 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ask-h .ic{width:30px;height:30px;border-radius:9px;background:var(--black);color:#fff;display:grid;place-items:center}
.ask-h .ic svg{width:15px;height:15px}
.ask-h b{font-size:16px}
.ask-h small{margin-left:auto;font-size:12px;color:var(--fg-3)}
.askcard .bub{font-size:14px}
.askcard .bub.it{background:var(--grey);box-shadow:none}
.askcard .bub .doc{background:#fff}
.ask-in{margin-top:16px;display:flex;align-items:center;justify-content:space-between;height:46px;border-radius:999px;background:var(--grey);padding:0 6px 0 18px;color:var(--fg-3);font-size:14px}
.ask-in i{width:34px;height:34px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center}
.ask-in i svg{width:16px;height:16px}
.scanfound{left:22px;top:26px;display:flex;align-items:center;gap:10px;border-radius:18px;padding:10px 14px 10px 10px}
.scanfound .ic{width:34px;height:34px;border-radius:10px;background:var(--grey);display:grid;place-items:center}
.scanfound .ic svg{width:17px;height:17px}
.scanfound small{display:block;color:var(--fg-3);font-size:12px}
@media (max-width:1000px){.aigrid{grid-template-columns:minmax(0,1fr);gap:40px}.aipanel{min-height:0;padding:70px 18px 28px;border-radius:28px}}
.tile.white{background:#fff}

/* emergency and legacy access (the logo's navy) */
.legacy{background:linear-gradient(170deg,var(--navy-2),var(--navy) 70%);color:#fff}
.legacy .eyebrow{color:rgba(255,255,255,.8)}
.legacy .sec-h p:not(.eyebrow){color:rgba(255,255,255,.75)}
.leg-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.ecard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:22px;font-family:var(--f-app);display:grid;gap:10px}
.ec-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 6px}
.ec-h b{font-size:16px}.ec-h small{color:rgba(255,255,255,.6);font-size:12.5px}
.ec-row,.ec-note,.ec-check{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:16px;padding:12px 14px;font-size:14px}
.ec-row .tx{flex:1;min-width:0}.ec-row small,.ec-note small,.ec-check small{display:block;color:rgba(255,255,255,.62);font-size:12.5px}
.mav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.ec-w{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
.ec-note{align-items:flex-start}.ec-note b{display:block;margin-bottom:2px}
.ec-note .ic,.ec-check .ic{width:32px;height:32px;border-radius:10px;background:#fff;color:var(--navy);display:grid;place-items:center;flex:none}
.ec-note .ic svg,.ec-check .ic svg{width:16px;height:16px}
.ec-check span:nth-child(2){flex:1}
.lsteps{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:none}
.lsteps li{border-top:1px solid rgba(255,255,255,.18);padding-top:20px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.72)}
.lsteps b{display:block;color:#fff;font:600 19px/1.3 var(--f-display);letter-spacing:-.01em;margin:14px 0 6px}
.ln{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--navy);font:600 14px/1 var(--f-display)}
.lfoot{margin-top:40px;font-size:15px;color:rgba(255,255,255,.65)}
@media (max-width:1000px){.leg-top{grid-template-columns:minmax(0,1fr);gap:40px}.lsteps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media (max-width:560px){.lsteps{grid-template-columns:minmax(0,1fr)}}

/* computer carousel */
.carousel{margin-top:56px}
.ctabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.ctab{position:relative;overflow:hidden;font:600 14.5px/1 var(--f-body);color:var(--fg-2);background:var(--grey);border:0;border-radius:999px;padding:12px 18px;cursor:pointer}
.ctab[aria-selected="true"]{background:var(--black);color:#fff}
.ctab .prog{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.18);opacity:0}
.ctab[aria-selected="true"] .prog{opacity:1}
.ctab .prog i{display:block;height:100%;width:0;border-radius:2px;background:#fff}
.ctab.run .prog i{animation:fill 4s linear forwards}
@keyframes fill{to{width:100%}}
.carousel .desk-panel{margin-top:0}
.cview{overflow:hidden}
.ctrack{display:flex;transition:transform .8s var(--ease)}
.cslide{flex:0 0 100%;min-width:0}
.cslide .app{min-height:540px}
.ccap{margin-top:18px;text-align:center;font-size:15.5px;color:var(--fg-2)}
.crumb{font-size:13px;color:var(--ios-grey);margin:0 0 10px}.crumb b{color:#1C1C1E;font-weight:500}
.folds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.fold{background:#fff;border-radius:14px;padding:14px;display:grid;gap:2px;font-size:14px}
.fold .fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);margin-bottom:8px}
.fold .fi svg{width:17px;height:17px}
.fold small{color:var(--ios-grey);font-size:12.5px}
.gl{font-size:13px;font-weight:600;color:#1C1C1E;margin:22px 0 0}
.main .gl+.ios-grp{margin-top:10px}
.hh{margin-top:18px;background:#fff;border-radius:16px;padding:8px 6px}
.hh-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 12px;font-size:15px}
.btnm{font-size:13px;font-weight:600;color:#fff;background:var(--black);padding:7px 13px;border-radius:999px}
.mem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--ios-line);font-size:14.5px}
.mem .tx{flex:1;min-width:0}.mem b{font-weight:500}.mem small{display:block;color:var(--ios-grey);font-size:12.5px}
.mtag{font-size:12px;font-weight:600;color:var(--fg-2);background:var(--grey);padding:4px 10px;border-radius:999px}
.hh-f{font-size:12.5px;color:var(--ios-grey);padding:10px 12px 6px;border-top:1px solid var(--ios-line)}
.pbar{height:6px;border-radius:6px;background:#fff;margin-top:14px;overflow:hidden}.pbar i{display:block;height:100%;width:66%;background:var(--black);border-radius:6px}
.dchat{display:grid;gap:12px;margin-top:22px;max-width:640px}
.dchat .bub{font-size:14.5px}
.sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sugg span{font-size:13px;padding:8px 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--fg-2)}
@media (max-width:900px){.folds{grid-template-columns:repeat(2,minmax(0,1fr))}.cslide .app{min-height:0}.ctabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.ctab{flex:none}}

/* privacy: a plain comparison */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:52px}
.cmp-col{background:#fff;border-radius:var(--r);padding:32px}
.cmp-col h3{font-size:22px}
.cmp-col ul{list-style:none;margin:18px 0 0;padding:0;display:grid}
.cmp-col li{padding:13px 0 13px 30px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;position:relative}
.cmp-col li::before{content:"";position:absolute;left:0;top:16px;width:18px;height:18px;border-radius:50%;background:var(--black) no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3L9.6 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cmp-col:last-child li::before{background-color:var(--grey-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2' fill='%230A0A0B'/%3E%3C/svg%3E")}
.cipher{margin-top:22px;border-radius:16px;background:var(--black);color:#fff;padding:16px 18px}
.cipher span{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:8px}
.cipher code{display:block;font:500 13px/1.7 var(--f-app);letter-spacing:.06em;color:rgba(255,255,255,.88);word-break:break-all}
.cmp-note{margin-top:18px;font-size:14.5px;color:var(--fg-2)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:44px}
.facts div{font-size:15.5px;color:var(--fg-2);line-height:1.55;border-top:2px solid var(--black);padding-top:16px}
.facts b{display:block;color:var(--fg);font:600 18px/1.3 var(--f-display);margin-bottom:6px}
@media (max-width:900px){.cmp{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-col{padding:24px}}
@media (max-width:520px){.facts{grid-template-columns:minmax(0,1fr)}}
.seats{max-width:760px;margin:30px auto 0;padding:18px 22px;border-radius:20px;background:var(--grey);font-size:15.5px;color:var(--fg-2);line-height:1.55}
.seats b{color:var(--fg)}

/* faq: pill rows */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
.faq .list{display:grid;gap:10px}
.faq details{background:var(--grey);border-radius:24px;transition:background .2s}
.faq details[open]{background:var(--grey-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px 20px 26px;font:600 17.5px/1.35 var(--f-display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:30px;height:30px;border-radius:50%;flex:none;background:#fff no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%230A0A0B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 60px 22px 26px;color:var(--fg-2);font-size:16px;line-height:1.65}
@media (max-width:860px){.faq .wrap{grid-template-columns:minmax(0,1fr);gap:28px}}

/* footer: black card inset on white */
.foot{padding:0 0 calc(20px + env(safe-area-inset-bottom,0px))}
.fcard{border-radius:36px;background:var(--black);color:#fff;padding:60px 56px 0;overflow:hidden}
.ftop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.ftop > div:first-child{flex:1 1 380px}
.fcard h2{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.026em;max-width:13em}
.fcard .sub{margin-top:12px;color:rgba(255,255,255,.65);font-size:17px}
.duo{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 22px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.duo a.mail{text-decoration:none;font-size:15px;color:rgba(255,255,255,.85);margin-right:10px}
.duo .btn{height:46px}
.fcols{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px;margin-top:64px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.fbrand .brand{color:#fff;font-size:18px}
.fbrand .brand svg{width:30px;height:30px;border-radius:8px}
.fbrand p{margin-top:14px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.6);max-width:22em}
.fcols nav{display:grid;align-content:start;gap:11px;font-size:14.5px;color:rgba(255,255,255,.62)}
.fcols nav b{color:#fff;font-weight:600;font-size:14px;margin-bottom:4px}
.fcols a{text-decoration:none}.fcols a:hover{color:#fff}
.fpromise{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.fpromise span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.75);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.fpromise span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral)}
.flegal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:28px;font-size:13.5px;color:rgba(255,255,255,.45)}
.wordmark{margin-top:36px;font:700 clamp(48px,11.6vw,158px)/.8 var(--f-app);letter-spacing:-.05em;color:#1E1E22;white-space:nowrap;user-select:none;margin-bottom:-.12em}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1/-1}}
@media (max-width:640px){.fcard{padding:44px 22px 0;border-radius:28px}.duo{padding:6px;border-radius:24px}.duo a.mail{padding:8px 14px}.fcols{grid-template-columns:minmax(0,1fr);gap:28px}}

/* legal pages */
.legal-hero{padding:72px 0 24px}
.legal-hero .wrap,.legal .wrap{max-width:780px}
.legal-hero h1{font-size:clamp(40px,5vw,60px);letter-spacing:-.028em;margin-top:20px}
.legal-hero p{margin-top:14px;font-size:18px;color:var(--fg-2)}
.lupd{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:#5E5E66;background:#EFEFF2;padding:7px 14px;border-radius:999px}
.draft{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#8A4B00;background:#FFF1DA;padding:7px 14px;border-radius:999px}
.draft::before{content:"";width:8px;height:8px;border-radius:50%;background:#E08600}
.legal{padding:16px 0 96px}
.legal h2{font-size:26px;letter-spacing:-.025em;margin:48px 0 14px}
.legal p,.legal li{font-size:16.5px;line-height:1.7;color:#3A3B44}
.legal p{margin:0 0 14px}
.legal ul{padding-left:22px;margin:0 0 14px}
.legal li{margin:6px 0}
.legal strong{color:var(--fg);font-weight:600}
.legal mark{background:#FFF1DA;color:#8A4B00;padding:1px 4px;border-radius:4px}

/* reveal on scroll (only when JS runs) */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .hero .rv{transition-delay:calc(var(--d,0) * 90ms)}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* 0.53.0 · tiles show the whole moment */
.docline{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;margin-bottom:10px;box-shadow:0 10px 30px -18px rgba(10,10,11,.3);font-family:var(--f-app);font-size:13.5px}
.docline > span:nth-child(2){min-width:0;flex:1}
.docline b{display:block;font-weight:600}
.docline small{display:block;color:var(--fg-3);font-size:12px;margin-top:2px}
.docline .to{flex:none;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--grey);color:var(--fg-2)}
.req .got{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(52,199,89,.1)}
.req .got .ok{width:22px;height:22px;border-radius:50%;background:#34C759;display:grid;place-items:center;flex:none}
.req .got b{display:block;font-weight:600;font-size:13.5px}
.req .got small{display:block;color:var(--fg-3);font-size:12px;margin-top:1px}
/* 0.53.0 · six Family seats */
.seats6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:26px}
.seat{display:grid;justify-items:center;gap:6px;font:600 12.5px/1.2 var(--f-body);color:#fff;text-align:center}
.seat small{display:block;font-weight:500;font-size:11.5px;color:rgba(255,255,255,.55);margin-top:-3px}
.seat i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 15px/1 var(--f-app);color:#fff;font-style:normal;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.seat i.free{background:transparent;border:1.5px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.55);box-shadow:none}
.nokid{display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.08);font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.75)}
.nokid b{color:#fff}
.plan.best .nokid + ul{margin-top:22px}
@media (max-width:420px){.seat i{width:38px;height:38px;font-size:13px}.seats6{gap:4px}}
/* 0.53.0 · who is behind it */
.who{padding-block:48px 64px}
.founder{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:center;background:var(--grey);border-radius:30px;padding:36px}
.founder .ph{aspect-ratio:1;max-width:100%;border-radius:24px;background:linear-gradient(155deg,#2E2B48,#16151F);display:grid;place-items:center;color:#fff}
.founder .ph span{font:600 54px/1 var(--f-display);letter-spacing:-.03em}
.founder .ph img{width:100%;height:100%;object-fit:cover;border-radius:24px}
.founder .ft{min-width:0}
.founder h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;margin-top:10px;text-wrap:balance}
.founder .ft > p:not(.eyebrow){margin-top:12px;color:var(--fg-2);font-size:17px;line-height:1.6;max-width:36em}
.founder .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.founder .facts span{font-size:13.5px;padding:8px 12px;border-radius:999px;background:#fff;color:var(--fg-2)}
@media (max-width:760px){.founder{grid-template-columns:minmax(0,1fr);padding:26px;gap:24px}.founder .ph{max-width:150px}}
/* 0.53.0 · phones: the Start bar */
.stickybar{position:fixed;z-index:40;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:space-between;gap:10px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(10,10,11,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff;font-size:13px;transform:translateY(110%);transition:transform .35s var(--ease)}
.stickybar b{display:block;font-size:14px;color:#fff}
.stickybar span{color:rgba(255,255,255,.7)}
.stickybar .btn{padding:12px 18px;font-size:14px;white-space:nowrap}
@media (max-width:760px){.stickybar{display:flex}}
body.stick-on .stickybar{transform:none}
/* 0.53.0 · testimonials (drawn only when there are real quotes) */
.stories{padding-block:96px 24px}
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.st-head h2{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.035em;line-height:1.02;margin-top:14px;text-wrap:balance;max-width:14em}
.st-nav{display:flex;gap:10px;flex:none}
.st-b{appearance:none;border:0;width:48px;height:48px;border-radius:50%;background:var(--grey);color:var(--black);display:grid;place-items:center;cursor:pointer}
.st-b:hover{background:#E8EAEE}
.st-b:focus-visible{outline:2px solid var(--black);outline-offset:2px}
.st-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px) / 3);gap:20px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.st-track::-webkit-scrollbar{display:none}
.st-card{scroll-snap-align:start;margin:0;background:var(--grey);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:26px;min-width:0}
.st-card blockquote{margin:0;font:500 19px/1.5 var(--f-display);letter-spacing:-.01em;color:var(--black)}
.st-card blockquote::before{content:"\201C";display:block;font:600 44px/0.6 var(--f-display);color:var(--fg-3);margin-bottom:14px}
.st-card figcaption{margin-top:auto;display:flex;align-items:center;gap:12px}
.st-card figcaption img,.st-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.st-av{display:grid;place-items:center;color:#fff;font:700 15px/1 var(--f-app)}
.st-card figcaption b{display:block;font-size:15px}
.st-card figcaption small{display:block;color:var(--fg-3);font-size:13.5px;margin-top:2px}
.st-sample{align-self:flex-start;font:600 11.5px/1 var(--f-body);padding:6px 9px;border-radius:999px;background:#fff;color:#C2401C}
@media (max-width:1000px){.st-track{grid-auto-columns:calc((100% - 20px) / 2)}}
@media (max-width:640px){.st-track{grid-auto-columns:86%}.st-head{align-items:flex-start;flex-direction:column}.stories{padding-block:72px 16px}}

/* 0.56.0 · Works with */
.works{padding-block:110px 90px}
.works-g{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:56px}
.wt-panel{position:relative;height:500px;border-radius:36px;background:var(--silver);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 50px 80px -50px rgba(10,10,11,.35);overflow:hidden}
.wt-t{position:absolute;--s:84px;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:26%;background:rgba(255,255,255,.92);box-shadow:0 22px 36px -18px rgba(10,10,11,.4),0 1px 0 #fff inset;display:grid;place-items:center}
.wt-t.l{--s:96px}.wt-t.s{--s:72px}
.wt-t img{width:52%;height:52%;object-fit:contain}
.wt-t.hub{--s:150px;border-radius:34px;overflow:hidden;background:#16151F;box-shadow:0 40px 60px -28px rgba(10,10,11,.55)}
.wt-t.hub svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){.wt-t:not(.hub){animation:bob 8s ease-in-out infinite}}
.wt-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.wt-list li{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.wt-list li:last-child{border-bottom:0}
.wt-list img{width:28px;height:28px;object-fit:contain;flex:none}
.wt-list b{display:block;font:600 16px/1.3 var(--f-display);letter-spacing:-.01em}
.wt-list small{display:block;color:var(--fg-2);font-size:14.5px;line-height:1.45;margin-top:2px}
.wt-note{margin-top:28px;font-size:13px;color:var(--fg-3)}
@media (max-width:1000px){.works-g{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:640px){.works{padding-block:80px 64px}.wt-panel{height:360px;border-radius:28px}.wt-t{--s:60px}.wt-t.l{--s:66px}.wt-t.s{--s:52px}.wt-t.hub{--s:104px;border-radius:26px}}

/* 0.57.3 · who looks after your documents; no empty band above Works with */
.works{padding-top:8px}
.founder.co .ph{background:none;border-radius:30px;overflow:hidden;box-shadow:0 30px 50px -28px rgba(10,10,11,.5)}
.founder.co .ph svg{width:100%;height:100%;display:block}
.cofacts{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.cofacts li{display:flex;gap:12px;align-items:flex-start;min-width:0}
.cofacts svg{width:22px;height:22px;flex:none;margin-top:2px;color:var(--black)}
.cofacts b{display:block;font:600 15.5px/1.3 var(--f-display)}
.cofacts span{font-size:14.5px;line-height:1.5;color:var(--fg-2)}
@media (max-width:640px){.cofacts{grid-template-columns:minmax(0,1fr)}}

/* 0.67.0 founder prices */
.price .was{font:500 22px/1 var(--f-display);color:var(--fg-2);text-decoration:line-through;align-self:center}
.plan.best .price .was{color:rgba(255,255,255,.6)}
.fdr{margin:18px auto 0;font-size:15px;color:var(--fg-2);max-width:640px}
.fdr b{color:var(--fg);font-weight:600}

/* 0.67.0 review: the price row wraps on phones */
.price{flex-wrap:wrap;row-gap:4px}

/* 0.67.1 (Omri 27/10): a little colour. The main button is coral (darker than the logo coral so white text reads: 4.6:1),
   icon tiles take the app's category colours, founder prices show near the top and as a coral strip in Pricing. */
:root{--cta:#245852;--cta-hover:#17393A;--coral-tint:#FDECE7;--coral-deep:#8F2E16}
.btn-primary{background:var(--cta);color:#fff}
.btn-primary:hover{background:var(--cta-hover)}
.fine span::before{background-color:var(--cta)}
.ailist li:nth-child(5n+1) .ic{background:#EBEFFF;color:#3A5BFF}
.ailist li:nth-child(5n+2) .ic{background:#E2F4F4;color:#0B8585}
.ailist li:nth-child(5n+3) .ic{background:#EFEBFE;color:#6A48F0}
.ailist li:nth-child(5n+4) .ic{background:#FFF2DF;color:#B86E00}
.ailist li:nth-child(5n+5) .ic{background:var(--coral-tint);color:#C2401C}
.cofacts li:nth-child(4n+1) svg{color:#3A5BFF}
.cofacts li:nth-child(4n+2) svg{color:#0B8585}
.cofacts li:nth-child(4n+3) svg{color:#6A48F0}
.cofacts li:nth-child(4n+4) svg{color:#C2401C}
.scanfound .ic{background:#EBEFFF;color:#3A5BFF}
.fdr-top{display:inline-flex;align-items:flex-start;gap:9px;margin-top:18px;padding:8px 15px 8px 12px;border-radius:18px;background:var(--coral-tint);color:var(--coral-deep);font-size:14px;font-weight:500;line-height:1.4;text-decoration:none}
.fdr-top::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;background:var(--coral)}
.fdr-top b{font-weight:700}
.fdr-top:hover{background:#FBDDD3}
.fdr-top[hidden]{display:none}
.fdr{width:fit-content;max-width:min(640px,100%);margin:22px auto 0;padding:11px 18px;border-radius:18px;background:var(--coral-tint);color:var(--coral-deep);line-height:1.45}
.fdr b{color:var(--coral-deep);font-weight:700}
.fdr[hidden]{display:none}
/* 0.67.1: "Sign in" stays on one line; on the home page below 560 px the top Start button hides (the Start bar takes over) */
.top .signin{white-space:nowrap}
@media (max-width:560px){.home .top .actions .btn{display:none}}

/* 0.67.2: store rectangles (coming soon) in the footer: black, thin light border, store name in text, no store logos */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.store{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 18px 0 13px;border-radius:11px;background:#000;border:1px solid rgba(255,255,255,.38);color:#fff;font:600 17px/1.05 var(--f-body);letter-spacing:-.01em;white-space:nowrap}
.store small{display:block;font-size:10.5px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.72);margin-bottom:3px}
.store svg{width:24px;height:24px;flex:none}

/* 0.69.1 (Omri): phones: the Start bar is always there, from the first screen to the footer; nothing hides under it */
@media (max-width:760px){.stickybar{transform:none;transition:none}body.home{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}}

/* 0.98.0 (Omri 03/11/2026: directions A + E + F): the website looks like the Skellig icon.
   A sunset hero with the real rock and the sea, a story band, and the details carried through the page. */
:root{--teal:#245852;--teal-deep:#17393A;--mist:#E3F1EB;--atl:#1C2B44;--amber:#F59E4C;--sand:#FFCB7A;--slope:#4FA08A;
  --rock-mini:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 100 66'%3E%3Cpath d='M7.8 84.9 L15.4 78.2 L20.2 65.7 L24.1 47.4 L27 46 L29.4 49.4 L35.1 42.6 L40.9 34.5 L44.7 29.2 L46.6 30.2 L48.6 24.9 L51 23.4 L53.4 26.3 L56.7 37.4 L59.1 35 L61.5 31.6 L63.9 35 L67.3 43.6 L72.1 51.3 L78.8 62.8 L85.5 73.4 L92.2 83.9 L92.2 84.9 Z' fill='%23245852'/%3E%3C/svg%3E")}

/* section labels: a tiny rock in rock teal instead of the coral dot */
.eyebrow::before{width:19px;height:12px;border-radius:0;background:var(--rock-mini) no-repeat center/contain}
.pill i{width:19px;height:12px;border-radius:0;box-shadow:none;background:var(--rock-mini) no-repeat center/contain}
.fpromise span::before{background:var(--sand)}

/* light sections: headings in Atlantic navy */
main > section:not(.legacy):not(.story) .sec-h h2,main > section:not(.legacy):not(.story) > .wrap > h2,.cmp h3,.plans + * h2{color:var(--atl)}

/* icon tiles: the Skellig palette (mist, sand, navy, coral, slope) instead of blue and purple */
.ailist li:nth-child(5n+1) .ic{background:var(--mist);color:var(--teal)}
.ailist li:nth-child(5n+2) .ic{background:#FDF1E3;color:#8A4E0F}
.ailist li:nth-child(5n+3) .ic{background:#E6E9EF;color:var(--atl)}
.ailist li:nth-child(5n+4) .ic{background:#FBE6DF;color:#B03819}
.ailist li:nth-child(5n+5) .ic{background:#E4F2EC;color:#2E6E5E}
.cofacts li:nth-child(4n+1) svg{color:var(--teal)}
.cofacts li:nth-child(4n+2) svg{color:#8A4E0F}
.cofacts li:nth-child(4n+3) svg{color:var(--atl)}
.cofacts li:nth-child(4n+4) svg{color:#B03819}
.scanfound .ic{background:var(--mist);color:var(--teal)}

/* the app pictures on the site use the app's badge colours (0.96.0) */
.thumb .b,.b.id,.b.work{background:var(--atl)}
.b.home{background:var(--teal)}.b.car{background:#D2441F}.b.health{background:var(--slope)}.b.school{background:var(--slope)}

/* A: the sunset hero */
.hero.sunset{position:relative;overflow:hidden;background:linear-gradient(180deg,#E8532F 0%,#F59E4C 58%,#FFCB7A 100%);color:var(--atl)}
.hero.sunset .sky{position:absolute;inset:0;pointer-events:none}
.hero.sunset .sun{position:absolute;right:39%;top:250px;width:130px;height:130px;border-radius:50%;background:#FFE3A3}
.hero.sunset .rock{position:absolute;right:-3%;bottom:96px;width:60%;height:80%}
.hero.sunset .sea{position:absolute;left:0;right:0;bottom:0;height:120px;background:var(--atl)}
.hero.sunset .sea svg{position:absolute;left:0;top:22px;width:100%;height:24px}
.hero.sunset .wrap{position:relative;padding-block:64px 150px}
.hero.sunset h1{color:var(--atl)}
.hero.sunset .lede{color:var(--atl)}
.hero.sunset .fine{color:var(--atl)}
.hero.sunset .fine span::before{background-color:var(--atl)}
.hero.sunset .pill{background:rgba(255,255,255,.6);color:var(--atl)}
.hero.sunset .fdr-top{background:rgba(255,255,255,.75)}
.hero.sunset .panel{background:none;box-shadow:none;overflow:visible;height:600px;padding-top:40px}
.hero.sunset .panel::after,.hero.sunset .ico{display:none}
.hero.sunset .phone{box-shadow:0 0 0 1.5px #3A3A42 inset,0 60px 90px -30px rgba(15,23,36,.6)}
@media (max-width:1000px){
  .hero.sunset .wrap{padding-block:40px 120px}
  .hero.sunset .rock{right:-20%;width:120%;height:46%;bottom:80px}
  .hero.sunset .sun{right:12%;top:auto;bottom:36%;width:90px;height:90px}
  .hero.sunset .sea{height:110px}
  .hero.sunset .panel{height:560px;padding-top:0}
}
@media (max-width:620px){.hero.sunset .panel{height:520px}.hero.sunset .wrap{padding-bottom:100px}.hero.sunset .rock{height:38%}}

/* E: the story band */
.story{position:relative;overflow:hidden;padding:0;background:var(--atl);color:#fff}
.story .sky{position:absolute;left:0;right:0;top:0;height:560px;background:linear-gradient(180deg,#E8532F 0%,#F59E4C 62%,#FFCB7A 100%)}
.story .sun{position:absolute;left:63%;top:120px;width:120px;height:120px;border-radius:50%;background:#FFE3A3}
.story .rock{position:absolute;left:30%;top:60px;width:64%;height:500px}
.story .wave{position:absolute;left:0;top:584px;width:100%;height:24px}
.story .wrap{position:relative;min-height:820px;display:flex;flex-direction:column;justify-content:space-between;padding-block:96px 72px}
.story .eyebrow{color:var(--atl)}
.story .eyebrow::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 100 66'%3E%3Cpath d='M7.8 84.9 L15.4 78.2 L20.2 65.7 L24.1 47.4 L27 46 L29.4 49.4 L35.1 42.6 L40.9 34.5 L44.7 29.2 L46.6 30.2 L48.6 24.9 L51 23.4 L53.4 26.3 L56.7 37.4 L59.1 35 L61.5 31.6 L63.9 35 L67.3 43.6 L72.1 51.3 L78.8 62.8 L85.5 73.4 L92.2 83.9 L92.2 84.9 Z' fill='%231C2B44'/%3E%3C/svg%3E")}
.story h2{margin-top:14px;max-width:9.5em;font-size:clamp(36px,4.4vw,56px);color:var(--atl)}
.story .low{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:flex-end;margin-top:240px}
.story .low p{flex:1 1 520px;max-width:36em;margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#DCE3EC}
.story .btn-sand{background:var(--sand);color:var(--atl)}
.story .btn-sand:hover{background:#FFE3A3}
@media (max-width:900px){
  .story .sky{height:520px}
  .story .rock{left:-10%;width:120%;height:330px;top:190px}
  .story .sun{left:auto;right:10%;top:200px;width:80px;height:80px}
  .story .wave{top:530px}
  .story .wrap{padding-block:64px 56px;min-height:0}
  .story .low{margin-top:410px}
}

/* F: the near-black of the app pictures, chat bubbles, timelines and dark tiles becomes Atlantic navy */
:root{--black:#1C2B44}
.plan:not(.best) .btn-line{box-shadow:0 0 0 1.5px var(--teal) inset;color:var(--teal)}
.plan:not(.best) .btn-line:hover{background:var(--teal);color:#fff}

/* F: a horizon line between sections */
.horizon{position:relative;height:84px;margin:-42px 0;z-index:1;pointer-events:none}
.horizon svg.w{position:absolute;left:0;top:46px;width:100%;height:20px}
.horizon svg.r{position:absolute;left:calc(50% - 46px);top:4px;width:92px;height:58px}

/* F: pricing, the Family card in Atlantic navy */
.plan.best{background:linear-gradient(160deg,var(--atl) 0%,var(--teal-deep) 100%);box-shadow:0 40px 70px -40px rgba(28,43,68,.65)}
.plan.best .tag{background:var(--amber);color:var(--atl);font-weight:700}
.plan.best .btn-white,.plan.best .btn-primary{background:#7FCBB2;color:#0F1724}
.plan.best .btn-white:hover,.plan.best .btn-primary:hover{background:#9AD8C3}

/* F: emergency access in Atlantic navy, not purple-black */
.legacy{background:linear-gradient(170deg,var(--atl),#121D2F 75%)}

/* F: the footer ends at sea */
.fcard{background:var(--atl);position:relative}
.fcard::before{content:"";display:block;height:120px;margin:-60px -56px 52px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 100 66'%3E%3Cpath d='M7.8 84.9 L15.4 78.2 L20.2 65.7 L24.1 47.4 L27 46 L29.4 49.4 L35.1 42.6 L40.9 34.5 L44.7 29.2 L46.6 30.2 L48.6 24.9 L51 23.4 L53.4 26.3 L56.7 37.4 L59.1 35 L61.5 31.6 L63.9 35 L67.3 43.6 L72.1 51.3 L78.8 62.8 L85.5 73.4 L92.2 83.9 L92.2 84.9 Z' fill='%2317393A'/%3E%3Cpath d='M7.8 84.9 L15.4 78.2 L20.2 65.7 L24.1 47.4 L27 46 L29.4 49.4 L35.1 42.6 L40.9 34.5 L44.7 29.2 L46.6 30.2 L48.6 24.9 L51 23.4 L47.1 42.6 L51.9 58 L44.2 84.9 Z' fill='%234FA08A'/%3E%3C/svg%3E") no-repeat right 8% bottom/auto 112px,radial-gradient(circle at 70% 40%,#FFE3A3 0 34px,transparent 35px),linear-gradient(180deg,#F59E4C 0%,#FFCB7A 100%)}
.wordmark{color:#24365A}
@media (max-width:640px){.fcard::before{margin:-44px -22px 40px;height:96px;background-size:auto 90px,auto,auto}}

/* 0.98.0 review fixes: a light rock on dark bands, the Why Skellig label on a chip on phones, navy hovers and phone bar */
.legacy .eyebrow::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 100 66'%3E%3Cpath d='M7.8 84.9 L15.4 78.2 L20.2 65.7 L24.1 47.4 L27 46 L29.4 49.4 L35.1 42.6 L40.9 34.5 L44.7 29.2 L46.6 30.2 L48.6 24.9 L51 23.4 L53.4 26.3 L56.7 37.4 L59.1 35 L61.5 31.6 L63.9 35 L67.3 43.6 L72.1 51.3 L78.8 62.8 L85.5 73.4 L92.2 83.9 L92.2 84.9 Z' fill='%238FD0B3'/%3E%3C/svg%3E")}
.btn-primary:hover{background:#2A3D5E}
@media (max-width:760px){.stickybar{background:rgba(28,43,68,.96)}}
@media (max-width:900px){.story .eyebrow{display:inline-flex;background:rgba(255,255,255,.6);padding:6px 12px;border-radius:999px}}

/* 0.98.1 (Omri 03/11): on phones and tablets the phone picture no longer hides the rock.
   The phone moves to the right and gets a little smaller, the rock stands on the left with its peak in view, the sun sits between them.
   The app picture also uses the app's real rock-teal tab colour, not the old coral. */
.tab.on{color:var(--teal)}
.tab.on::before{background:rgba(36,88,82,.12)}
@media (max-width:1000px){
  .hero.sunset .panel{justify-content:flex-end;padding-right:4%}
  .hero.sunset .rock{left:-14%;right:auto;width:88%;height:60%;bottom:80px}
  .hero.sunset .sun{left:calc(100% - 520px);right:auto;top:auto;bottom:500px;width:96px;height:96px}
  .hero.sunset .filed{display:none}
}
@media (max-width:620px){
  .hero.sunset .device{transform:scale(.76);transform-origin:right top}
  .hero.sunset .panel{height:430px;padding-top:20px;padding-right:0}
  .hero.sunset .rock{left:-52%;width:142%;bottom:70px}
  .hero.sunset .sun{left:calc(100% - 310px);bottom:440px;width:74px;height:74px}
}

/* 0.98.2: phone menu (burger) */
.burger{display:none}
.mnav{display:none}
@media (max-width:880px){
  .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;border:0;border-radius:12px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
  @media (hover:hover){.burger:hover{background:var(--grey)}}
  .burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--black);transition:transform .25s var(--ease),opacity .2s}
  .top.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .top.open .burger span:nth-child(2){opacity:0}
  .top.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .top.open{background:#fff;border-bottom-color:var(--line)}
  .top .actions{gap:2px}
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow:auto;overscroll-behavior:contain;cursor:auto;background:#fff;padding:6px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 30px 40px -20px rgba(28,43,68,.35);animation:mnavIn .22s var(--ease)}
  .mnav[hidden]{display:none}
  .mnav::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#E8532F,#F59E4C,#FFCB7A)}
  .mnav nav{display:flex;flex-direction:column}
  .mnav nav a{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;border-bottom:1px solid var(--line);font:600 19px/1.2 var(--f-app);letter-spacing:-.01em;color:var(--black);text-decoration:none}
  .mnav nav a::after{content:"";width:8px;height:8px;border-top:2px solid var(--teal);border-right:2px solid var(--teal);transform:rotate(45deg);margin-right:4px;opacity:.7}
  .mnav-cta{display:grid;gap:10px;margin-top:20px}
  .mnav-cta .btn{width:100%}
  .mnav-ip{margin:16px 0 0;font-size:14.5px;color:var(--fg-2);text-align:center}
  .mnav-ip a{color:var(--teal);font-weight:600}
  html.mnav-on{overflow:hidden}
  html.mnav-on body{cursor:pointer}
  html.mnav-on body::after{content:"";position:fixed;inset:0;z-index:19;background:rgba(28,43,68,.4);animation:mnavFade .2s ease}
  html.mnav-on .stickybar{visibility:hidden}
}
@media (max-width:420px){.top .signin{padding:10px 10px}}
@media (min-width:600px) and (max-width:880px){.mnav nav,.mnav-cta,.mnav-ip{max-width:560px;margin-inline:auto}}
@keyframes mnavFade{from{opacity:0}to{opacity:1}}
@keyframes mnavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mnav{animation:none}.burger span{transition:none}}

/* 0.99.4: a little air between a step's text and its grey picture panel (Omri, phone screenshot) */
.step p{margin-bottom:24px}

/* 0.99.8: the story names the films; the trademark line sits under it, small */
.story .low p .tm{display:block;margin-top:14px;font-size:12px;line-height:1.5;color:#9FB0C4}
@media (min-width:901px){.story .wrap{min-height:980px}}