/* Paxhint site, below the first screen. The first screen's rules are inlined in each page (<style id="critical">). */

h2{font-size:var(--s-head)}
.soft{color:var(--soft)}
.small{font-size:var(--s-sm);line-height:1.43}
.lead{font-size:var(--s-lead);line-height:1.33;letter-spacing:-0.02em}
.sec{margin-top:120px}
#privacy{margin-top:160px}
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:0.9em;background:var(--t3);padding:2px 4px;border-radius:4px}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand-hi);font-weight:600;transition:text-decoration-color 300ms var(--ease)}
.link:hover{text-decoration-color:var(--ink)}

.btn-sm{min-height:40px;padding:8px 12px;font-size:var(--s-sm)}

/* Reveal: hidden only when the script runs, so nothing is lost without it */
.js [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* Signature: the shutter on the hero film, once */
.js .h-them .shutter{animation:shutter 1100ms var(--ease) 120ms both}
.js .h-them .shutter img{animation:settle 1400ms var(--ease) 120ms both}
@keyframes shutter{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}
.js .h-you .shot{animation:rise 900ms var(--ease) 500ms both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- The live demo: the copilot panel alone ---------- */
.demo-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;margin-bottom:24px}
.demo-head h2{grid-column:1/7}
.demo-head p{grid-column:7/13;font-size:var(--s-body)}
.demo{display:grid;grid-template-columns:62fr 38fr;gap:var(--gap);background:var(--t1);border-radius:12px;padding:var(--gap)}
.desk{position:relative;border-radius:4px;overflow:hidden;background:#000;min-height:600px;display:grid;place-items:center;padding:48px 24px;isolation:isolate}
.desk>picture{position:absolute;inset:0;z-index:-1}
.desk>picture img{width:100%;height:100%;object-fit:cover;opacity:0.5}
.desk .reopen{position:absolute;left:24px;bottom:24px}
.desk .reopen[hidden]{display:none}
.desk .tag{position:absolute;left:16px;top:16px;background:#000;color:var(--ink);font-size:var(--s-sm);font-weight:600;padding:8px 12px}

.ctrl{display:flex;flex-direction:column;gap:12px;padding:16px}
.ctrl h3{font-size:var(--s-body);letter-spacing:-0.01em;line-height:1.3}
.hold{min-height:72px;width:100%;font-size:var(--s-body);white-space:nowrap;padding-inline:12px;user-select:none;-webkit-user-select:none;touch-action:none}
.hold kbd{font:inherit;background:#000;color:var(--ink);padding:2px 8px;border-radius:4px}
.hold[aria-pressed="true"]{background:var(--brand-hover);transform:scale(0.98)}
.ctrl .tip{font-size:var(--s-sm);color:var(--soft)}
.mode{display:flex;background:#343434;border-radius:6px;padding:2px;gap:2px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font)}
.mode button{flex:1;border:0;background:none;color:#a8a8a8;font-family:inherit;font-size:var(--s-sm);font-weight:400;padding:8px;border-radius:4px;cursor:pointer;transition:background-color 300ms var(--ease)}
.mode button:hover{background:var(--t4)}
.mode button[aria-pressed="true"]{background:#6b6b6b;color:#fff;font-weight:600}
.prof{background:#000;border-radius:4px;padding:12px 16px;font-size:var(--s-sm);line-height:1.43;display:flex;flex-direction:column;gap:4px}
.prof .fn{color:var(--brand-hi);font-weight:600}
.prof p+.fn{margin-top:8px}
.js .h-them .shutter img{animation:settle 1400ms var(--ease) 120ms both,drift 24s ease-in-out 1.6s infinite alternate}
@keyframes drift{from{transform:none}to{transform:scale(1.06) translate(-1.5%,-1%)}}
.ctrl .src{margin-top:auto;font-size:var(--s-sm);color:var(--soft)}
.demo-foot{margin-top:16px;font-size:var(--s-sm);color:var(--soft);max-width:72ch}

/* ---------- How it works: one card, four fields ---------- */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.field{position:relative;min-height:72svh;border-radius:var(--r);overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.f1{background:var(--t1)}.f2{background:var(--t3)}.f3{background:var(--bone);color:#000}.f3b{background:var(--brand);color:#fff}
.f2 picture{position:absolute;inset:0;z-index:0}
.f2 picture img{width:100%;height:100%;object-fit:cover;opacity:0.55}
.field>*{position:relative;z-index:1}
.field h2{font-size:var(--s-head)}
.field .card{margin-top:auto;margin-bottom:auto;transition:transform 300ms var(--ease)}
.field .card .seg{display:none}
.field:hover .card{transform:translateY(-6px)}
.field .card .bd{max-height:12em}
.card.pp{font-size:17.5px;height:auto;min-height:0;width:100%;box-shadow:none}
.field p.clause{font-size:var(--s-lead);line-height:1.33;letter-spacing:-0.02em;font-weight:600;max-width:16ch}

/* ---------- Tagline and the name ---------- */
.tag{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.tag .say{grid-column:1/8;background:var(--t1);border-radius:var(--r);padding:48px 24px}
.tag h2{max-width:680px;font-size:var(--s-head)}
.tag .say p{margin-top:32px;max-width:52ch}
.tag .say .name{margin-top:24px;font-size:var(--s-sm);color:var(--soft)}
.tag .pic{grid-column:8/13;border-radius:var(--r);overflow:hidden;min-height:420px;position:relative}
.tag .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.tag .pic.mark{background:#0b2016;display:grid;place-items:center}
.tag .pic.mark img{position:static;width:min(256px,60%);height:auto}

/* ---------- Proof: hidden from the share ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.proof>div{background:var(--t1);border-radius:var(--r);padding:24px;aspect-ratio:3/2;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.proof .ph{grid-column:span 2;aspect-ratio:auto;background:var(--brand);color:#fff;justify-content:space-between}
.proof .ph h2{font-size:var(--s-head);max-width:12ch}
.proof h3{font-size:var(--s-lead);letter-spacing:-0.02em;line-height:1.2}
.proof .yes{color:var(--brand-hi);font-weight:600}
.proof .warn{background:var(--bone);color:#000}
.proof .warn .yes{color:#000;text-decoration:underline;text-decoration-color:#000}
.proof .shot{padding:0;background:#000}
.proof .shot img{position:absolute;left:24px;top:24px;width:calc(100% - 48px);height:auto}
.proof .shot .cap{z-index:2}
.proof-note{margin-top:16px;font-size:var(--s-sm);color:var(--soft);max-width:80ch}

/* ---------- Features: close-ups on a board ---------- */
.feat{grid-auto-rows:auto}
.feat>div{border-radius:var(--r);overflow:hidden;position:relative;background:var(--t1);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:200px}
.feat .ui{position:static;max-width:100%;margin-bottom:auto;padding-bottom:16px}
.feat .ft p{margin-top:auto;color:var(--soft);font-size:var(--s-body);max-width:40ch}
.feat .ft{grid-column:span 6;justify-content:flex-start;background:var(--t2);min-height:0}
.feat .w6h4{grid-column:span 6}
.feat .w3h4{grid-column:span 3}
.feat .w6h2{grid-column:span 6}
.feat .w3h2{grid-column:span 3}
.feat h3{font-size:var(--s-body);letter-spacing:-0.01em;font-weight:600;line-height:1.3;position:relative;z-index:1}
.feat p{font-size:var(--s-sm);line-height:1.43;color:var(--soft);position:relative;z-index:1;max-width:44ch}
.feat .on-bone{background:var(--bone);color:#000}.feat .on-bone p{color:#2b2b2b}
.feat .on-brand{background:var(--brand);color:#fff}.feat .on-brand p{color:#fff}
.feat .on-3{background:var(--t3)}
.ui{position:absolute;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font);letter-spacing:0;line-height:1.2}
.ui-files{left:20px;top:20px;font-size:28px;display:flex;flex-direction:column;gap:6px;width:calc(100% + 40px)}
.ui-files li{display:flex;align-items:center;gap:0.5em;background:#2a2a2a;border-radius:0.25em;padding:0.25em 0.5em;color:#eee}
.ui-files li:nth-child(2){background:#2a5bd7;color:#fff}
.ui-files .doc{display:inline-block;width:0.7em;height:0.9em;background:#d9d9d9;border-radius:0.08em;flex:none}
.ui-seg{display:flex;background:#d6d0c1;border-radius:0.35em;padding:0.1em;font-size:44px;white-space:nowrap}
.ui-seg span,.ui-seg li{padding:0.15em 0.5em;border-radius:0.28em;color:#333}
.ui-seg span[aria-current],.ui-seg li[aria-current]{background:#fff;color:#000}
.ui-seg.v{flex-direction:column;left:20px;top:20px;width:calc(100% + 60px);font-size:36px}
.ui-seg.dark{background:#2b2b2b;font-size:18px;left:20px;top:20px;right:20px;flex-wrap:wrap;white-space:normal;gap:2px}
.ui-seg.dark span{color:#e6e6e6}
.ui-seg.dark span[aria-current]{background:#5c5c5c;color:#fff}
.ui-keys{left:20px;top:22px;display:flex;gap:12px;font-size:36px}
.ui-keys span{background:#0d0d0d;color:#f2f2f2;border-radius:0.25em;padding:0.9em 0.6em 0.3em;min-width:2.4em;font-size:0.8em}
.ui-status{left:20px;top:18px;font-size:54px;font-weight:600;color:#fff;display:flex;align-items:center;gap:0.3em;white-space:nowrap}
.ui-status .dot{width:0.3em;height:0.3em;border-radius:50%;background:#fff}
.ui-level{left:20px;top:100px;width:calc(100% + 40px);height:14px;background:rgba(255,255,255,0.25);border-radius:7px}
.ui-level b{display:block;width:62%;height:100%;background:#fff;border-radius:7px}
.ui-field{left:20px;top:22px;font-size:30px;background:#262626;color:#eee;padding:0.35em 0.5em;border-radius:0.25em;white-space:nowrap;width:calc(100% + 40px)}
.ui-field .caret{display:inline-block;width:0.08em;height:1em;background:var(--brand-hi);vertical-align:-0.15em;margin-left:0.05em}
.ui-langs{left:20px;top:16px;font-size:24px;line-height:1.35;font-weight:600;color:#fff;columns:2;column-gap:24px}
.feat .crop{padding:0;background:#1e1e1e}
.feat .crop picture{position:absolute;left:0;top:0;width:150%}
.feat .crop .cap{z-index:2;top:16px;bottom:auto}

/* ---------- Privacy: one word, filled bars ---------- */
.priv{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.priv .col{grid-column:1/7;container-type:inline-size}
.priv h2{font-size:clamp(48px,15vw,128px);line-height:0.8;letter-spacing:-0.06em;font-weight:700;margin-bottom:20px;margin-left:-0.04em}
.bars{display:flex;flex-direction:column;gap:6px}
.bars details{background:var(--t1);border-radius:var(--r)}
.bars summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 20px;font-weight:600;cursor:pointer;transition:background-color 300ms var(--ease);border-radius:var(--r)}
.bars summary::-webkit-details-marker{display:none}
.bars summary:hover{background:var(--t3)}
.bars summary::after{content:"+";font-size:var(--s-lead);font-weight:400;transition:transform 300ms var(--ease)}
.bars details[open] summary::after{transform:rotate(45deg)}
.bars details p{padding:0 20px 20px;max-width:56ch}
.priv .side{grid-column:7/13;display:flex;flex-direction:column;gap:var(--gap);position:sticky;top:16px}
.priv .side .tile{background:#1e1e1e}
.priv .side .tile img{width:100%;height:auto}
.priv .side .txt{background:var(--t2);border-radius:var(--r);padding:24px}

/* ---------- Pricing: two plans that step up ---------- */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.price .hd{background:var(--t1);border-radius:var(--r);padding:28px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.price .hd h2{font-size:var(--s-head);max-width:12ch}
.price .hd p{max-width:40ch}
.plan{border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.plan .in{padding:28px 24px;flex:1;display:flex;flex-direction:column;gap:8px}
.plan h3{font-size:var(--s-lead);letter-spacing:-0.02em}
.plan .amt{font-size:var(--s-head);font-weight:700;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.plan .amt small{font-size:var(--s-body);font-weight:400;letter-spacing:0;margin-left:4px}
.plan ul{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.plan .strip{min-height:64px;display:flex;align-items:center;padding:0 24px;font-weight:600}
.p2{background:var(--t3)}.p2 .strip{background:var(--t4);color:var(--ink)}
.p3{background:var(--brand);color:#fff}.p3 .strip{background:#116a40;color:#fff}
.next{margin-top:16px;font-size:var(--s-sm);color:var(--soft);max-width:80ch}

/* ---------- FAQ: question index, one answer ---------- */
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.faq .list{grid-column:1/6}
.faq .list h2{font-size:var(--s-head);margin-bottom:32px}
.faq .qa{margin-bottom:18px}
.faq .qa button{all:unset;cursor:pointer;display:flex;gap:12px;align-items:baseline;color:var(--soft);font-size:var(--s-body);line-height:1.4;transition:color 200ms var(--ease)}
.faq .qa button:focus-visible{outline:3px solid var(--brand-hi);outline-offset:3px}
.faq .qa button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--t4);flex:none;transform:translateY(-2px);transition:background-color 200ms var(--ease)}
.faq .qa button[aria-expanded="true"]{color:var(--ink)}
.faq .qa button[aria-expanded="true"]::before{background:var(--brand-hi)}
.faq .qa .a{padding:8px 0 0 20px;color:var(--ink)}
.faq .pane{grid-column:7/13;position:sticky;top:120px;align-self:start;font-size:var(--s-lead);line-height:1.33;letter-spacing:-0.01em;max-width:34ch;transition:opacity 150ms var(--ease);display:none}
.js .faq .pane{display:block}
@media (min-width:901px){.js .faq .qa .a{display:none}}
@media (max-width:900px){.faq .list{grid-column:1/13}.js .faq .pane{display:none}.js .faq .qa .a{display:none}.js .faq .qa button[aria-expanded="true"]+.a{display:block}}

/* ---------- Final action: the tile row ---------- */
.cta{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.cta>div{min-height:360px;border-radius:var(--r);overflow:hidden;position:relative}
.cta .c{grid-column:1/13;background:var(--brand);color:#fff;padding:40px;display:grid;grid-template-columns:7fr 5fr;column-gap:24px;row-gap:16px;align-content:center}
.cta .c>*{grid-column:1}
.cta .c .cta-price{grid-column:2;grid-row:1/4;align-self:end;justify-self:end;text-align:right;font-size:var(--s-lead);line-height:1.33;font-weight:600}
.cta .c .cta-price span{display:block;font-size:var(--s-display);font-weight:600;letter-spacing:-0.055em;line-height:0.9}
.cta .c h2{font-size:var(--s-head)}
.cta .c p{max-width:52ch}

/* ---------- Footer: the mark, built large ---------- */
.foot{margin-top:96px;padding-bottom:max(32px,env(safe-area-inset-bottom))}
.wordmark{font-size:var(--s-display);font-weight:600;letter-spacing:-0.055em;line-height:0.9;margin-left:-0.04em}
.links{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:56px;font-size:var(--s-sm)}
.links nav{grid-column:span 2;display:flex;flex-direction:column;gap:8px}
.links nav a{text-decoration:none;color:var(--soft)}
.links nav a:hover{color:var(--ink)}
.links .contact{grid-column:9/13;display:flex;flex-direction:column;gap:8px}
.links .contact a{font-size:var(--s-lead);font-weight:600;letter-spacing:-0.02em;text-decoration:none}
.links .contact a:hover{color:var(--brand-hi)}
.last{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;font-size:var(--s-sm);color:var(--soft)}
.last .btn{min-height:40px;font-size:var(--s-sm);white-space:nowrap}

/* ---------- Text pages: privacy, support, 404 ---------- */
.page{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:var(--gap)}
.page .head{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.page .head .t{grid-column:1/8;background:var(--t1);border-radius:var(--r);padding:24px;min-height:52svh;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.page .head h1{font-size:min(var(--s-display),6rem);font-weight:600;letter-spacing:-0.055em;line-height:0.95}
.page .head .lead{max-width:36ch}
.page .head .pic{grid-column:8/13;border-radius:var(--r);overflow:hidden;position:relative;min-height:260px}
.page .head .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page .body{grid-column:1/8;padding:48px 24px 0}
.page .aside{grid-column:8/13;padding-top:48px;display:flex;flex-direction:column;gap:var(--gap)}
.page .aside>div{background:var(--t2);border-radius:var(--r);padding:24px}
.page .body h2{font-size:var(--s-lead);letter-spacing:-0.02em;margin:40px 0 12px}
.page .body h2:first-child{margin-top:0}
.page .body p+p,.page .body ul+p,.page .body p+ul{margin-top:12px}
.page .body ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.page .body ol{list-style:decimal;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.page .aside picture img{width:100%;height:auto;border-radius:var(--r)}
.lost{grid-column:1/13;min-height:56svh;background:var(--t1);border-radius:var(--r);padding:48px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.lost h1{font-size:var(--s-display);font-weight:600;letter-spacing:-0.055em;line-height:0.9}
.lost .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ---------- Narrower screens ---------- */
@media (max-width:1100px){
  .demo{grid-template-columns:1fr}
  .demo-head h2,.demo-head p{grid-column:1/13}
  .how{grid-template-columns:1fr}
  .field{min-height:0}
  .proof{grid-template-columns:1fr 1fr}
  .feat{grid-template-columns:repeat(6,1fr)}
  .feat .ft,.feat .w6h4,.feat .w6h2{grid-column:span 6}
  .feat .w3h4,.feat .w3h2{grid-column:span 3}
  .ui-seg.v{font-size:32px}
  .tag .say{grid-column:1/13}.tag .pic{grid-column:1/13;min-height:320px}
  .priv .col,.priv .side{grid-column:1/13;position:static}
  .price{align-items:stretch}
  .price{gap:24px;grid-template-columns:1fr}
  .price .hd{height:auto}
  .plan{height:auto}
  .plan .in{padding-bottom:48px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-content:start}
  .plan .in h3,.plan .in .amt{grid-column:1}
  .plan ul{grid-column:2;grid-row:1/span 2;margin-top:0}
  .links nav{grid-column:span 4}
  .links .contact{grid-column:1/13}
  .page .body,.page .aside{grid-column:1/13}
  .page .head .t{grid-column:1/13}.page .head .pic{grid-column:1/13}
}
@media (max-width:640px){
  :root{--s-head:1.875rem}
  .tag .say{padding:32px 16px}
  .js [data-reveal]{opacity:1}
  .sec{margin-top:96px}
  #privacy{margin-top:120px}
  .plan .in{grid-template-columns:1fr}
  .plan ul{grid-column:1;grid-row:auto;margin-top:12px}
  .demo{padding:4px;border-radius:var(--r)}
  .desk{min-height:0;padding:56px 8px 24px}
  .pp{font-size:min(16px,calc((100vw - 56px) / 26.25))}
  .card.pp{font-size:17.5px}
  .how{grid-template-columns:1fr}
  .field{min-height:0}
  .proof{grid-template-columns:1fr 1fr;gap:6px}
  .proof>div{aspect-ratio:auto;min-height:150px;padding:16px}
  .proof .ph{grid-column:span 2}
  .proof h3{font-size:var(--s-body)}
  .proof .shot{grid-column:span 2;min-height:300px}
  .proof .test{grid-column:span 2}
  .feat{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:6px}
  .feat .ft{grid-column:span 2;grid-row:span 2}
  .feat .w6h4,.feat .w3h4{grid-column:span 2;grid-row:span 3}
  .feat .w6h2{grid-column:span 2;grid-row:span 2}
  .feat .langs{grid-row:span 3}
  .feat .w3h2{grid-column:span 1;grid-row:span 2}
  .feat .w3h2 p{display:none}
  .feat>div{padding:16px}
  .ui-keys{font-size:24px}.ui-status{font-size:36px}.ui-seg.dark{font-size:16px}.ui-field{font-size:20px}.ui-langs{font-size:16px}.ui-seg,.ui-seg.v{font-size:24px}.ui-files{font-size:22px}
  .cta .c{min-height:0;padding:24px}
  .cta>div{min-height:0}
  .links nav{grid-column:span 6}
  .links .contact{grid-column:1/13}
  .page .head .t,.page .head .pic{grid-column:1/13}.page .head .t{min-height:0}.page .head h1{font-size:3rem}
  .page .body{padding:32px 8px 0}
  .lost .two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .tag h2 .w{opacity:1}
  .pp .caret{animation:none}
}

.ill{position:absolute;left:16px;top:16px;z-index:2;background:rgba(0,0,0,0.72);color:var(--ink);font-size:var(--s-sm);font-weight:600;padding:4px 8px;border-radius:4px}

/* ---------- Features additions ---------- */
.ui-lines{left:20px;top:16px;font-size:16px;line-height:1.3;display:flex;flex-direction:column;gap:4px;color:#000;width:calc(100% + 20px);white-space:nowrap}
.ui-lines li{color:#5a5854}
.ui-lines li:nth-child(2){color:#33312e}
.ui-lines li:last-child{color:#000;font-weight:600}

/* ---------- Profiles ---------- */
.profiles{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.profiles>div{border-radius:var(--r);padding:24px;min-height:440px}
.profiles .pa{grid-column:1/6;background:var(--t2);display:flex;flex-direction:column;gap:24px}
.profiles .pa ul{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.profiles .pa li{padding-left:20px;position:relative}
.profiles .pa li::before{content:"";position:absolute;left:0;top:0.6em;width:8px;height:8px;border-radius:50%;background:var(--brand-hi)}
.profiles .pb{grid-column:6/9;background:var(--t1);display:grid;place-items:center}
.menu{width:100%;max-width:300px;background:#1e1e1e;border-radius:10px;padding:6px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font);font-size:14px;line-height:1.3;color:#e6e6e6;box-shadow:0 0 0 1px rgba(255,255,255,0.12),0 16px 40px rgba(0,0,0,0.5)} /* taste-skill-ignore: an open macOS menu floats */
.menu .mt{background:#2e2e2e;border-radius:6px;padding:8px 12px;text-align:center;font-weight:500;display:flex;justify-content:center;gap:6px}
.menu ul{display:flex;flex-direction:column;padding:6px 0}
.menu ul+ul{border-top:1px solid #343434} /* taste-skill-ignore: the menu's own separator (data-ui) */
.menu li{padding:5px 12px 5px 28px;border-radius:5px;position:relative}
.menu li.on{font-weight:600}
.menu li.on::before{content:"";position:absolute;left:12px;top:0.45em;width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.profiles .pc{grid-column:9/13;background:var(--bone);color:#000;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.files .fold{font-weight:600;font-size:var(--s-body);margin-bottom:12px}
.files ul{display:flex;flex-direction:column;gap:6px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font);font-size:18px}
.files li{display:flex;align-items:center;gap:10px;background:#2a2a2a;color:#eee;border-radius:6px;padding:8px 12px}
.files .doc{width:13px;height:16px;background:#d9d9d9;border-radius:2px;flex:none}
.files .segs{margin-top:20px;display:flex;background:#d6d0c1;border-radius:6px;padding:2px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font);font-size:14px}
.files .segs span{flex:1;text-align:center;padding:6px 4px;border-radius:4px;color:#333}
.files .segs span.on{background:#fff;color:#000}
.pcap{font-size:var(--s-sm)}
@media (max-width:1100px){.profiles .pa{grid-column:1/13;min-height:0}.profiles .pb{grid-column:1/7}.profiles .pc{grid-column:7/13}}
@media (max-width:640px){.profiles .pb,.profiles .pc{grid-column:1/13;min-height:0}.ui-lines{font-size:15px}}

.ethic{margin-top:24px;font-size:var(--s-lead);line-height:1.33;letter-spacing:-0.02em;font-weight:600;color:var(--brand-hi);max-width:36ch}
.page .head .pic.shotpic{background:#1e1e1e}
.page .head .pic.shotpic img{object-fit:cover;object-position:50% 0}
.side-pp{font-size:min(16px,calc((100vw - 48px) / 26.25))}
@media (min-width:1101px){.side-pp{font-size:min(16px,calc((41.6vw - 24px) / 26.25))}}

/* Feature fragments sit in the flow of their tile and never run past its inner edge */
.feat .ui-status{font-size:clamp(28px,3.6vw,54px);white-space:normal;margin-bottom:12px;padding-bottom:0}
.feat .ui-level{width:100%;flex:none;margin-bottom:auto}
.feat .ui-field{width:auto;font-size:clamp(18px,1.8vw,28px);white-space:normal;overflow-wrap:anywhere;align-self:flex-start}
.feat .ui-lines{width:auto;white-space:normal}
.feat .ui-seg.dark{font-size:18px;align-self:flex-start}
.feat .ui-langs{columns:2}
@media (max-width:640px){
  .feat>div{min-height:0}
  .feat .ui-status{font-size:24px}
  .feat .ui-field{font-size:16px}
  .feat .ui-keys{font-size:22px}
  .feat .ui-lines{font-size:15px}
}

#pp{height:auto;min-height:20em}
#pp .bd{flex:1 0 auto}
.hold{white-space:normal}
/* Small copies of the panel wrap their one-line texts instead of cutting them */
.pp .sf .ph-t{white-space:normal;text-overflow:clip}
.pp .st{white-space:normal}
@media (max-width:640px){.side-pp .seg{display:none}}

/* 404 */
.lost-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.lost-top img{width:clamp(72px,12vw,160px);height:auto}
.lost-row{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.lost-row>*{border-radius:var(--r);overflow:hidden;min-height:320px;position:relative}
.lr-panel{background:var(--t2);display:grid;place-items:center;padding:24px}
.lost-pp{font-size:min(14px,calc((100vw - 96px) / 26.25));height:auto}
@media (min-width:1101px){.lost-pp{font-size:min(14px,calc((33vw - 72px) / 26.25))}}
.lr-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1100px){.lost-row{grid-template-columns:1fr}}

@media (max-width:1100px){.cta .c{grid-template-columns:1fr}.cta .c .cta-price{grid-column:1;grid-row:auto;justify-self:start;text-align:left}}