/* Staten website. One stylesheet for every page (EN and sr/). Editorial look: a paper with figures and tables. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-normal.woff2) format("woff2");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:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext-opsz-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-italic.woff2) format("woff2");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:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext-opsz-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2");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:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--paper:#FAFAF7;--ink:#121212;--text:#33332F;--muted:#55554F;--faint:#6B6B66;--rule:#D9D9D2;--hair:#E3E3DC;--accent:#B3471F;--panel:#F2F2EE;
  --serif:"Newsreader",Georgia,serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent);text-underline-offset:3px}a:hover{color:var(--ink)}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
.mono{font-variant-numeric:tabular-nums;font-weight:500}
.lab{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.acc{color:var(--accent)}
.note{font-size:14px;color:var(--muted)}
.lead{font-size:19px;color:var(--text);max-width:36em}
.vh{position:absolute;left:-9999px}
kbd{font-family:inherit;font-weight:500;font-size:13px;border:1px solid var(--ink);border-bottom-width:2px;padding:1px 6px;border-radius:2px;background:#fff}

/* type scale */
.h1{font-size:clamp(44px,5.5vw,76px);line-height:1.02;max-width:13em}
.h1.hero{font-size:clamp(48px,6vw,84px);line-height:1;max-width:none}
.h2{font-size:clamp(36px,4vw,56px);line-height:1.05;max-width:16em}
.h3s{font-size:32px;line-height:1.15}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;background:var(--accent);color:#fff!important;text-decoration:none;font-weight:500;border-radius:2px;transition:background .2s}
.btn:hover{background:var(--ink)}
.btn.sm{min-height:44px;padding:0 18px}
.btn.inv{background:var(--paper);color:var(--ink)!important}.btn.inv:hover{background:var(--accent);color:#fff!important}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn2{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;color:var(--ink)!important;text-decoration:underline;text-underline-offset:4px}
.btnline{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid var(--ink);color:var(--ink)!important;text-decoration:none;font-weight:500;border-radius:2px;transition:background .2s}
.btnline:hover{background:var(--ink);color:#fff!important}

/* header / nav */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.top a{color:var(--ink);text-decoration:none}.top a:hover{color:var(--accent)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:28px;letter-spacing:-.02em}
.brand img{width:44px;height:44px}
.links{display:flex;gap:32px;font-size:15px}
.links a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.right{display:flex;align-items:center;gap:20px;font-size:15px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--ink);background:transparent;border-radius:2px;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:4px auto;transition:transform .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(2.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-2.75px) rotate(-45deg)}

/* layout helpers */
.g2{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.g2.eq{grid-template-columns:1fr 1fr}
.g4{display:grid;grid-template-columns:repeat(4,1fr)}
.pagehead{padding-top:88px;padding-bottom:72px}
.pagehead .lab{margin-bottom:28px}
.pagehead .lead{margin-top:28px}
.sec{display:grid;grid-template-columns:200px 1fr;gap:48px;padding:96px 0;border-top:1px solid var(--ink)}
.sec > .lab{margin:0}
.sec > div,.g2 > *{min-width:0}
.sec .lead,.sec .intro{margin-top:20px;max-width:38em;color:var(--text);font-size:17px}

/* home */
.hero-grid{padding-top:88px;padding-bottom:72px}
.tagline{margin-top:20px;font-size:clamp(26px,2.6vw,36px);line-height:1.15;font-style:italic;color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:36px}
.fig .lab b{color:var(--ink);font-weight:500}
.fig .ftitle{margin:10px 0 16px;font-style:italic;font-size:20px}
.plate{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);background:#fff;padding:12px 0}
.plate img{display:block;width:100%;height:auto}
.fig figcaption{margin-top:12px}
.facts{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.facts > div{padding:20px 20px 20px 0}
.facts p+p{margin-top:6px}
.who{margin-top:24px;font-size:15px;color:var(--muted)}.who .lab{margin-right:12px}

.morph{position:relative;background:#fff;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0}
.morph img{display:block;width:100%;height:auto;opacity:0;animation:mf 7.2s infinite}
.morph img+img{position:absolute;left:0;top:12px}
.morph img:nth-child(2),.sl:nth-child(2){animation-delay:1.2s}
.morph img:nth-child(3),.sl:nth-child(3){animation-delay:2.4s}
.morph img:nth-child(4),.sl:nth-child(4){animation-delay:3.6s}
.morph img:nth-child(5),.sl:nth-child(5){animation-delay:4.8s}
.morph img:nth-child(6),.sl:nth-child(6){animation-delay:6s}
@keyframes mf{0%,16%{opacity:1}18%,99%{opacity:0}100%{opacity:1}}
.steps{margin:0;padding:0}
.sl{list-style:none;padding:9px 0 9px 14px;border-left:2px solid var(--rule);color:var(--faint);font-size:15px;animation:sl 7.2s infinite}
.sl small{display:block;font-size:13px}
@keyframes sl{0%,16%{color:var(--ink);border-left-color:var(--accent)}18%,100%{color:var(--faint);border-left-color:var(--rule)}}
@media (prefers-reduced-motion:reduce){.morph img,.sl{animation:none}.morph img:last-child{opacity:1}.morph img:first-child{opacity:0}.sl:last-child{color:var(--ink);border-left-color:var(--accent)}}
.morph-grid{margin-top:56px;grid-template-columns:3fr 1fr;gap:40px;align-items:center}
.after{margin-top:32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.after .serif{font-style:italic;font-size:20px}

.win{border:1px solid var(--ink);background:#fff;border-radius:6px;overflow:hidden;margin:0}
.win-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--rule);background:var(--panel);font-size:12px;color:var(--muted)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:var(--rule);display:block}
.win-bar span{margin-left:8px}
.win img{display:block;width:100%;height:auto}
.win+figcaption,.shotcap{margin-top:10px}
.shots2{grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}

.apa{width:100%;border-collapse:collapse;font-size:16px}
.apa caption{text-align:left;padding-bottom:12px}
.apa caption .lab{color:var(--ink)}
.apa caption i{font-size:19px}
.apa thead tr{border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.apa tbody tr:last-child{border-bottom:2px solid var(--ink)}
.apa th{text-align:left;font-weight:500;padding:12px 16px 12px 0}
.apa td{padding:14px 16px 14px 0;vertical-align:top}
.apa .k{font-weight:500}.apa .d{color:var(--text)}.apa .m{color:var(--muted)}
.apa .r{text-align:right}.apa .pay{color:var(--accent);white-space:nowrap}
.scrollx{overflow-x:auto;margin-top:48px}

.work{margin-top:48px;gap:32px}
.work > div{border-top:1px solid var(--ink);padding-top:16px}
.work .mono{color:var(--accent);font-size:13px}
.work h3{margin:8px 0;font-size:18px;font-weight:600;line-height:1.3}
.work p:last-child{font-size:15px;color:var(--text)}
.thumbs{margin-top:56px;gap:16px}
.thumbs img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border:1px solid var(--rule);display:block}

.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.qlist{margin-top:40px;border-top:2px solid var(--ink)}
.qlist > div{grid-template-columns:2fr 3fr;gap:32px;padding:24px 0;border-bottom:1px solid var(--rule)}
.qlist > div:last-child{border-bottom:2px solid var(--ink)}
.qlist dt{font-family:var(--serif);font-size:22px;line-height:1.3}
.qlist dd{color:var(--text)}

.dark{background:var(--ink);color:var(--paper);margin-top:32px}
.dark .wrap{padding-top:112px;padding-bottom:112px}
.dark .g2{align-items:end}
.dark h2{font-size:clamp(44px,5.5vw,76px);line-height:1}
.dark .sub{margin:20px 0 32px;font-size:19px;color:#C9C9C2}
.dark .note,.dark .lab{color:#A8A8A0}
.dark .note{margin-top:16px}
.oslist{border-top:1px solid var(--paper);margin-top:12px}
.oslist a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #3A3A36;color:var(--paper);text-decoration:none}
.oslist a:hover span:first-child{color:#E8A283}
.oslist .mono{font-size:14px;color:#A8A8A0;text-align:right}

.next{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:48px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.next.ruled{border-top:1px solid var(--ink)}
.next .serif{font-size:36px}.next .d{color:var(--muted);font-size:16px}
.next .arr{font-family:var(--serif);font-size:48px;color:var(--accent);transition:transform .25s}
.next:hover{color:var(--ink)}.next:hover .arr{transform:translateX(8px)}
.ready{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:40px 0}
.ready .serif{font-size:28px}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-top:32px;padding-bottom:48px;font-size:14px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:24px}
.foot a{color:var(--ink);text-decoration:none}.foot a:hover{color:var(--accent)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.plan{padding:32px 28px 32px 0;display:flex;flex-direction:column;gap:20px}
.plan+.plan{border-left:1px solid var(--rule);padding-left:28px}
.plan .price{margin-top:8px;font-size:56px;line-height:1}
.plan .price.it{font-style:italic}
.plan .per{margin-top:8px;font-size:14px;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;font-size:15px;color:var(--text);flex:1}
.plan li{padding:8px 0;border-top:1px solid #E6E6E0}
.ruled-top{border-top:1px solid var(--ink);padding-top:20px}
.ruled-top p{margin:14px 0 0;color:var(--text)}
.ruled-top .btnline{margin-top:24px}
.band{padding-top:96px;padding-bottom:96px}

/* security */
.rows{border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:80px 280px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.row:last-child{border-bottom:2px solid var(--ink)}
.row .mono{color:var(--accent);font-size:14px}
.row h2{font-size:28px}.row p{color:var(--text)}
.quote{max-width:900px}
.quote .lab{margin-bottom:20px}
.quote blockquote{font-size:clamp(30px,3.6vw,48px);line-height:1.15;font-style:italic}

/* faq */
.faq{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
.toc{position:sticky;top:24px;list-style:none;margin:0;padding:0;font-size:15px}
.toc li{padding:10px 0;border-top:1px solid var(--rule)}
.toc li:last-child{border-bottom:1px solid var(--rule)}
.toc .mono{color:var(--accent);margin-right:10px}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--accent)}
.grp{margin-bottom:72px}
.grp h2{padding-bottom:12px;border-bottom:2px solid var(--ink);font-size:15px;font-weight:500}
.grp h2 .mono{color:var(--accent);margin-right:8px}
.qa{display:grid;grid-template-columns:2fr 3fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--rule)}
.qa dt{font-family:var(--serif);font-size:21px;line-height:1.3}
.qa dd{color:var(--text)}
.qa dd.cite{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink)}

/* atlas */
.tools{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:40px}
.tabs{display:inline-flex;border:1px solid var(--ink);border-radius:2px}
.tabs button{font:inherit;font-size:15px;min-height:44px;padding:0 22px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.search{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--ink);background:#fff;border-radius:2px;flex:1;max-width:520px;min-width:min(100%,280px)}
.search:focus-within{box-shadow:0 0 0 2px var(--accent)}
.search svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.search input{border:0;outline:0;font:inherit;font-size:16px;flex:1;background:transparent;color:var(--ink);min-width:0}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search kbd{font-size:12px;padding:0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px}
.chips .lab{margin-right:6px}
.chip{font:inherit;font-size:14px;min-height:36px;padding:0 14px;border:1px solid #CFCFC8;background:transparent;border-radius:999px;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
.atlas{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;padding-bottom:96px}
.side{position:sticky;top:24px}
.card{border-top:2px solid var(--accent);background:#fff;padding:24px;box-shadow:0 0 0 1px var(--hair)}
.card h2{margin:8px 0;font-size:32px;line-height:1.1}
.card > p{margin:0 0 20px;font-size:15px;color:var(--text)}
.card .soon{color:var(--accent)}
.rel{list-style:none;margin:0;padding:0;font-size:15px}
.rel li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--hair);align-items:center}
.rel .lab{display:block}
.rel button,.an button{font:inherit;padding:0;border:0;background:none;cursor:pointer;text-align:left}
.rel button{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.rel button:hover{color:var(--ink)}
.key{margin-top:24px;font-size:14px;color:var(--muted)}
.key p{margin-bottom:12px}
.key div{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.key span{display:flex;align-items:center;gap:8px}
.ch{padding:56px 0 8px;border-top:2px solid var(--ink)}
.ch+.ch{margin-top:24px}
.chh{display:flex;align-items:baseline;gap:18px;margin-bottom:8px}
.chh .mono{color:var(--accent)}
.chh h2{font-size:40px;line-height:1.1}
.sub{margin:28px 0 0;font-size:13px;font-weight:500;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--ink)}
.list{list-style:none;margin:0;padding:0}
.an{display:grid;grid-template-columns:250px 1fr 170px;gap:24px;padding:14px 0;border-bottom:1px solid var(--hair);align-items:baseline;transition:background .15s}
.an button{color:var(--ink);font-weight:500}
.an button:hover,.an button:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.an p{font-size:15px;color:var(--text)}
.an.soon button{color:var(--faint);font-weight:400}
.an.on{background:#fff;box-shadow:0 0 0 1px var(--accent);padding-left:14px;padding-right:14px;margin:0 -14px}
.an.on button{color:var(--accent)}
.an.near{background:#fff}
.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tags span{font-size:12px;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:0 8px;line-height:20px;white-space:nowrap}
.empty{padding:40px 0;color:var(--muted);font-size:17px}
.graphs{border-top:1px solid var(--ink);background:var(--panel)}
.graphs > .wrap{padding-top:96px;padding-bottom:96px}
.graphs .h2{font-size:clamp(40px,4.8vw,64px);line-height:1.02}
.graphs .sub{margin-top:56px;font-size:15px;color:var(--ink)}
.gg{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:20px}
.gcard{margin:0;cursor:default}
.gcard img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border:1px solid var(--rule);transition:border-color .15s,box-shadow .15s}
.gcard figcaption{margin-top:10px;font-size:15px}
.gcard figcaption span{display:block;color:var(--muted);font-size:14px}
.gcard figcaption em{display:block;font-style:normal;font-size:13px;color:var(--accent);margin-top:4px}
.gcard.on img{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.gcard.near img{border-color:var(--ink)}
.gg.focus .gcard:not(.on):not(.near){opacity:.45}

@media (max-width:1000px){
  .atlas{grid-template-columns:1fr;gap:32px}.side{position:static;order:-1}.key{display:none}
  .an{grid-template-columns:1fr;gap:4px}.tags{justify-content:flex-start}.gg{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .wrap{padding:0 16px}
  .links{display:none;position:absolute;left:0;right:0;top:72px;z-index:20;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--ink);padding:8px 16px 16px}
  .links.open{display:flex}.links a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .top{position:relative}.burger{display:block}.right .lang{display:none}.links .lang{display:block}
  .g2,.g2.eq,.morph-grid,.shots2{grid-template-columns:1fr;gap:40px}
  .g4{grid-template-columns:1fr 1fr}
  .sec{grid-template-columns:1fr;gap:20px;padding:64px 0}
  .qlist > div,.qa{grid-template-columns:1fr;gap:6px}
  .plans{grid-template-columns:1fr}.plan+.plan{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .row{grid-template-columns:1fr;gap:6px}
  .faq{grid-template-columns:1fr;gap:32px}.toc{position:static}
  .hero-grid,.pagehead{padding-top:56px;padding-bottom:48px}
  .dark .wrap{padding-top:72px;padding-bottom:72px}
  .next .serif{font-size:30px}
}
@media (min-width:901px){.links .lang{display:none}}
@media (max-width:560px){.gg{grid-template-columns:1fr}.facts > div{padding-right:12px}.top .btn.sm{padding:0 14px}}
.is-mobile .desk-only{display:none!important}
.mobile-only{display:none}.is-mobile .mobile-only{display:block}
/* legal pages + footer legal row (v3.10) */
.foot nav.legal{flex-basis:100%;gap:18px;font-size:13px}.foot nav.legal a{color:var(--muted)}
.legaltext{max-width:46em;padding-bottom:64px}.legaltext h2{margin:40px 0 10px}.legaltext p{margin:0 0 12px;line-height:1.65}
/* about (under Security) — two photos, the second shows on hover / tap (v3.11) */
.about{padding-top:72px;padding-bottom:40px}.about p{max-width:38em;line-height:1.7}.about .sig{font-size:22px;margin-top:20px}
.portrait{position:relative;margin:0;aspect-ratio:1/1;max-width:420px;border-radius:4px;overflow:hidden;background:var(--line,#e7e5dd)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.portrait .p2{opacity:0}.portrait:hover .p2,.portrait:focus-within .p2{opacity:1}.portrait:hover .p1{opacity:0}
.portrait.empty{display:grid;place-items:center}.portrait.empty span{font-size:96px;color:var(--muted,#8a877d)}
@media (prefers-reduced-motion:reduce){.portrait img{transition:none}}
/* pricing curve (v3.11) */
.curvebox{margin-top:16px}.curvebox svg{width:100%;height:auto;display:block;cursor:crosshair}
.curvebox .grid{stroke:var(--line,#e7e5dd);stroke-width:1}.curvebox .tick{font:12px var(--sans,system-ui);fill:var(--muted,#6b6b66)}
.curvebox .curve{fill:none;stroke:var(--accent,#B3471F);stroke-width:2.5}.curvebox .dot{fill:var(--accent,#B3471F);stroke:var(--paper,#FAFAF7);stroke-width:2}
.curvepick{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:14px}.curvepick input{flex:1;accent-color:var(--accent,#B3471F)}
.curveout{font-size:22px;margin-top:10px}
.statline{margin-top:18px;font-size:14px;color:var(--muted,#6b6b66)}
.about p{margin:0 0 14px}.about h2{margin:0 0 20px}

.hero-logo{margin:0;display:flex;align-items:center;justify-content:center}
.hero-logo canvas{display:block;width:min(100%,520px);aspect-ratio:1}
@media (max-width:860px){.hero-logo canvas{width:min(70vw,320px)}}

/* page transitions: a soft cross-fade between pages (browsers with view transitions) and a gentle rise on load */
@view-transition{navigation:auto}
header.top{view-transition-name:top}
::view-transition-old(root){animation:vt-out .2s ease-in both}
::view-transition-new(root){animation:vt-in .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
body>:not(header.top){animation:page-in .55s cubic-bezier(.2,.7,.2,1) both}
body>:not(header.top):nth-child(3){animation-delay:.06s}
body>:not(header.top):nth-child(n+4){animation-delay:.12s}
@keyframes page-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  body>:not(header.top){animation:none}
}