@font-face{font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/assets/fonts/geist-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono"; font-style:normal; font-weight:100 900; font-display:swap; src:url(/assets/fonts/geistmono-latin.woff2) format("woff2")}
  :root{
    --ground:#F2F2F2;
    --card:#FFFFFF;
    --ink:#141414;
    --ink-2:#4A4A4A;
    --muted:#7A7A7A;
    --line:#E4E4E4;
    --line-2:#D6D6D6;
    --chip:#FFFFFF;
    --chip-active:#141414;
    --chip-active-ink:#FFFFFF;
    --dot-off:#E3E3E3;
    --dot-on:#141414;
    --live:#22C55E;
    --logo-filter:none;
    --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -20px rgba(0,0,0,.18);
    --radius:22px;
    --font:"Geist","Geist Placeholder",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    --mono:"Geist Mono","SFMono-Regular",Menlo,Consolas,monospace;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#111111; --card:#1B1B1B; --ink:#F2F2F2; --ink-2:#C9C9C9; --muted:#8C8C8C;
      --line:#2A2A2A; --line-2:#363636; --chip:#1B1B1B; --chip-active:#F2F2F2; --chip-active-ink:#111111;
      --dot-off:#2E2E2E; --dot-on:#F2F2F2; --logo-filter:invert(1); --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.6);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --ground:#111111; --card:#1B1B1B; --ink:#F2F2F2; --ink-2:#C9C9C9; --muted:#8C8C8C;
    --line:#2A2A2A; --line-2:#363636; --chip:#1B1B1B; --chip-active:#F2F2F2; --chip-active-ink:#111111;
    --dot-off:#2E2E2E; --dot-on:#F2F2F2; --logo-filter:invert(1); --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.6);
    color-scheme:dark;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; overflow-x:hidden; overscroll-behavior-x:none}
  body{position:relative; overflow-x:clip; overscroll-behavior-x:none; width:100%}
  main, footer{overflow-x:clip}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:var(--font); font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"ss01","cv11";
  }
  a{color:inherit; text-decoration:none}
  button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
  :focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
  .wrap{width:min(1200px, calc(100% - 40px)); margin:0 auto}
  @media (max-width:640px){ .wrap{width:calc(100% - 32px)} }

  .ic-moon{display:none}
  :root[data-theme="dark"] .ic-moon{display:block}
  :root[data-theme="dark"] .ic-sun{display:none}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .ic-moon{display:block}
    :root:not([data-theme="light"]) .ic-sun{display:none}
  }
  html.theming, html.theming *{transition:background-color .25s ease, color .25s ease, border-color .25s ease !important}
  /* ---------- nav ---------- */
  .nav{display:flex; align-items:center; justify-content:space-between; padding:26px 0 0}
  .brand{display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:22px; letter-spacing:-.04em}
  .brand svg{width:26px; height:26px; display:block}
  .nav-actions{display:flex; gap:10px}
  .round{
    width:46px; height:46px; border-radius:999px; background:var(--card); box-shadow:var(--shadow);
    display:inline-flex; align-items:center; justify-content:center; transition:transform .18s ease;
  }
  .round:hover{transform:translateY(-1px)}
  .round svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
  .menu{
    position:absolute; right:0; top:58px; background:var(--card); border-radius:18px; box-shadow:var(--shadow);
    padding:10px; min-width:220px; display:none; z-index:20; border:1px solid var(--line);
  }
  .menu[data-open="true"]{display:block}
  .menu a{display:block; padding:10px 12px; border-radius:12px; font-size:15px}
  .menu a:hover{background:var(--ground)}
  .nav-right{position:relative}

  /* ---------- hero ---------- */
  .hero{padding:96px 0 56px; text-align:center}
  .badge{
    display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:999px;
    background:var(--card); border:1px solid var(--line); font-size:14px; color:var(--ink-2);
  }
  .badge i{width:8px; height:8px; border-radius:999px; background:var(--live); box-shadow:0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent)}
  h1{
    font-size:clamp(34px, 5.2vw, 56px); line-height:1.06; letter-spacing:-.03em; font-weight:500;
    margin:26px auto 18px; max-width:18ch; text-wrap:balance;
  }
  .lede{font-size:clamp(17px, 1.6vw, 20px); line-height:1.5; color:var(--muted); max-width:44ch; margin:0 auto; text-wrap:pretty}
  .cta-bar{
    margin:32px auto 0; max-width:560px; background:var(--card); border-radius:999px; box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:space-between; padding:6px 6px 6px 22px; gap:12px;
  }
  .cta-bar .hint{color:var(--muted); font-size:15px; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; font-weight:500; font-size:15px;
    background:var(--chip-active); color:var(--chip-active-ink); white-space:nowrap; transition:transform .18s ease, opacity .18s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  @media (max-width:520px){
    .cta-bar{border-radius:26px; flex-direction:column; align-items:stretch; padding:8px}
    .cta-bar .hint{padding:8px 12px 6px; white-space:normal}
    .btn{justify-content:center}
  }

  /* ---------- filters ---------- */
  .filters{
    position:sticky; top:0; z-index:10; padding:14px 0 16px; background:var(--ground);
    display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 calc(100% - 40px), transparent);
  }
  .filters::-webkit-scrollbar{display:none}
  .chip{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:999px;
    background:var(--chip); border:1px solid var(--line); font-size:15px; color:var(--ink); transition:background .18s, color .18s, border-color .18s;
  }
  .chip svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
  .chip[aria-pressed="true"]{background:var(--chip-active); color:var(--chip-active-ink); border-color:var(--chip-active)}
  .chip:hover:not([aria-pressed="true"]){border-color:var(--line-2)}

  /* ---------- grid ---------- */
  .grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; padding-bottom:8px}
  @media (max-width:980px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
  @media (max-width:600px){ .grid{grid-template-columns:1fr} }
  .card{
    position:relative; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:22px; display:flex; flex-direction:column; min-height:400px;
    transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s;
  }
  .card:hover{transform:translateY(-3px); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 24px 40px -24px rgba(0,0,0,.28)}
  .card[hidden]{display:none}
  .card-top{display:flex; justify-content:space-between; align-items:center; min-height:44px}
  .pick{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-2)}
  .pick svg{width:16px; height:16px}
  .go{
    width:44px; height:44px; border-radius:999px; background:var(--ground); display:inline-flex; align-items:center; justify-content:center;
    transition:background .18s, transform .18s;
  }
  .go svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s}
  .card:hover .go{background:var(--chip-active); color:var(--chip-active-ink)}
  .card:hover .go svg{transform:translate(1px,-1px)}
  .visual{height:196px; display:flex; align-items:center; justify-content:center; padding:16px 8px 20px}
  .visual svg{width:100%; max-width:220px; height:auto; display:block; overflow:visible}
  .visual .d{fill:var(--dot-off)} .visual .d.on{fill:var(--dot-on)}
  .visual .t{fill:var(--muted); font-family:var(--mono); font-size:9.5px; letter-spacing:.06em}
  .visual .big{fill:var(--ink); font-family:var(--font); font-size:52px; font-weight:500; letter-spacing:-.04em}
  .visual .brk{stroke:var(--line-2); fill:none; stroke-width:1.5}
  .meta{font-size:14px; color:var(--muted); display:flex; gap:8px; align-items:center}
  .meta span + span::before{content:"/"; color:var(--line-2); margin-right:8px}
  .card-foot{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:6px}
  .card h3{margin:0; font-size:17px; font-weight:500; letter-spacing:-.01em}
  .price{font-family:var(--mono); font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums}
  .price small{color:var(--muted); font-size:12px; margin-left:4px}
  .card .desc{flex:1; margin:14px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; text-wrap:pretty}
  .card a.stretch{position:absolute; inset:0; border-radius:var(--radius)}
  .terms{color:var(--muted); font-size:14px; max-width:70ch; margin:20px 0 0; line-height:1.55}

  /* ---------- text sections ---------- */
  .section{padding:88px 0 0}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
  h2{font-size:clamp(26px, 3vw, 34px); line-height:1.15; letter-spacing:-.025em; font-weight:500; margin:0 0 28px; max-width:24ch; text-wrap:balance}
  .cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
  @media (max-width:800px){ .cols{grid-template-columns:1fr} }
  .panel{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px}
  .panel h3{margin:0 0 18px; font-size:15px; font-weight:500; color:var(--muted)}
  .panel ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
  .panel li{padding:14px 0; border-top:1px solid var(--line); color:var(--ink-2); font-size:15.5px; line-height:1.5; text-wrap:pretty}
  .panel li:first-child{border-top:0; padding-top:0}
  .panel li:last-child{padding-bottom:0}
  .panel li strong{color:var(--ink); font-weight:500}

  .results{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
  @media (max-width:980px){ .results{grid-template-columns:repeat(2, minmax(0,1fr))} }
  @media (max-width:480px){ .results{grid-template-columns:1fr} }
  .tile{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 24px 22px; display:flex; flex-direction:column; gap:10px}
  .tile .num{font-size:40px; letter-spacing:-.04em; font-weight:500; line-height:1; font-variant-numeric:tabular-nums}
  .tile .who{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .tile p{margin:2px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; text-wrap:pretty}
  .note{color:var(--ink-2); font-size:16px; max-width:64ch; margin:22px 0 0; line-height:1.55; text-wrap:pretty}

  .notfit{margin-top:16px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:start}
  @media (max-width:800px){ .notfit{grid-template-columns:1fr; gap:10px} }
  .notfit h3{margin:0; font-size:15px; font-weight:500; color:var(--muted)}
  .notfit p{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.5; max-width:62ch; text-wrap:pretty}

  /* ---------- closing cta ---------- */
  .close{padding:96px 0 64px; text-align:center}
  .close h2{margin:0 auto 12px; max-width:22ch}
  .close p{color:var(--muted); margin:0 auto; max-width:46ch; text-wrap:pretty}
  .close .cta-bar{margin-top:28px}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line); padding:40px 0 36px; color:var(--ink-2); font-size:14px}
  .foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:24px}
  @media (max-width:800px){ .foot{grid-template-columns:1fr 1fr} }
  @media (max-width:480px){ .foot{grid-template-columns:1fr} }
  .foot h4{margin:0 0 10px; font-size:12px; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500}
  .foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
  .foot a:hover{text-decoration:underline; text-underline-offset:3px}
  .foot p{margin:10px 0 0; max-width:34ch; color:var(--muted); text-wrap:pretty}
  .legal{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}

  /* ---------- photo, logos ---------- */
  .trusted{margin:52px auto 0; text-align:center}
  .trusted .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 18px}
  .marquee{position:relative; overflow:hidden; width:100%; height:44px; contain:strict; touch-action:pan-y; mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
  .marquee .track{position:absolute; left:0; top:0; height:44px; display:flex; align-items:center; width:max-content; animation:marquee 52s linear infinite; will-change:transform}
  .marquee:hover .track{animation-play-state:paused}
  .marquee .set{display:flex; align-items:center; gap:72px; padding-right:72px}
  .marquee img{width:auto; opacity:.55; filter:var(--logo-filter); display:block; flex:0 0 auto}
  @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-33.3333%)} }
  @media (max-width:640px){ .marquee .set{gap:44px; padding-right:44px} .marquee img{transform:scale(.85)} }
  @media (prefers-reduced-motion: reduce){ .marquee{height:auto; contain:none} .marquee .track{position:static; height:auto; animation:none; width:auto; flex-wrap:wrap; justify-content:center} .marquee .set{flex-wrap:wrap; justify-content:center; padding-right:0} .marquee .set[aria-hidden]{display:none} .marquee{mask-image:none; -webkit-mask-image:none} }


  /* ---------- about bento ---------- */
  .bento{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:auto; gap:16px}
  .tile-b{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-width:0}
  .tile-b .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  .tile-b .v{font-size:17px; line-height:1.35; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty}
  .tile-b .v.big{font-size:38px; letter-spacing:-.04em; font-weight:500; line-height:1; font-variant-numeric:tabular-nums}
  .tile-b .v.mid{font-size:24px; letter-spacing:-.025em; font-weight:500; line-height:1.15}
  .tile-b .sub{color:var(--muted); font-size:14px; margin:0; line-height:1.5}
  .tile-b.photo{padding:0; overflow:hidden; position:relative; grid-column:span 2; grid-row:span 3; aspect-ratio:1/1; min-height:0}
  .tile-b.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .tile-b.photo .cap{position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 12px; border-radius:999px; background:var(--card); color:var(--ink); font-size:14px; box-shadow:var(--shadow)}
  .tile-b.photo .cap i{width:8px; height:8px; border-radius:999px; background:var(--live)}
  .tile-b.span2{grid-column:span 2}
  .tile-b.span4{grid-column:span 4}
  .tile-b.dark{background:var(--chip-active); color:var(--chip-active-ink)}
  .tile-b.dark .k{color:color-mix(in srgb, var(--chip-active-ink) 60%, transparent)}
  .tile-b.dark .v{color:var(--chip-active-ink)}
  .tile-b.dark .sub{color:color-mix(in srgb, var(--chip-active-ink) 70%, transparent)}
  .tile-b .links{display:flex; flex-direction:column; gap:6px; font-size:15px}
  .tile-b .links a:hover{text-decoration:underline; text-underline-offset:3px}
  .ai-row{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:end}
  @media (max-width:800px){ .ai-row{grid-template-columns:1fr} }
  .langs{display:flex; flex-wrap:wrap; gap:6px}
  .langs span{font-size:13px; padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2)}
  @media (max-width:980px){ .bento{grid-template-columns:repeat(2, minmax(0,1fr))} .tile-b.photo{grid-column:span 2; grid-row:span 1} .tile-b.span4{grid-column:span 2} }
  @media (max-width:520px){ .bento{grid-template-columns:1fr} .tile-b.span2,.tile-b.span4,.tile-b.photo{grid-column:span 1} }

  /* ---------- diagrams ---------- */
  .diagram{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; display:flex; flex-direction:column; gap:18px}
  .diagram h3{margin:0; font-size:15px; font-weight:500; color:var(--muted)}
  .diagram svg{width:100%; height:auto; display:block; overflow:visible}
  .diagram .cap{margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.5; max-width:62ch; text-wrap:pretty}
  .diagram svg.dg-m{display:none}
  @media (max-width:640px){ .diagram svg.dg-d{display:none} .diagram svg.dg-m{display:block} .diagram{padding:22px 18px} }
  .dg-lbl{fill:var(--muted); font-family:var(--mono); font-size:10.5px; letter-spacing:.08em}
  .dg-txt{fill:var(--ink); font-family:var(--font); font-size:13px}
  .dg-sub{fill:var(--muted); font-family:var(--font); font-size:12px}
  .dg-strong{fill:var(--ink); font-family:var(--font); font-size:13px; font-weight:500}
  .dg-axis{stroke:var(--line-2); stroke-width:1}
  .dg-tick{stroke:var(--line); stroke-width:1; stroke-dasharray:2 4}
  .dg-off{fill:var(--dot-off)}
  .dg-on{fill:var(--dot-on)}
  .dg-line{stroke:var(--dot-on); stroke-width:2; fill:none}
  .dg-line-2{stroke:var(--line-2); stroke-width:2; fill:none; stroke-dasharray:4 5}
  .dg-area{fill:var(--dot-on); opacity:.08}

  .four{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:16px}
  @media (max-width:980px){ .four{grid-template-columns:repeat(2, minmax(0,1fr))} }
  @media (max-width:480px){ .four{grid-template-columns:1fr} }
  .sit{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; gap:14px}
  .sit .ico{width:40px; height:40px; border-radius:999px; background:var(--ground); display:inline-flex; align-items:center; justify-content:center}
  .sit .ico svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
  .sit p{margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.5; text-wrap:pretty}

  .work{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-top:16px}
  @media (max-width:900px){ .work{grid-template-columns:1fr} }
  .steps{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px}
  .steps h3{margin:0 0 6px; font-size:15px; font-weight:500; color:var(--muted)}
  .steps ol{list-style:none; margin:0; padding:0}
  .steps li{display:grid; grid-template-columns:28px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; line-height:1.5; color:var(--ink-2)}
  .steps li:first-child{border-top:0}
  .steps li b{display:block; color:var(--ink); font-weight:500}
  .steps li i{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--muted); padding-top:4px; letter-spacing:.06em}
  .weekly{display:flex; flex-wrap:wrap; gap:8px}
  .weekly span{font-size:13px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:var(--ground)}

  /* ---------- mandate cards ---------- */
  .mandates{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
  @media (max-width:980px){ .mandates{grid-template-columns:repeat(2, minmax(0,1fr))} }
  @media (max-width:600px){ .mandates{grid-template-columns:1fr} }
  .mcard{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px 10px 22px; display:flex; flex-direction:column; transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s}
  .mcard:hover{transform:translateY(-3px); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 24px 40px -24px rgba(0,0,0,.28)}
  .mcard .img{aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--ground)}
  .mcard .img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
  .mcard:hover .img img{transform:scale(1.03)}
  .mcard .body{padding:18px 12px 0; display:flex; flex-direction:column; gap:6px}
  .mcard .num{font-size:15px; font-family:var(--mono); white-space:nowrap; font-variant-numeric:tabular-nums}
  .mcard p{margin:8px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; text-wrap:pretty}
  .mcard.text{padding:22px; justify-content:center; gap:10px}
  .mcard.text .big{font-size:32px; letter-spacing:-.04em; font-weight:500; line-height:1}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important}
  }

/* ---------- sub pages ---------- */
.page-head{padding:56px 0 36px}
.page-head .eyebrow{margin-bottom:12px}
.page-h1{font-size:clamp(32px, 4.4vw, 52px); line-height:1.06; letter-spacing:-.03em; font-weight:500; margin:0 0 16px; max-width:20ch; text-wrap:balance}
.page-head .lede{margin:0; max-width:56ch; text-align:left}
.sec-head{padding:8px 0 4px}
.sec-head h2{margin-bottom:12px}
.lede-left{color:var(--muted); margin:-12px 0 24px; font-size:16px}
.ul{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2)}
.ul:hover{text-decoration-color:currentColor}
.ul.small{font-size:12px; margin-left:8px; text-transform:none; letter-spacing:0; font-family:var(--font)}
.pp{margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.55; text-wrap:pretty}
.pp.wide{max-width:70ch}
.prose{max-width:68ch; color:var(--ink-2); font-size:16px; line-height:1.6}
.prose h2{font-size:20px; margin:32px 0 8px; color:var(--ink)}
.prose p{margin:0 0 14px; text-wrap:pretty}
.prose code{font-family:var(--mono); font-size:13px; background:var(--card); padding:2px 6px; border-radius:6px}
.todo{background:color-mix(in srgb, var(--live) 18%, transparent); padding:2px 6px; border-radius:6px; font-family:var(--mono); font-size:13px}
.eng-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.eng-grid .span2, .panel.span2, .steps.span2{grid-column:span 2}
@media (max-width:800px){ .eng-grid{grid-template-columns:1fr} .eng-grid .span2, .panel.span2, .steps.span2{grid-column:span 1} }
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.ticks li{position:relative; padding-left:22px; color:var(--ink-2); font-size:15px; line-height:1.5; text-wrap:pretty}
.ticks li::before{content:""; position:absolute; left:0; top:9px; width:10px; height:10px; border-radius:999px; background:var(--dot-on)}
.steps li i{white-space:nowrap}
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:820px}
.faq{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:0}
.faq summary{cursor:pointer; list-style:none; padding:18px 22px; font-size:16px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--muted); font-size:18px; flex:0 0 auto; transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0; color:var(--ink-2); font-size:15px; line-height:1.55; max-width:68ch; text-wrap:pretty}
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:16px; align-items:start}
.about-grid .tile-b.photo{grid-column:auto; grid-row:auto; aspect-ratio:1/1}
.about-grid .prose{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; max-width:none}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr} }
.timeline{list-style:none; margin:0; padding:0; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px 28px}
.timeline li{display:grid; grid-template-columns:110px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.5; color:var(--ink-2)}
.timeline li:first-child{border-top:0}
.timeline li i{font-style:normal; font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:3px; letter-spacing:.04em}
.timeline li b{display:block; color:var(--ink); font-weight:500}
@media (max-width:520px){ .timeline li{grid-template-columns:1fr; gap:4px} }
.work-hero{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px}
.work-hero img{display:block; width:100%; height:auto; border-radius:14px; aspect-ratio:16/9; object-fit:cover}
.tablewrap{overflow-x:auto; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}
.cmp{width:100%; border-collapse:collapse; min-width:640px; font-size:15px}
.cmp th, .cmp td{text-align:left; padding:16px 22px; vertical-align:top; border-top:1px solid var(--line); line-height:1.5}
.cmp thead th{border-top:0; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500}
.cmp tbody th{font-weight:500; color:var(--ink); width:22%}
.cmp td{color:var(--ink-2)}
.cmp td:last-child{color:var(--ink)}
.tile-b .links + .sub{margin-top:auto}

/* ---------- mobile fixes ---------- */
.panel .ticks li{padding:0 0 0 22px; border-top:0}
.panel .ticks li:first-child{padding-top:0}
.steps li{grid-template-columns:max-content 1fr}
.steps li i{max-width:96px; white-space:normal; line-height:1.4}
@media (max-width:520px){ .steps li{grid-template-columns:1fr; gap:4px} .steps li i{max-width:none; padding-top:0} }
.cmp-m{display:none}
@media (max-width:760px){
  .tablewrap{display:none}
  .cmp-m{display:flex; flex-direction:column; gap:12px}
  .cmp-m .row{background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:18px 20px}
  .cmp-m .row h3{margin:0 0 10px; font-size:15px; font-weight:500}
  .cmp-m .row dl{margin:0; display:grid; grid-template-columns:1fr; gap:8px}
  .cmp-m .row dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  .cmp-m .row dd{margin:0 0 4px; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
  .cmp-m .row dd.us{color:var(--ink)}
  .page-h1{max-width:none}
  .work-hero img{aspect-ratio:4/3}
}
@media (max-width:600px){ .mcard .card-foot{flex-wrap:wrap} .card .card-foot{flex-wrap:wrap} }