:root{
    --bg:#faf9f5;
    --ink:#171713;
    --muted:#6d6c64;
    --faint:#a5a49a;
    --line:#e5e3da;
    --dark:#1c1626;
  --mint:#f2f0e8;
  --green:#5b3a86;
    --paper:#fdfcf8;
    --card:#f1efe4;
    --max:1060px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:17.5px}
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;line-height:1.08;font-weight:600;letter-spacing:-.025em}
  .serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:0}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
  .btn{display:inline-block;padding:15px 30px;border:1px solid var(--ink);border-radius:0;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;background:transparent;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
  .btn:hover{background:var(--ink);color:var(--bg)}
  .u{border-bottom:1px solid var(--ink);padding-bottom:2px;font-weight:500}
  .u:hover{color:var(--green);border-color:var(--green)}
  .small-label{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--green);font-weight:600}

  /* nav */
  header{position:sticky;top:0;z-index:50;background:var(--bg)}
  header nav{display:flex;align-items:center;justify-content:space-between;height:70px;border-bottom:1px solid var(--line)}
  .wordmark{font-family:'Space Grotesk';font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);flex:0 0 auto}
  /* the subline never wraps, so it cannot push the header wider than the name above it */
  .wordmark .sub{display:block;white-space:nowrap}
  .wordmark i{font-style:normal;color:var(--green)}
  .nav-links{display:flex;gap:20px;align-items:center;font-size:.9rem;color:var(--muted)}
  .nav-links a:hover{color:var(--ink)}
  .nav-note{font-size:.8rem;color:var(--faint);display:flex;align-items:center;gap:8px}
  .nav-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
  @media(max-width:1240px){.nav-links{gap:15px;font-size:.86rem}header nav{gap:12px}}
  /* Georgian nav words are the longest of the five, so they set this tier */
  @media(max-width:1100px){.nav-links{gap:11px;font-size:.82rem}header nav{gap:10px}}
  @media(max-width:860px){.nav-links a:not(.u){display:none}.nav-note{display:none}}
  /* keep all five languages reachable on small phones */
  @media(max-width:560px){
    header nav{gap:10px}
    .wordmark{font-size:1.05rem}
    header nav .langsel{gap:8px;font-size:.78rem;flex-wrap:nowrap}
    header nav .langsel .flag{display:none}
  }

  /* hero */
  .hero{padding:120px 0 90px}
  .hero .intro{font-size:1rem;color:var(--muted);margin-bottom:30px;max-width:52ch}
  .hero .intro b{color:var(--ink);font-weight:600}
  .hero h1{font-size:clamp(2.4rem,5.4vw,4rem);max-width:18ch;margin-bottom:34px}
  .hero h1 .serif{color:var(--green);font-size:1.04em}
  .hero-ctas{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:0}
  .hero .ps{margin-top:20px;font-size:.86rem;color:var(--faint)}

  /* ticker */
  .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:14px 0;margin-top:80px}
  .ticker-inner{display:inline-block;animation:tick 38s linear infinite}
  .ticker span{font-family:'Space Grotesk';font-size:.9rem;letter-spacing:.06em;color:var(--muted);margin-right:14px}
  .ticker span i{font-style:normal;color:var(--green);margin-left:14px}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  section{padding:105px 0}
  section + section{border-top:1px solid var(--line)}
  .kicker{margin-bottom:22px}
  .kicker .idx{font-family:'Space Grotesk';font-size:.78rem;color:var(--green);font-weight:600}
  .h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:0;line-height:1.06;font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:20px;max-width:24ch}
  .h2 .serif{color:var(--green)}
  .lead{color:var(--muted);font-size:1.04rem;max-width:56ch}

  /* problem / editorial list */
  .gripes{margin-top:56px;max-width:700px}
  .gripe{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line);font-size:1.02rem}
  .gripe:first-child{border-top:0}
  .gripe .tick{color:var(--green);font-family:'Instrument Serif';font-style:italic;flex-shrink:0}
  .gripe p b{font-weight:600}
  .gripe p span{color:var(--muted)}
  .aside-note{margin-top:36px;font-size:.95rem;color:var(--muted);max-width:56ch}
  .aside-note .serif{color:var(--ink);font-size:1.1em}

  /* what you get / asymmetric two col */
  .get-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;margin-top:26px}
  @media(max-width:860px){.get-grid{grid-template-columns:1fr;gap:40px}}
  .get-left p{color:var(--muted);font-size:1rem;margin-bottom:18px;max-width:40ch}
  .get-left .serif{font-size:1.35rem;color:var(--ink);display:block;margin-bottom:18px;line-height:1.3}
  .get-list{list-style:none}
  .get-list li{padding:13px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:42px 190px 1fr;gap:4px 16px;align-items:center}
  .get-list li:first-child{border-top:0}
  .loop-li{width:36px;height:36px;align-self:center}
  .get-list b{font-family:'Space Grotesk';font-weight:600;font-size:1rem}
  .get-list span{color:var(--muted);font-size:.9rem;text-align:left;max-width:46ch}
  .get-list li span:not(.loop){align-self:center}
  @media(max-width:1020px){.get-list li{grid-template-columns:42px 1fr;row-gap:2px}.get-list li span:not(.loop){grid-column:2}}

  /* work */
  .folio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
  @media(max-width:860px){.folio-grid{grid-template-columns:1fr}}
  .shot .thumb{aspect-ratio:4/3;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;transition:background .2s}
  .shot .thumb em{font-family:'Instrument Serif';font-style:italic;font-size:1.05rem;color:var(--faint)}
  .shot:hover .thumb{background:#e9e8df}
  .shot .meta{padding-top:14px;display:flex;justify-content:space-between;align-items:baseline}
  .shot .meta h3{font-size:.98rem;font-weight:600}
  .shot .meta span{font-size:.8rem;color:var(--faint)}
  .folio-note{margin-top:30px;font-size:.92rem;color:var(--muted)}

  /* process / conversational rows */
  .steps{margin-top:56px;counter-reset:step}
  .step{display:grid;grid-template-columns:52px 72px 200px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line);align-items:center}
  @media(max-width:760px){.step{grid-template-columns:40px 52px 1fr;gap:8px 16px;align-items:center}.step p{grid-column:3}}
  .step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:'Instrument Serif';font-style:italic;color:var(--faint);font-size:1.1rem}
  .step h3{font-size:1.08rem;font-weight:600}
  .step p{color:var(--muted);font-size:.95rem;max-width:52ch}

  /* pricing */
  .offer{border:1px solid var(--ink);background:var(--paper);padding:36px 34px;margin-top:56px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center}
  @media(max-width:860px){.offer{grid-template-columns:1fr;gap:18px}}
  .offer .big{font-family:'Space Grotesk';font-size:3.2rem;font-weight:700;line-height:1}
  .offer .big small{font-size:.95rem;color:var(--faint);font-weight:400;font-family:'Inter';display:block;margin-top:6px}
  .offer .big small s{color:var(--faint)}
  .offer h3{font-size:1.2rem;margin-bottom:6px}
  .offer p{color:var(--muted);font-size:.94rem;max-width:52ch}
  .offer .tag-launch{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600;display:block;margin-bottom:10px}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
  @media(max-width:900px){.plans{grid-template-columns:1fr;max-width:520px}}
  .plan{border:1px solid var(--line);padding:38px 32px;background:var(--paper)}
  .plan.mid{border-color:var(--ink)}
  .plan .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600;display:block;min-height:16px;margin-bottom:12px}
  .plan h3{font-size:1.25rem;margin-bottom:4px}
  .plan .for{color:var(--muted);font-size:.9rem;margin-bottom:24px;min-height:48px;font-family:'Instrument Serif';font-style:italic;font-size:1.02rem}
  .plan .price{font-family:'Space Grotesk';font-size:1.9rem;font-weight:600;margin-bottom:22px}
  .plan .price small{font-size:.8rem;color:var(--faint);font-weight:400;font-family:'Inter'}
  .plan ul{list-style:none;margin-bottom:30px}
  .plan li{padding:7px 0;color:var(--muted);font-size:.91rem}
  .plan li::before{content:"✓  ";color:var(--green)}
  .price-note{margin-top:34px;color:var(--muted);font-size:.92rem;max-width:56ch}
  .price-note .serif{color:var(--ink);font-size:1.08em}

  /* founders */
  .founders-grid{display:grid;grid-template-columns:minmax(0,640px);justify-content:center;gap:70px;margin-top:56px;align-items:start}
  .founders-grid .sig-logo{grid-column:1/-1}
  @media(max-width:860px){.founders-grid{grid-template-columns:1fr;gap:50px}}
  .founder .avatar{width:104px;height:104px;border-radius:18px;overflow:hidden;position:relative;margin-bottom:24px;background:var(--green);display:flex;align-items:center;justify-content:center}
  .founder .avatar span{font-family:'Space Grotesk';font-weight:700;font-size:2.5rem;color:var(--bg);line-height:1}
  .founder .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
  .founder .handles{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .founder .handles span{font-family:'Space Grotesk';font-size:.78rem;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 13px}
  .founder h3{font-size:1.4rem;margin-bottom:2px}
  .founder .role{color:var(--green);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;display:block}
  .founder p{color:var(--muted);font-size:.96rem;margin-bottom:14px;max-width:46ch}
  .founder p b{color:var(--ink);font-weight:600}
  .founder .quote{font-family:'Instrument Serif';font-style:italic;font-size:1.25rem;color:var(--ink);line-height:1.4;margin:22px 0 14px;max-width:40ch}

  /* faq */
  .faq-list{margin-top:50px;max-width:720px}
  details{border-top:1px solid var(--line)}
  details:last-child{border-bottom:1px solid var(--line)}
  summary{cursor:pointer;padding:22px 0;font-weight:500;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:20px;font-family:'Space Grotesk'}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--faint);font-size:1.25rem;font-weight:300}
  details[open] summary::after{content:"−"}
  details p{padding:0 0 24px;color:var(--muted);font-size:.95rem;max-width:58ch}

  /* final */
  .final{padding:120px 0 100px}
  .final .h2{font-size:clamp(2.3rem,5.4vw,3.8rem);max-width:17ch}
  .final .lead{margin-bottom:44px}
  .final .contact-row{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
  .final .alt{color:var(--muted);font-size:.92rem}

  /* contact form */
  .cform{margin-top:44px;max-width:560px;display:grid;gap:24px}
  .cform .hp{position:absolute;left:-9999px}
  .cform label{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:6px}
  .cform input,.cform textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 2px;font:inherit;color:var(--ink);border-radius:0}
  .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--green)}
  .cform textarea{resize:vertical;min-height:90px}
  .cform .btn{justify-self:start;cursor:pointer;font-family:inherit}
  .reply-note{margin-top:18px;font-size:.85rem;color:var(--faint)}

  /* accessibility + motion */
  :focus-visible{outline:2px solid var(--green);outline-offset:3px}
  @media (prefers-reduced-motion: reduce){.ticker-inner{animation:none}}

  /* small screens */
  @media(max-width:640px){
    section{padding:72px 0}
    .hero{padding:88px 0 70px}
    .get-list li{padding:13px 0}
    .loop-hero{max-width:280px;justify-self:center}
    .get-marks{justify-content:center;margin-top:24px}
    .final{padding:90px 0 80px}
  }

  /* footer with giant wordmark */
  footer{border-top:1px solid var(--line);padding:56px 0 40px;overflow:hidden}
  .foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:60px}
  .foot-grid a:hover{color:var(--green)}
  .giant{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.9rem,8.1vw,6.6rem);letter-spacing:-.04em;line-height:.9;color:var(--line);user-select:none;white-space:nowrap;overflow:hidden}
  .giant span{color:var(--green)}

  .langsel{display:flex;gap:14px;font-family:'Space Grotesk';font-size:.85rem;font-weight:600;align-items:center}
  /* The language links were 15px wide and 21px tall with no padding, far under
     the 44px a thumb needs, and five languages are the whole point of the site.
     The padding grows the tap area and the matching negative margin takes the
     space straight back, so nothing moves: at 320px the header has 6px to
     spare. -4px each side against an 8px gap means neighbours meet but never
     overlap, so nobody taps Russian and lands on Ukrainian. */
  .langsel a{color:var(--faint);display:inline-flex;align-items:center;justify-content:center;padding:12px 4px;margin:-12px -4px}
  .langsel a:hover{color:var(--ink)}
  .langsel a.on{color:var(--green)}
  @media(max-width:860px){.nav-links{display:none}}
  /* bigger, more visible call-to-action buttons */
  .btn{padding:17px 36px;font-size:.85rem}
  .hero-ctas .btn,.final .btn,.offer .btn{padding:19px 42px;font-size:.9rem}
  @media(max-width:640px){.hero-ctas .btn,.final .btn,.offer .btn,.cform .btn{width:100%;text-align:center}}
  .socials{display:flex;align-items:center;gap:20px;margin-bottom:46px}
  .socials a{color:var(--muted);display:inline-flex}
  .socials a:hover{color:var(--green)}
  .socials svg{width:22px;height:22px;fill:currentColor}
  .socials .at{color:var(--faint);font-size:.9rem;font-family:'Space Grotesk';letter-spacing:.02em}
  /* Flex rather than grid so a last row that is not full centres itself,
     instead of stranding one card against the left edge with empty slots
     beside it. We keep adding services, so no fixed column count can be
     relied on to divide evenly: 17 cards was 4+4+4+4 at desktop but
     3+3+3+3+3+1 on a laptop. flex-basis holds the old desktop card width. */
  .svc-gallery.svc-17{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
  .svc-17 .svc-card{flex:1 1 230px;max-width:320px}
  .svc-17 .svc-flag{flex:1 1 100%;max-width:none}
  /* Price above, link below, at every width. Side by side made the card's
     minimum width depend on how long the price reads in each language, which
     broke Ukrainian and Georgian while English looked fine. */
  .svc-17 .svc-cfoot{flex-direction:column;align-items:flex-start;gap:6px}
  .svc-17 .svc-cprice small{display:block;margin-top:2px}
  /* nowrap is fine for a short price but not for "Ask us" in five languages */
  .svc-17 .svc-cprice{white-space:normal}
  .svc-17 .svc-cname,.svc-17 .svc-cline{overflow-wrap:break-word}
  @media(max-width:720px){
    .svc-gallery.svc-17{gap:12px}
    .svc-17 .svc-card{flex:1 1 160px;max-width:none}
    .svc-17 .svc-card{padding:18px 16px 16px;gap:8px}
    .svc-17 .svc-cname{font-size:1.02rem}
    .svc-17 .svc-flag .svc-cname{font-size:1.2rem}
    .svc-17 .svc-cline{font-size:.86rem;line-height:1.5}
    .svc-17 .svc-cfoot{flex-direction:column;align-items:flex-start;gap:2px;padding-top:12px}
    .svc-17 .svc-cprice{font-size:.95rem}
    /* the whole card is already a link, so the words are just noise here */
    .svc-17 .svc-cgo{display:none}
  }
  .all-svc{margin-top:26px;text-align:center}
  .foot-lang{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .foot-lang .langsel a{color:var(--muted)}
  .foot-lang .langsel a:hover{color:var(--green)}
  .foot-lang .langsel a.on{color:var(--ink)}
  /* bot service cards reuse .plan styling */
  .bots-note{margin-top:26px;color:var(--muted);font-size:.92rem;max-width:60ch}
  .bots-note .serif{color:var(--ink);font-size:1.06em}
  /* work thumbnails: real screenshot overlay + contact card */
  .shot .thumb{position:relative;overflow:hidden}
  .shot .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
  .shot .thumb-cta{background:var(--paper);border:1px solid var(--ink);flex-direction:column;gap:12px}
  .cta-mark{font-family:'Space Grotesk';font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}
  .cta-mark i{font-style:normal;color:var(--green)}
  .shot .thumb-cta em{color:var(--muted);font-style:italic}
  .folio-grid{grid-template-columns:repeat(2,1fr)!important;max-width:760px}
  @media(max-width:860px){.folio-grid{grid-template-columns:1fr!important}}

  /* bots coming-soon strip */
  .bots-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
  .bots-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
  .bots-strip h3{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:600;letter-spacing:-.01em;margin:8px 0 8px}
  .bots-strip p{color:var(--muted);font-size:.95rem;max-width:62ch;margin:0}
  .bots-strip .u{white-space:nowrap;font-weight:600}

  /* motion graphics hosts. the host box controls the size, the svg fills it */
  .loop{display:block;line-height:0}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero-copy{min-width:0}
  .loop-hero{width:100%;max-width:560px;aspect-ratio:1/1;justify-self:end}
  .loop-gripe{width:52px;height:52px;flex-shrink:0}
  .gripe{align-items:center}
  .get-marks{display:flex;gap:18px;align-items:center;margin-top:30px}
  .loop-onsite{width:184px;height:184px;flex:0 0 auto}
  .loop-globe{width:184px;height:184px;flex:0 0 auto}
  .mockup-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
  .mockup-row figure{margin:0}
  .loop-mockup{width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .mockup-row figcaption{margin-top:12px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);font-family:'Space Grotesk',sans-serif}
  .loop-step{width:64px;height:64px}
  .loop-why{width:100%;max-width:1100px;aspect-ratio:1200/560;justify-self:center;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:10px 20px;box-sizing:border-box}
  .loop-badge{width:110px;height:110px;margin-bottom:10px}
  .loop-bot{width:76px;height:76px;margin-bottom:12px}
  .loop-plan{width:46px;height:46px;margin-bottom:10px}
  @media(max-width:900px){
    /* on phones the hero graphic leads, the headline follows */
    .hero-grid{grid-template-columns:1fr;gap:26px}
    .loop-hero{order:-1;max-width:340px;margin:0 auto;justify-self:center}
    .hero-copy{order:1}
    .mockup-row{grid-template-columns:1fr;gap:22px}
    .loop-why{aspect-ratio:1200/560;padding:6px 10px}
    .get-marks{justify-content:flex-start}
    .loop-onsite,.loop-globe{width:150px;height:150px}
  }
  @media(max-width:640px){
    .loop-gripe{width:40px;height:40px}
    .loop-step{width:46px;height:46px}
  }

  /* raw street photography: monochrome, grain, no rounding */
  .photo-band{margin:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);position:relative}
  .photo-band img{display:block;width:100%;height:44vh;min-height:280px;max-height:520px;object-fit:cover;
    filter:grayscale(1) contrast(1.14) brightness(.97) sepia(.12)}
  .photo-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
  .photo-strip figure{margin:0;position:relative;border-left:1px solid var(--ink)}
  .photo-strip figure:first-child{border-left:none}
  .photo-strip img{display:block;width:100%;height:340px;object-fit:cover;
    filter:grayscale(1) contrast(1.14) brightness(.97) sepia(.12)}
  @media(max-width:760px){
    .photo-strip{grid-template-columns:1fr}
    .photo-strip figure{border-left:none;border-top:1px solid var(--ink)}
    .photo-strip figure:first-child{border-top:none}
    .photo-strip img{height:240px}
    .photo-band img{height:34vh}
  }

  /* quotes around section labels, industrial minimal detailing */
  .card,.plan,.offer,.step-icon,.gripe{border-radius:0}
  .btn{border-radius:0;box-shadow:none}
  .plan{border:1px solid var(--ink)}
  .offer{border:1px solid var(--ink)}

  /* painted logo placements */
  .tick-mark{font-style:normal;font-weight:600;color:var(--green)}
  .giant-wrap{padding:6px 0 2px}
  .final-mark{font-family:'Space Grotesk';font-weight:700;font-size:1.35rem;letter-spacing:-.02em;margin-bottom:28px;color:var(--ink)}
  .final-mark i{font-style:normal;color:var(--green)}
  .sig-mark{font-family:'Space Grotesk';font-weight:700;font-size:1.1rem;letter-spacing:-.02em;margin-top:30px;color:var(--ink);}
  .sig-mark i{font-style:normal;color:var(--green)}
  @media(max-width:760px){
    .final-mark{font-size:1.15rem}
    .giant{font-size:8.4vw}
    .tick-mark{font-size:.9em}
  }

  /* the honest part: rotating showcase */
  .gripes-grid{display:grid;grid-template-columns:1fr 400px;gap:70px;align-items:start}
  .gripe-stage{position:sticky;top:110px;height:440px;border:1px solid var(--ink)}
  .stage-loop{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;display:none;pointer-events:none}
  .stage-loop.on{display:block}
  .stage-count{position:absolute;left:16px;bottom:12px;font-family:'Space Grotesk';font-size:.76rem;font-weight:600;letter-spacing:.14em;color:var(--faint)}
  .staged .gripe{cursor:pointer}
  .staged .gripe:not(.active) p,.staged .gripe:not(.active) b{color:var(--faint)}
  .staged .gripe.active p{color:var(--muted)}.staged .gripe.active b{color:var(--ink)}
  @media(max-width:960px){
    .gripes-grid{display:block}
    .gripe-stage{display:none}
    .staged .gripe{cursor:default}
  }

  /* values */
  .values{border-top:1px solid var(--ink);padding-top:34px}
  @media(max-width:860px){.values{margin-top:10px}}
  .values h3{font-family:'Space Grotesk';font-size:1.05rem;font-weight:600;margin-bottom:18px}
  .values-list{list-style:none;margin:0;padding:0}
  .values-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:.97rem;color:var(--muted);max-width:70ch}
  .values-list b{color:var(--ink)}

  /* sticky mobile action bar */
  .mob-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);background:var(--bg);transform:translateY(102%);transition:transform .3s ease}
  .mob-bar a{display:block;text-align:center;padding:16px 8px;font-family:'Space Grotesk';font-weight:600;font-size:1rem;color:var(--ink)}
  .mob-bar .mb-book{background:var(--green);color:#fff}
  @media(max-width:860px){.mob-bar{display:grid}.mob-bar.show{transform:translateY(0)}footer{padding-bottom:110px}}
  /* skip link */
  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green);color:#fff;padding:12px 18px;font-family:'Space Grotesk'}
  .skip:focus{left:0}
  /* testimonials, appears only with real quotes */
  .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink)}
  .tcard{background:var(--paper);margin:0;padding:28px}
  .tcard blockquote{font-family:'Instrument Serif';font-style:italic;font-size:1.15rem;line-height:1.5;margin:0 0 14px}
  .tcard figcaption{font-size:.88rem;color:var(--muted)}

  /* slim dark announcement strip above the header */
  .topbar{background:var(--mint);color:var(--green);font-size:.78rem;letter-spacing:.06em;text-align:center;padding:9px 16px}
  .topbar b{color:#c4a9e6;font-weight:600}

  /* wordmark sub-line */
  .wordmark .sub{display:block;font-family:'Inter',sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  @media(max-width:560px){.wordmark .sub{display:none}}

  /* card hover lift */
  .shot .thumb{transition:transform .35s ease,box-shadow .35s ease,background .2s}
  .shot:hover .thumb{transform:translateY(-4px);box-shadow:8px 8px 0 var(--ink)}
  .bcard{transition:transform .35s ease,box-shadow .35s ease}
  .bcard:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--ink)}
  @media (prefers-reduced-motion: reduce){
    .shot .thumb,.bcard{transition:none}
    .shot:hover .thumb,.bcard:hover{transform:none}
  }

  /* warm layer alternation */
  #process{background:var(--card)}
  .bots-strip{background:var(--paper)}

  /* dark editorial final section */
  .final{background:var(--mint);color:var(--ink)}
  .final .small-label{color:var(--green)}
  .final .h2{color:var(--ink)}
  .final .h2 .serif{color:var(--green)}
  .final .lead{color:var(--muted)}
  .final .alt{color:var(--muted)}
  .final .u{border-color:var(--ink);color:var(--ink)}
  .final .u:hover{color:var(--green);border-color:var(--green)}
  .final .final-mark{color:var(--ink)}
  .final .final-mark i{color:var(--green)}
  .final .btn{border-color:var(--ink);color:var(--ink);background:var(--bg)}
  .final .btn:hover{background:var(--ink);color:var(--bg)}
  .final .cform label{color:var(--muted)}
  .final .cform input,.final .cform textarea{border-bottom-color:var(--ink);color:var(--ink);background:transparent}
  .final .cform input:focus,.final .cform textarea:focus{border-color:var(--green)}
  .final .cform input::placeholder,.final .cform textarea::placeholder{color:var(--faint)}
  .final .cform input::placeholder,.final .cform textarea::placeholder{color:#6d6b5c}
  .final .reply-note{color:#8f8c7c}
  .final :focus-visible{outline-color:#c4a9e6}

  /* services as a big bold gallery */
  .svc-gallery{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:26px;margin-top:44px}
  .svc-card{border:2px solid var(--ink);background:var(--paper);padding:38px 34px 30px;display:flex;flex-direction:column;gap:14px;transition:transform .3s ease,box-shadow .3s ease}
  .svc-card:hover{transform:translateY(-5px);box-shadow:8px 8px 0 var(--ink)}
  .svc-cloop{width:120px;height:120px;margin-bottom:6px}
  .svc-cname{font-family:'Space Grotesk';font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.015em;line-height:1.1}
  .svc-cline{color:var(--muted);font-size:.98rem;line-height:1.6;max-width:46ch}
  .svc-cfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
  .svc-cprice{font-family:'Space Grotesk';font-weight:700;font-size:1.6rem;white-space:nowrap}
  .svc-cprice small{font-size:.72rem;color:var(--faint);font-weight:500;letter-spacing:0}
  .svc-cgo{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700;white-space:nowrap}
  .svc-flag{grid-column:1/-1;display:grid;grid-template-columns:minmax(200px,300px) 1fr;grid-template-areas:"art name" "art line" "art foot";column-gap:54px;align-items:center;padding:44px 44px 36px}
  .svc-flag .svc-cloop{grid-area:art;width:100%;max-width:280px;height:auto;aspect-ratio:1/1;margin:0}
  .svc-flag .svc-cname{grid-area:name;font-size:clamp(2rem,3.6vw,3rem);align-self:end}
  .svc-flag .svc-cline{grid-area:line;font-size:1.05rem;max-width:56ch}
  .svc-flag .svc-cfoot{grid-area:foot;align-self:start}
  .svc-flag .svc-cprice{font-size:2rem}
  @media(max-width:900px){
    .svc-gallery{grid-template-columns:1fr;grid-auto-rows:auto;gap:18px}
    .svc-flag{display:flex;flex-direction:column;align-items:flex-start;padding:30px 22px 22px}
    .svc-flag .svc-cloop{max-width:150px;width:150px}
    .svc-card{padding:26px 22px 20px;gap:10px}
    .svc-cloop{width:76px;height:76px;margin-bottom:0}
    .svc-cname{font-size:1.35rem}
    .svc-flag .svc-cname{font-size:1.6rem;align-self:flex-start}
    .svc-cline{font-size:.92rem}
    .svc-cfoot{width:100%;flex-wrap:wrap;row-gap:6px;padding-top:14px}
    .svc-cprice{font-size:1.25rem;white-space:normal}
    .svc-flag .svc-cprice{font-size:1.35rem}
    .topbar{font-size:.7rem;padding:7px 12px}
  }

  /* why: points left, agency-vs-us comparison right */
  .why-grid{display:grid;grid-template-columns:1fr;gap:44px;margin-top:10px}
  .why-points{max-width:760px}
  .why-points .gripe{border-top:1px solid var(--line);padding:20px 0}
  .why-points .gripe:first-child{border-top:0}
  .why-points .aside-note{margin-top:22px}
  @media(max-width:900px){
    .why-grid{grid-template-columns:1fr;gap:8px}
    .loop-why{max-width:100%;justify-self:center;margin-top:8px}
  }

  /* honest comparison table */
  .cmp-wrap{margin-top:54px}
  .cmp-h3{font-family:'Space Grotesk';font-size:1.15rem;font-weight:600;margin-bottom:16px}
  .cmp-scroll{overflow-x:auto}
  .cmp{width:100%;border-collapse:collapse;border:1px solid var(--ink);min-width:560px}
  .cmp th{font-family:'Space Grotesk';font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:12px 16px;border-bottom:1px solid var(--ink);color:var(--faint)}
  .cmp td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--muted);vertical-align:top}
  .cmp td:first-child{color:var(--ink);font-weight:500}
  .cmp tr:last-child td{border-bottom:0}
  .cmp .cmp-us td{background:var(--paper);color:var(--ink);font-weight:600;border-top:2px solid var(--green)}
  .cmp .cmp-us td:first-child{color:var(--green)}

  /* interactive layer: search button in the nav */
  .search-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.85rem;color:var(--muted);background:none;border:1px solid var(--line);padding:6px 12px;cursor:pointer;margin-right:18px;font-family:'Space Grotesk';font-weight:600}
  .search-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .search-btn:hover{border-color:var(--ink);color:var(--ink)}
  /* 33px square on a phone. Same padding-and-negative-margin trick so the
     bordered box keeps its size while the thumb gets a 45px target. */
  @media(max-width:860px){.search-btn{position:relative}
    .search-btn::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px}}
  @media(max-width:860px){.search-btn span{display:none}.search-btn{padding:6px 9px;margin-right:10px}}
  [hidden]{display:none!important}
  .search-ov{position:fixed;inset:0;z-index:90;background:var(--paper);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 0}
  .so-box{width:100%;max-width:640px;background:var(--bg);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
  .so-row{display:flex;align-items:center;border-bottom:1px solid var(--line)}
  .so-row input{flex:1;font:inherit;font-size:1.1rem;padding:18px 20px;border:0;background:transparent;color:var(--ink);outline:none}
  .so-out{max-height:60vh;overflow:auto}
  .so-hit{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);color:var(--ink);align-items:baseline}
  .so-hit:hover,.so-hit:focus{background:var(--paper)}
  .so-k{font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:700}
  .so-t{font-size:.98rem}
  .so-none{padding:22px 20px;color:var(--muted)}

  /* business-type explorer */
  .explorer{margin-top:54px;border:2px solid var(--ink);background:var(--paper)}
  .ex-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line)}
  .ex-tabs{display:flex;gap:6px;flex-wrap:wrap}
  .ex-tab{font:inherit;font-family:'Space Grotesk';font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
  .ex-tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
  .ex-tab:focus-visible{outline:3px solid var(--green);outline-offset:2px}
  .ex-pane{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:28px 22px 30px}
  .ex-pane .loop-mockup{width:100%;aspect-ratio:4/3}
  .ex-copy h3{font-family:'Space Grotesk';font-size:1.5rem;font-weight:700;margin-bottom:10px}
  .ex-copy p{color:var(--muted);line-height:1.65;margin-bottom:16px}
  @media(max-width:860px){.ex-pane{grid-template-columns:1fr;gap:22px;padding:20px 18px 24px}.ex-head{padding:16px 18px}}

  /* process cycle */
  .steps.cycling .step{transition:background .4s ease}
  .steps.cycling .step.lit{background:var(--paper)}
  .steps.cycling .step.lit h3{color:var(--green)}

  /* floating contact panel */
  .tp-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
  .tp-acts a{display:block;text-align:center;padding:12px 6px;background:var(--bg);font-family:'Space Grotesk';font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
  .tp-acts a:hover{background:var(--paper)}
  .tp-acts .tp-book{grid-column:1/-1;background:var(--green);color:#fff}
  .tp-acts .tp-book:hover{background:#4f2f73}

  /* founding offer slide-in */
  .promo{position:fixed;left:22px;bottom:22px;z-index:70;width:min(360px,calc(100vw - 44px));background:var(--bg);border:2px solid var(--ink);padding:20px 20px 18px;box-shadow:10px 10px 0 var(--ink);transform:translateY(120%);transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
  .promo.on{transform:none;pointer-events:auto}
  .promo b{display:block;font-family:'Space Grotesk';font-size:1.3rem;font-weight:700;margin:6px 0 4px;line-height:1.15}
  .promo p{color:var(--muted);font-size:.92rem;line-height:1.55;margin-bottom:14px}
  .promo-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .promo .btn{padding:11px 18px;font-size:.72rem}
  .promo-no{font:inherit;font-size:.85rem;background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline}
  @media(max-width:860px){.promo{display:none}}
  @media (prefers-reduced-motion: reduce){.promo{transition:none}}

  /* wordmark fly-in on first arrival */
  .wordmark.fly{animation:none}
  .wordmark.fly i{display:inline-block}
  @keyframes wmfly{from{transform:translate(-56px,-26px) scale(.82)}to{transform:none}}
  @keyframes wmpop{from{transform:translateY(8px) scale(.9)}to{transform:none}}
  @media (prefers-reduced-motion: reduce){.wordmark.fly,.wordmark.fly i{animation:none}}

  /* faces: the people we build for */
  .faces{padding-bottom:0}
  .faces .sec-lead{margin-bottom:34px}
  .faces-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .faces-grid img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.98) sepia(.1);transition:filter .5s ease,transform .5s ease}
  .faces-grid img:hover{filter:none;transform:scale(1.03)}
  @media(max-width:860px){.faces-grid{grid-template-columns:repeat(6,1fr)}}
  @media(max-width:520px){.faces-grid{grid-template-columns:repeat(4,1fr)}}
  @media (prefers-reduced-motion: reduce){.faces-grid img{transition:none}.faces-grid img:hover{transform:none}}

/* add-ons, priced out loud */
.addons-wrap{margin-top:34px}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
@media(max-width:900px){.addons{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.addons{grid-template-columns:1fr}}
.addon{border:1px solid var(--line);background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:4px}
.addon b{font-family:'Space Grotesk';font-size:1.05rem;font-weight:600}
.addon .ap{font-family:'Space Grotesk';font-size:1.5rem;font-weight:600;color:var(--green);line-height:1.1;margin:2px 0 4px}
.addon p{color:var(--muted);font-size:.9rem;line-height:1.45;margin:0}
/* Four bundles now, not three. repeat(3,1fr) left the fourth stranded alone
   on its own row. Four across would be 233px each, and these cards carry a
   sentence of who it is for plus a line of what is included, so they need the
   width. Two by two is the readable answer for exactly four. */
/* rotating stage title */
.stage-title{position:absolute;left:18px;right:18px;top:16px;display:flex;flex-direction:column;gap:3px;z-index:2;pointer-events:none}
.stage-kicker{font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600}
.stage-name{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-size:1.55rem;line-height:1.15;color:var(--ink)}

/* twelve services, trust, bonus, buying, value strip */
@media(min-width:1000px){.svc-gallery.svc-12{grid-template-columns:repeat(3,1fr);gap:18px}.svc-12 .svc-card{padding:28px 24px 22px}}
.svc-start{margin-top:26px}
.nav-cta{border:2px solid var(--ink);padding:6px 12px;font-weight:600}
.nav-cta:hover{background:var(--ink);color:var(--cream)}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0 26px;padding:0;color:var(--muted);font-size:.92rem}
.trust li::before{content:'';display:inline-block;width:10px;height:10px;background:var(--green);margin-right:9px;vertical-align:1px}
.bonus-h{display:block;font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600;margin:16px 0 6px}
.bonus{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:.95rem}
.bonus li::before{content:'+';color:var(--green);font-weight:700;margin-right:8px}
.guar-line{border-left:4px solid var(--green);background:var(--paper);padding:12px 16px;color:var(--muted);margin:18px 0 0;font-size:.95rem}
.buy-wrap{margin-top:38px;border:2px solid var(--ink);background:var(--paper);padding:26px 26px 22px}
.buy{margin:12px 0 18px 20px;padding:0;display:grid;gap:8px}
.buy li{padding-left:6px}
.buy li::marker{font-family:'Space Grotesk';font-weight:700;color:var(--green)}
.vstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 6px}
@media(max-width:700px){.vstrip{grid-template-columns:1fr}}
.vstrip div{border:1px solid var(--line);background:var(--paper);padding:16px;font-size:.95rem}
.vstrip b{display:block;font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.svc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

.buy-loop{display:block;width:100%;max-width:520px;aspect-ratio:400/160;margin:6px 0 10px}

/* centering pass, Sep 9 */
.buy-wrap{text-align:center}
.buy-wrap .cmp-h3{text-align:center}
.buy-wrap .buy{text-align:left;max-width:560px;margin:12px auto 18px}
.buy-loop{margin:6px auto 10px}
.buy-wrap .btn{display:inline-block}
.svc-start{text-align:center}
.addons-wrap .cmp-h3,.bundles-wrap .cmp-h3,.cmp-wrap .cmp-h3{text-align:center}
.addons-wrap>.price-note,.bundles-wrap>.price-note{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.guar-line{max-width:720px}
.svc-cta{text-align:center}
.svc-cta .btn{display:inline-block;margin:0 auto}
.svc-cta .tel{display:block;margin-top:12px}
.vstrip div{text-align:center}
.trust{justify-content:flex-start}
@media(max-width:640px){.trust{justify-content:center;text-align:center}.svc-btns{justify-content:center}.hero-ctas{justify-content:center;text-align:center}.svc-hero-text{text-align:center}.svc-hero-text .page-kicker{text-align:center}}

/* faint photo backgrounds, baked into the image files (no CSS transparency) */
.hero{background-image:url(/bg-hero.jpg);background-size:cover;background-position:center center;background-repeat:no-repeat}
#process{background-image:url(/bg-process.jpg);background-size:cover;background-position:center;background-repeat:no-repeat}
#pricing{background-image:url(/bg-pricing.jpg);background-size:cover;background-position:center;background-repeat:no-repeat}

/* hero legibility over the graffiti */
.hero .intro,.hero .intro b,.hero p,.hero .fine,.hero .hero-note,.hero .price-note{color:var(--ink)}
.hero .intro{font-weight:500}
.hero .u{color:var(--ink);text-decoration-color:var(--green)}

.hero .hero-copy .ps{color:var(--ink)}
.hero .hero-copy .ps b{color:var(--green)}


@media(max-width:900px){.hero{background-image:url(/bg-hero-m.jpg);background-position:center top;background-size:cover}}

/* readability and rounded corners, Sep 9 */
:root{--muted:#3a3a35;--faint:#5b5a53;--line:#d9d7cd}
.hero p,.hero .intro,#process p,#process li,#pricing p,#pricing li,#pricing td,#pricing th{color:var(--ink)}
.small-label,.page-kicker,.kicker,.tag,.cc,.stage-kicker,.bonus-h,.ogroup,.vstrip b,.plan .tag,.bundle .tag,.tag-launch,.svc-cgo{font-size:.8rem}
.price-note,.reply-note,.svc-cline,.addon p,.bundle .mo,.plan .for,.bundle .for,.cform label,.trust,.foot-grid,.gripe p span,.svc-cfoot small,.plan .price small,.bundle .price small,.offer .big small,.hero .ps,.how-note,.guar-line,.vstrip div,.area-langs,.svc-cross,.aside-note{font-size:.98rem}
.btn{font-size:.9rem;letter-spacing:.08em}
.plan,.offer,.addon,.bundle,.card,.buy-wrap,.vstrip div,.price-box,.guar-line,.how-note,.gripe-stage,.faq-list details,.cmp-scroll,.loop-mockup,.svc-photo img,.post-cover img,.post-cover,.author,.rel-card,.svc-hero .loop,.stage-title,.olist .opt,.cform.order label.opt,.svc-cta,.area-list,.svc-card{border-radius:18px}
.trust li::before,.bonus li::before{border-radius:50%}
.cform input,.cform textarea,.cform select{border-radius:0}
.olist .opt.sel,.cform.order label.opt.sel{box-shadow:none;border:2px solid var(--ink)}

/* card footers wrap */
.svc-cfoot{flex-wrap:wrap;gap:8px 14px;align-items:baseline}
.svc-cprice small{white-space:normal}
.svc-cgo{white-space:nowrap}

/* inline booking widget */
.bw{border:2px solid var(--ink);border-radius:18px;background:var(--paper);padding:22px 22px 20px;margin:26px 0}
.bw-head{font-family:'Space Grotesk';font-weight:600;font-size:1.05rem;margin-bottom:12px}
.bw-head span{color:var(--muted);font-weight:400;font-size:.9rem}
.bw-note{color:var(--muted)}
.daytabs{display:flex;flex-wrap:nowrap;gap:8px;margin:4px 0 14px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.daytab{white-space:nowrap;flex-shrink:0}
.daytab,.tslot{font:inherit;font-family:'Space Grotesk';font-weight:600;font-size:.95rem;border:1px solid var(--line);background:var(--cream);color:var(--ink);padding:10px 14px;border-radius:999px;cursor:pointer}
.daytab:hover,.tslot:hover{border-color:var(--ink)}
.daytab.sel,.tslot.sel{background:var(--green);border-color:var(--green);color:var(--cream)}
.timegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.chosen{margin:14px 0 4px;color:var(--ink)}
.bw-form{display:grid;gap:16px;max-width:520px;margin-top:10px}
.bw-form label{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.bw-form input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 2px;font:inherit;color:var(--ink)}
.bw-form input:focus{outline:none;border-color:var(--green)}
.bw-form .btn{justify-self:start;cursor:pointer}
.bw-done{font-size:1.05rem;color:var(--ink)}
.final .bw{background:var(--cream)}

/* guides gallery, home page */
#guides{background:var(--paper)}
.gal{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start;margin-top:34px}
.gal-cov{display:block;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--bg)}
.gal-cov img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1) contrast(1.12)}
.gal-txt{display:flex;flex-direction:column;gap:12px;min-width:0}
.gal-txt h3{font-family:'Space Grotesk';font-size:1.5rem;font-weight:700;line-height:1.18;letter-spacing:-.01em;margin:0}
.gal-txt h3 a{color:var(--ink);text-decoration:none}
.gal-txt h3 a:hover{color:var(--green)}
.gal-txt p{color:var(--muted);margin:0;max-width:52ch}
.gal-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.g-arrow{font:inherit;font-family:'Space Grotesk';font-size:1rem;line-height:1;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:42px;height:42px;border-radius:999px;cursor:pointer}
.g-arrow:hover{border-color:var(--ink)}
.g-arrow:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.g-count{font-family:'Space Grotesk';font-weight:600;font-size:.85rem;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}
.g-all{margin-left:auto}
.gal-dots{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.g-dot{width:9px;height:9px;padding:0;border:1px solid var(--faint);background:transparent;border-radius:50%;cursor:pointer}
.g-dot:hover{border-color:var(--ink)}
.g-dot.on{background:var(--green);border-color:var(--green)}
.g-dot:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:900px){.gal{grid-template-columns:1fr;gap:24px}.gal-txt h3{font-size:1.3rem}.g-all{margin-left:0;width:100%}}

/* header fits the narrowest phones */
@media(max-width:420px){
  header nav{gap:6px}
  .wordmark{font-size:.98rem;letter-spacing:-.03em}
  header .langsel{gap:5px;font-size:.72rem}
  .search-btn span{display:none}
  .search-btn{padding:8px}
}
/* smallest phones still in use, iPhone SE and older Android at 320px */
@media(max-width:380px){
  .wrap{padding:0 16px}
  header nav{gap:4px}
  .wordmark{font-size:.9rem}
  header .langsel{gap:4px;font-size:.68rem}
  .socials{gap:14px;flex-wrap:wrap}
  /* long Georgian and Russian words must break rather than spill */
  h1,h2,h3{overflow-wrap:break-word}
  .btn{white-space:normal;padding-left:18px;padding-right:18px;letter-spacing:.08em}
}

/* checklist signup: on /checklist/ and at the end of every guide (src/subform.py) */
.subform{border:1px solid var(--ink);padding:24px 26px;margin:44px 0 0;max-width:560px}
.subform>b{font-family:'Space Grotesk',sans-serif;font-weight:600;display:block;margin-bottom:12px;line-height:1.3}
.subform-row{display:flex;gap:10px;flex-wrap:wrap}
.subform-row input{flex:1 1 220px;min-width:0;padding:13px 14px;border:1px solid var(--ink);border-radius:0;background:var(--bg);font:inherit;color:var(--ink)}
.subform-row input:focus{outline:none;border-color:var(--green)}
.subform-row .btn{cursor:pointer;font-family:inherit;white-space:nowrap}
.subform .subform-note{font-size:.85rem;color:var(--muted);line-height:1.5;margin:10px 0 0;max-width:none}
.subform .subform-ok{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--green);margin:0}
.subform [hidden]{display:none}
@media(max-width:640px){.subform-row .btn{width:100%;text-align:center}}

/* Four outcome groups on the home page, Sep 19 2026 */
.og-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media(max-width:760px){.og-grid{grid-template-columns:1fr}}
.og-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;display:flex;flex-direction:column}
.og-loop{display:block;width:76px;height:76px;margin-bottom:14px}
.og-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.32rem;line-height:1.15;margin:0 0 8px}
.og-card p{color:var(--muted);font-size:1rem;line-height:1.55;margin:0 0 16px;max-width:46ch}
.og-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.og-links a{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.86rem;text-decoration:none;color:var(--ink);background:var(--cream,#faf9f5);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:36px;display:inline-flex;align-items:center}
.og-links a:hover{border-color:var(--ink)}
.og-links a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.og-from{margin-top:auto;font-family:'Space Grotesk',sans-serif;font-size:.86rem;color:var(--muted)}
.og-from b{color:var(--green);font-size:1.05rem}
/* the language choice on the capture form, Sep 19 2026 */
.subform-lang{display:block;margin-top:10px;font-size:.9rem;color:var(--muted)}
.subform-lang select{font:inherit;font-size:.92rem;margin-left:6px;min-height:40px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.subform-lang select:focus-visible{outline:2px solid var(--green);outline-offset:2px}

  /* ---------------------------------------------------------------------
     The office, with a map to it. Added 19 September 2026: people want to
     see that there is a real room on a real street before they pay $999 a
     month. The iframe keeps its own aspect ratio so nothing jumps on load.
     --------------------------------------------------------------------- */
  .office{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--ink);border:1px solid var(--ink);margin:28px 0 8px}
  .office-map{background:var(--paper);min-height:260px;position:relative}
  .office-map iframe{display:block;width:100%;height:100%;min-height:260px;border:0;filter:grayscale(.35) contrast(1.05)}
  .office-copy{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:12px;justify-content:center}
  .office-copy p{margin:0;color:var(--muted);line-height:1.6}
  .office-addr{font-family:'Space Grotesk';font-weight:600;font-size:1.12rem;color:var(--ink) !important;line-height:1.35}
  @media (max-width:760px){
    .office{grid-template-columns:1fr}
    .office-map iframe{min-height:220px}
  }

  /* The three terms, side by side under the plans. */
  .terms-wrap{margin:34px 0 8px}
  .terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--ink);border:1px solid var(--ink)}
  .terms p{background:var(--paper);margin:0;padding:22px 20px;line-height:1.6;color:var(--muted)}
  .terms b{color:var(--ink)}
  .who-line{border-left:4px solid var(--green);background:var(--paper);padding:14px 18px;color:var(--muted);margin:18px 0 0;line-height:1.6}
  .who-line b{color:var(--ink)}

/* ===========================================================================
   19 September 2026. Nik's visual pass.
   1. The what-it-costs panel reads badly over the photograph, so the photo is
      faded further in the image file itself and the type there is larger.
   2. Curved edges on everything that should have them.
   3. The phone number in the header.
   4. A top bar that moves.
   5. A vine that starts at the hero and grows down the whole page.
   =========================================================================== */

/* --- 4. the moving top bar ------------------------------------------------
   The same sentence drifting slowly left. Vibrant, but a deep green on mint
   rather than a colour on black, and it stops the moment someone has asked
   their system for less motion, when the plain centred line shows instead. */
.topbar{position:relative;overflow:hidden;background:var(--mint);color:var(--green);
  font-size:.84rem;letter-spacing:.055em;font-weight:600;padding:10px 16px;
  border-bottom:1px solid rgba(91,58,134,.18)}
.topbar a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.topbar a:hover{color:#0f4a29}
.tb-track{display:flex;width:max-content;gap:0;animation:tb-drift 38s linear infinite;will-change:transform}
.tb-run{white-space:nowrap;padding-right:64px;position:relative}
.tb-run::after{content:"";position:absolute;right:28px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--green);opacity:.45}
.tb-static{display:none;text-align:center}
.topbar:hover .tb-track{animation-play-state:paused}
@keyframes tb-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333%,0,0)}}
@media (prefers-reduced-motion: reduce){
  .tb-track{display:none}
  .tb-static{display:block}
}

/* --- 3. the phone number in the header ----------------------------------- */
.nav-tel{display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding:8px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-family:'Space Grotesk';font-weight:600;font-size:.9rem;color:var(--ink);
  white-space:nowrap;transition:border-color .15s,background .15s}
.nav-tel svg{width:15px;height:15px;fill:var(--green);flex:0 0 auto}
.nav-tel:hover{border-color:var(--green);background:var(--mint)}
@media(max-width:1180px){.nav-tel span{display:none}.nav-tel{padding:8px 10px;margin-left:8px}}
@media(max-width:900px){.nav-tel{display:none}}

/* --- 1. the what-it-costs panel ------------------------------------------
   The photograph behind this section is now faded to a whisper in the file
   itself, so nothing here needs CSS transparency. What was left was type that
   was too small for the most important screen on the site. */
#pricing{padding-top:6px}
#pricing .lead{font-size:1.22rem;line-height:1.62;max-width:46ch;color:var(--ink)}
#pricing .h2{letter-spacing:-.015em}
#pricing .trust{gap:14px 26px;margin:22px 0 30px}
#pricing .trust li{font-size:1.02rem;color:var(--ink)}
#pricing .offer{background:var(--paper);border:2px solid var(--ink);border-radius:26px;box-shadow:0 2px 0 rgba(23,23,19,.06)}
#pricing .offer .big{font-size:clamp(2.9rem,6vw,4.1rem);letter-spacing:-.02em}
#pricing .offer .big small{font-size:1rem;letter-spacing:.02em;color:var(--muted)}
#pricing .offer h3{font-size:1.32rem;line-height:1.3}
#pricing .offer p{font-size:1.06rem;line-height:1.62}
#pricing .offer .bonus li{font-size:1.02rem}
#pricing .plan{background:var(--paper);border-radius:26px;border:1px solid var(--ink)}
#pricing .plan.mid{border-width:2px;box-shadow:0 3px 0 rgba(91,58,134,.16)}
#pricing .plan h3{font-size:1.5rem}
#pricing .plan .for{font-size:1.02rem;line-height:1.55;color:var(--muted)}
#pricing .plan .price{font-size:clamp(2.4rem,4.6vw,3.1rem);letter-spacing:-.02em}
#pricing .plan .price small{font-size:.98rem;color:var(--muted)}
#pricing .plan ul li{font-size:1.04rem;line-height:1.6}
#pricing .cmp{font-size:1.02rem}
#pricing .cmp th{font-size:.92rem;letter-spacing:.08em}
#pricing .cmp td{padding-top:15px;padding-bottom:15px}
#pricing .cmp-scroll{border-radius:22px;overflow-x:auto;overflow-y:hidden;background:var(--paper);border:1px solid var(--ink)}
#pricing .buy li{font-size:1.06rem;line-height:1.6}
#pricing .price-note{font-size:1rem;line-height:1.62}
#pricing .addon{background:var(--paper);border-radius:22px}
#pricing .addon b{font-size:1.06rem}
#pricing .addon p{font-size:1rem;line-height:1.58}
.terms p{border-radius:0}
.terms-wrap .terms{border-radius:22px;overflow:hidden}
.terms p{font-size:1.06rem}
.who-line{border-radius:0 18px 18px 0;font-size:1.04rem}

/* --- 2. curved edges on everything that should have them ------------------ */
.topbar{border-radius:0}
.btn,.nav-cta,.u-btn,.promo .btn,.svc-btns .btn,.cform button,.tp-book,button.btn{border-radius:999px}
.search-btn{border-radius:999px}
.langsel a{border-radius:999px}
.tr-pills a,.svc-cross a,.area-langs a{border-radius:999px}
.og-card,.svc-card,.tcard,.shot .thumb,.shot,.ex-pane,.explorer,.promo,.bw,.so-box,
.office,.office-map,.terms,.cmp-scroll,.addons .addon,.guides .guide,.gd-card,
.post-card,.rel-card,.area-card,.tr-index a,.faq-list details,.founder,.fcard,
.step,.stage,.cs-card,.work-card,.demo-frame,.book-widget{border-radius:22px}
.shot .thumb img,.svc-photo img,.post-cover img,.founder img,.fcard img,.office-map iframe{border-radius:18px}
.tgrid,.terms,.office{overflow:hidden}
.cmp-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.plans>*,.addons>*{border-radius:22px}
.tag,.tag-launch,.small-label.pill,.ap{border-radius:999px}
input[type=search],.so-row input{border-radius:999px}
.ticker{border-radius:0}

/* --- 5. the vine ----------------------------------------------------------
   Pinned behind every section, drawn on as the reader scrolls. It sits in the
   left gutter on a wide screen and is hidden below 1100px, where there is no
   gutter to put it in and it would cross the text. */
.vine{position:absolute;top:0;left:max(8px,calc((100vw - 1240px)/2 - 78px));width:120px;
  z-index:0;pointer-events:none;overflow:visible}
.vine svg{width:120px;height:100%;display:block;overflow:visible}
#vineStem{stroke:var(--green);stroke-width:2.4;stroke-linecap:round;fill:none;opacity:.5}
.vine-leaf{fill:var(--green);opacity:0;transform-box:fill-box;transform-origin:0 50%;
  transition:opacity .45s ease}
.vine-leaf.on{opacity:.34}
@media (prefers-reduced-motion: reduce){.vine{display:none}}
body{position:relative}
header,.topbar,.hero,section,footer{position:relative;z-index:1}
.mob-bar{position:fixed!important;z-index:60!important;border-radius:0}

/* The whole bar is the link, so the sentence can move without anyone having to
   chase it with a cursor. The call to action stays still on the right. */
a.topbar{display:flex;align-items:center;gap:0;text-decoration:none;cursor:pointer}
a.topbar:hover{background:#ece9df}
.topbar .tb-track{flex:1 1 auto;min-width:0}
.tb-cta{flex:0 0 auto;position:relative;z-index:2;margin-left:18px;padding-left:18px;
  border-left:1px solid rgba(91,58,134,.25);white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.tb-cta i{font-style:normal;display:inline-block;animation:tb-nudge 1.8s ease-in-out infinite}
@keyframes tb-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion: reduce){.tb-cta i{animation:none}}
@media(max-width:760px){.tb-cta{display:none}}

/* The nav had no room left once the phone went in. */
header nav{gap:18px}
.nav-links{gap:16px}
.wordmark{margin-right:14px}
@media(max-width:1320px){.nav-links{gap:13px}header nav{gap:12px}}
@media(max-width:1180px){.search-btn span{display:none}}

/* The vine sits above the section photographs but below every word on the
   page, and only ever in the left gutter, so it can never cross the text. */
.vine{z-index:3}

/* The running line has to clip inside its own box, or it runs under the call
   to action at the right edge. */
.topbar .tb-track{overflow:hidden;position:relative}
.topbar .tb-track::after{content:"";position:absolute;right:0;top:0;bottom:0;width:56px;
  background:linear-gradient(90deg,rgba(224,240,228,0),var(--mint))}
a.topbar{padding-right:20px}

/* The vine moved to the right gutter, and it is now positioned and sized by
   its own script from the real page, so the stylesheet only sets the look. */
.vine{left:auto;right:auto;top:0;width:132px;overflow:visible}
.vine svg{width:100%;height:100%;display:block;overflow:visible}
#vineStem{stroke:var(--green);stroke-width:2.6;stroke-linecap:round;fill:none;opacity:.52}
.vine-curl{stroke:var(--green);stroke-width:1.9;stroke-linecap:round;fill:none;opacity:.42}
.vine-bud{fill:var(--green);opacity:0;transition:opacity .4s ease}
.vine-leaf{fill:var(--green);opacity:0;transition:opacity .5s ease}
.vine-leaf.on{opacity:.32}

/* The middle plan carries a tag and the other two do not, which knocked the
   three prices out of line. Reserve the tag's height on every card. */
#pricing .plans{align-items:stretch}
#pricing .plan{display:flex;flex-direction:column}
#pricing .plan .tag{display:block;min-height:1.35em}
#pricing .plan .for{min-height:4.9em}
#pricing .plan ul{flex:1 1 auto}
@media(max-width:820px){#pricing .plan .for,#pricing .plan .tag{min-height:0}}

/* On a phone the running line never shows the whole sentence and there is no
   room for the call to action beside it, so the bar goes still and wraps. */
@media(max-width:760px){
  .topbar .tb-track{display:none}
  .topbar .tb-static{display:block;text-align:center;line-height:1.45}
  a.topbar{justify-content:center;padding:9px 14px}
}

/* ---- the vine, thicker, with a visible head ------------------------------
   Nik: thicker, cooler, and the thing that tells you there is more below. */
.vine{width:150px}
#vineStem{stroke-width:4.2;opacity:.55}
.vine-curl{stroke-width:2.8;opacity:.45}
.vine-leaf.on{opacity:.38}
.vine-bud{r:4}
.vine-tip{opacity:0;transition:opacity .35s ease}
.vine-tip-dot{fill:var(--green)}
.vine-tip-halo{fill:var(--green);opacity:.14;animation:vine-pulse 2.4s ease-in-out infinite}
.vine-tip-leaf{fill:var(--green);opacity:.5;transform-box:fill-box;transform-origin:0 50%;
  animation:vine-sway 3.6s ease-in-out infinite}
@keyframes vine-pulse{0%,100%{transform:scale(1);opacity:.14}50%{transform:scale(1.35);opacity:.06}}
@keyframes vine-sway{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@media (prefers-reduced-motion: reduce){.vine-tip-halo,.vine-tip-leaf{animation:none}}

/* ---- the opening --------------------------------------------------------
   The wordmark arrives big in the hero with the vine drawing underneath it,
   then travels into the corner it normally lives in. Everything behind it is
   already rendered; this only sits on top for a second and a half. */
html.rg-intro-on{overflow:hidden}
html.rg-intro-on header .wordmark{opacity:0}
.rg-intro{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:var(--paper);pointer-events:none}
.rg-intro.gone{opacity:0;transition:opacity .5s ease}
.rg-intro-in{display:flex;flex-direction:column;align-items:center;gap:6px}
.rg-intro-mark{font-family:'Space Grotesk';font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.6rem,7.2vw,5.4rem);color:var(--ink);line-height:1;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .72s cubic-bezier(.2,.7,.2,1)}
.rg-intro-mark i{font-style:normal;color:var(--green)}
.rg-intro.draw .rg-intro-mark{opacity:1;transform:translateY(0)}
.rg-intro-vine{width:min(640px,78vw);height:auto;display:block;margin-top:-4px}
.rg-iv-stem{stroke:var(--green);stroke-width:4.4;stroke-linecap:round;fill:none;opacity:.6;
  transition:stroke-dashoffset 1.25s cubic-bezier(.35,.1,.2,1)}
.rg-intro.draw .rg-iv-stem{stroke-dashoffset:0 !important}
.rg-iv-leaf{fill:var(--green);opacity:0;transition:opacity .42s ease}
.rg-intro.draw .rg-iv-leaf{opacity:.42}
.rg-intro.fly .rg-intro-mark{transition:transform .74s cubic-bezier(.55,0,.2,1),opacity .3s ease .5s;opacity:0}
.rg-intro.fly .rg-intro-vine{opacity:0;transform:translateY(22px);
  transition:opacity .45s ease,transform .6s cubic-bezier(.4,0,.2,1)}
.rg-intro.fly{background:transparent;transition:background .55s ease}
header .wordmark{transition:opacity .45s ease .12s}

/* ---- corrections, 19 September 2026 -------------------------------------
   Two mistakes, both mine. The vine was hidden below 1180px, so on any window
   narrower than that it looked as though it had simply gone. And the opening
   played on a blank cream screen instead of inside the hero photograph, which
   is the whole point of it.
   ------------------------------------------------------------------------- */

/* The vine now runs down to 600px. Where there is no gutter it hugs the right
   edge with most of its band off-canvas, so it is visible and still never
   crosses a word. The page must not gain a sideways scrollbar because of it. */
html,body{overflow-x:hidden}
/* One rule decides whether the vine shows. Its position and width are set
   by vine.js from the real page, so the stylesheet must not fight it. */
.vine{display:block}
@media (max-width:600px){.vine{display:none}}
/* vine.js takes the vine away when there is no free space beside the text. */
.vine.vine-off{display:none}
/* A narrow column: a lighter line, so it reads as a thread, not a bar. */
.vine.vine-tight #vineStem{stroke-width:2.1;opacity:.44}
.vine.vine-tight .vine-leaf.on{opacity:.26}
.vine.vine-tight .vine-curl{opacity:.3}
.vine.vine-tight .vine-num-ring{r:11}
.vine.vine-tight .vine-num-txt{font-size:9px}

/* The sections the vine passes behind. Same list as BEHIND in vine.js. */
#faces,#work,.photo-strip,footer{position:relative;z-index:4}

/* The numbers: one node per section, on the stem where the section starts.
   It pops in when the stem has grown past it, and fills while you are in
   that section. */
.vine-num-in{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.vine-num.on .vine-num-in{opacity:1;transform:scale(1)}
.vine-num-ring{fill:var(--bg);stroke:var(--green);stroke-width:1.6;transition:fill .3s ease}
.vine-num-txt{font-family:'Space Grotesk',system-ui,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;fill:var(--green);transition:fill .3s ease}
.vine-num.is-here .vine-num-ring{fill:var(--green)}
.vine-num.is-here .vine-num-txt{fill:var(--bg)}

/* The opening sits on the hero's own box, so the Brooklyn photograph is behind
   the wordmark. A soft veil, not a flat fill, keeps the type readable over the
   graffiti without hiding the picture. */
.rg-intro{position:absolute;left:0;right:0;inset:auto 0 auto 0;
  background:linear-gradient(180deg,rgba(253,252,248,.90),rgba(253,252,248,.72) 46%,rgba(253,252,248,.90));
}
.rg-intro.fly{background:linear-gradient(180deg,rgba(253,252,248,0),rgba(253,252,248,0));
  backdrop-filter:none;transition:background .6s ease,backdrop-filter .6s ease}
.rg-intro-mark{text-shadow:0 1px 0 rgba(253,252,248,.7)}
html.rg-intro-on{overflow:hidden}

/* During the opening, the hero's own headline and mock-up fade back so the
   wordmark stands alone against the photograph. They come back as it flies. */
html.rg-intro-on .hero-copy,
html.rg-intro-on .loop-hero,
html.rg-intro-on .ticker{opacity:0}
.hero-copy,.loop-hero,.ticker{transition:opacity .55s ease .15s}
.rg-intro{background:linear-gradient(180deg,rgba(253,252,248,.62),rgba(253,252,248,.40) 46%,rgba(253,252,248,.70))}
.rg-intro-mark{text-shadow:0 1px 0 rgba(253,252,248,.9)}

/* The hero copy must be gone before the wordmark arrives, not fading behind
   it, or the two overlap and both look wrong. Out fast, back in gently. */
html.rg-intro-on .hero-copy,
html.rg-intro-on .loop-hero,
html.rg-intro-on .ticker{opacity:0;transition:opacity .18s ease}

/* ---- the vine, second pass ---------------------------------------------
   Nik: let me grab it and move up and down, and make it smoother, and let the
   logo grow out of the corner and shrink back into it while the vine hands
   off to the right.
   ------------------------------------------------------------------------- */

/* Grabbing. The column takes pointer events only on the fat invisible copy of
   the stem, so the rest of the page is untouched. */
.vine{pointer-events:none;touch-action:pan-y}
.vine svg{pointer-events:none}
.vine-grab{stroke:transparent;stroke-width:34;fill:none;stroke-linecap:round;
  pointer-events:stroke;cursor:grab}
.vine.vine-holding .vine-grab{cursor:grabbing}
/* Only the stroke takes the pointer. The column itself must stay
   pointer-events:none, or it swallows clicks on whatever sits under it
   (the topbar's link at the right end, for one). */
.vine>svg>*:not(.vine-grab){pointer-events:none}
.vine-num-txt{user-select:none;-webkit-user-select:none}
html.rg-vine-drag{cursor:grabbing;user-select:none}
html.rg-vine-drag *{cursor:grabbing !important}
.vine.vine-holding #vineStem{opacity:.78;stroke-width:5}
.vine.vine-holding .vine-tip-dot{r:7}
.vine.vine-holding .vine-tip-halo{animation:none;opacity:.22;transform:scale(1.5)}
#vineStem,.vine-tip-dot{transition:opacity .25s ease,stroke-width .25s ease,r .25s ease}

/* A small hint the first time, so the rope is discoverable. */
.vine-tip-halo{animation:vine-pulse 3.2s ease-in-out infinite}

/* The opening: out of the corner, big, then back into the corner while the
   flourish retracts to the right and becomes the long vine. */
.rg-intro-mark{opacity:1;transform-origin:50% 50%;
  transition:transform .86s cubic-bezier(.22,.9,.24,1)}
.rg-intro.grow .rg-intro-mark{transition:transform .86s cubic-bezier(.22,.9,.24,1)}
.rg-intro.retract .rg-intro-mark{transition:transform .72s cubic-bezier(.6,0,.2,1)}
.rg-intro-vine{width:min(640px,74vw);height:auto;display:block;margin-top:2px;
  opacity:0;transform:scaleX(.2);transform-origin:0 50%;
  transition:opacity .35s ease,transform .7s cubic-bezier(.22,.9,.24,1)}
.rg-intro.grow .rg-intro-vine{opacity:1;transform:scaleX(1)}
.rg-iv-stem{transition:stroke-dashoffset 1.15s cubic-bezier(.32,.06,.2,1)}
.rg-intro.draw .rg-iv-stem{stroke-dashoffset:0 !important}
.rg-intro.draw .rg-iv-leaf{opacity:.44}
/* retract: the flourish pulls to the right and thins, as if being drawn away
   into the vine that is about to run down the right-hand side */
.rg-intro.retract .rg-intro-vine{opacity:0;transform:scaleX(.06) translateX(560px);
  transform-origin:100% 50%;
  transition:opacity .5s ease .1s,transform .62s cubic-bezier(.6,0,.2,1)}
.rg-intro.retract{background:linear-gradient(180deg,rgba(253,252,248,0),rgba(253,252,248,0));
  backdrop-filter:none;transition:background .6s ease,backdrop-filter .6s ease}
.rg-intro.gone{opacity:0;transition:opacity .55s ease}
html.rg-intro-on header .wordmark{opacity:0}

/* While a hand is on the vine, the page must not also be easing itself
   somewhere. Smooth scrolling is for anchor links, not for a rope. */
html.rg-vine-drag{scroll-behavior:auto}

/* ---- pricing, made readable in one pass ---------------------------------
   Nik: it has to be so easy a child gets it. Two numbers at the top, then one
   table of ticks, then three lines of terms. Everything else comes after.
   ------------------------------------------------------------------------- */
.two{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;margin:26px 0 22px}
.two-card{background:var(--paper);border:2px solid var(--ink);border-radius:26px;padding:28px 28px 24px;
  position:relative;display:flex;flex-direction:column;gap:10px}
.two-card-b{border-color:var(--green);box-shadow:0 3px 0 rgba(91,58,134,.14)}
.two-when{font-family:'Space Grotesk';font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);font-weight:600}
.two-num{font-family:'Space Grotesk';font-weight:700;letter-spacing:-.025em;line-height:1;
  font-size:clamp(2.4rem,4.6vw,3.5rem);color:var(--ink)}
.two-num small{font-size:1rem;font-weight:500;letter-spacing:.01em;color:var(--muted)}
.two-card p{margin:0;font-size:1.06rem;line-height:1.6;color:var(--muted)}
.two-card .bonus{margin:6px 0 0}
.two-card .loop-badge{position:absolute;right:16px;bottom:10px;width:112px;height:112px;opacity:.9}
.two-plus{display:grid;place-items:center;padding:0 18px}
.two-plus span{font-family:'Space Grotesk';font-weight:700;font-size:1rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px}
@media(max-width:900px){
  .two{grid-template-columns:1fr;gap:14px}
  .two-plus{padding:0}
  .two-card .loop-badge{display:none}
}

/* The tick table. Rows are plain English, columns are the three plans. */
table.tick{width:100%;border-collapse:collapse;background:var(--paper);font-size:1.02rem}
.tick th,.tick td{border-bottom:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:middle}
.tick thead th{font-family:'Space Grotesk';font-size:.9rem;letter-spacing:.06em;font-weight:600;
  color:var(--ink);border-bottom:2px solid var(--ink);white-space:nowrap}
.tick thead th:not(:first-child),.tick td{text-align:center;width:16%}
.tick tbody th{font-weight:400;color:var(--ink);width:52%}
.tick tbody tr:last-child th,.tick tbody tr:last-child td{border-bottom:0}
.tick i{font-style:normal;font-size:1.22rem;line-height:1}
.tick i.y{color:var(--green);font-weight:700}
.tick i.n{color:var(--faint)}
.tick td b{font-family:'Space Grotesk';font-weight:600;font-size:.98rem;white-space:nowrap}
.tick-wrap{margin:34px 0 8px}
@media(max-width:760px){
  .tick,.tick thead th{font-size:.94rem}
  .tick th,.tick td{padding:11px 10px}
  .tick tbody th{width:44%}
}

/* The two cards sit level even though one holds a list and the other a
   paragraph, and the middle plan's tag no longer pushes its price out of line
   with the other two. */
.two-card{justify-content:flex-start}
.two-card-b{justify-content:center}

/* ---- the section branches -----------------------------------------------
   Nik: when the vine reaches a section it should stop, reach out under that
   section's heading, hold while you read, then retreat back to the right.

   One full-width layer in page coordinates holds them. Each branch is a
   single dashed stroke, so drawing and retracting are the same number moving
   in opposite directions, which is what makes it smooth instead of a cut.
   Drawing is slow and eased out; retracting is quicker and eased in, because
   a plant reaches out slowly and pulls back fast.
   ------------------------------------------------------------------------- */
.vine-branches{position:absolute;top:0;left:0;z-index:3;pointer-events:none;overflow:visible}
.vb-stem{stroke:var(--green);stroke-width:2.8;stroke-linecap:round;fill:none;opacity:0;
  transition:stroke-dashoffset .95s cubic-bezier(.16,.84,.30,1),opacity .35s ease}
.vine-branch.on .vb-stem{opacity:.5}
.vine-branch:not(.on) .vb-stem{
  transition:stroke-dashoffset .62s cubic-bezier(.55,0,.75,.2),opacity .3s ease .32s}
.vb-leaf{fill:var(--green);opacity:0;transform-box:fill-box;transform-origin:0 50%;
  transition:opacity .42s ease}
.vine-branch.on .vb-leaf{opacity:.32}
@media (max-width:1180px){
  .vb-stem{stroke-width:2.4}
  .vine-branch.on .vb-stem{opacity:.42}
  .vine-branch.on .vb-leaf{opacity:.24}
}
@media (max-width:600px){.vine-branches{display:none}}
@media (prefers-reduced-motion: reduce){.vine-branches{display:none}}

/* ---- three prices, not a comma run -------------------------------------
   Nik: the three monthly prices were separated by commas, which reads as one
   long number and says nothing about which is which. They are a set of three
   now: each number over the name of its plan, hairline rules between them
   rather than punctuation, and each cell is a link down to its own card. The
   middle one is marked, because most people take it.
   ------------------------------------------------------------------------- */
.three{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--paper);
  margin:4px 0 2px}
.three-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:18px 10px 14px;text-decoration:none;color:var(--ink);
  border-left:1px solid var(--line);transition:background .18s ease,transform .18s ease}
.three-cell:first-child{border-left:0}
.three-cell:hover{background:var(--mint);transform:translateY(-2px)}
.three-cell:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.three-num{font-family:'Space Grotesk';font-weight:700;letter-spacing:-.022em;line-height:1;
  font-size:clamp(1.7rem,3.1vw,2.5rem);font-variant-numeric:tabular-nums;color:var(--ink)}
.three-name{font-family:'Space Grotesk';font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green)}
.three-cell.is-most{background:var(--mint)}
.three-cell.is-most:hover{background:#ece9df}
.three-tag{position:absolute;top:0;left:50%;transform:translate(-50%,-1px);
  font-family:'Space Grotesk';font-weight:600;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--green);
  padding:3px 10px 4px;border-radius:0 0 10px 10px;white-space:nowrap;max-width:92%;
  overflow:hidden;text-overflow:ellipsis}
.three-cell.is-most{padding-top:28px}
.three-unit{display:block;text-align:center;font-size:.92rem;color:var(--muted);margin-top:6px}
@media(max-width:520px){
  .three-num{font-size:1.5rem}
  .three-name{font-size:.68rem;letter-spacing:.1em}
  .three-tag{font-size:.56rem;padding:3px 7px 4px}
  .three-cell{padding:16px 6px 12px}
  .three-cell.is-most{padding-top:24px}
}

/* Numbers that sit in a column should line up. Everywhere, not just here. */
.plan .price,.two-num,.tick td b,.cmp td,.three-num,.offer .big{font-variant-numeric:tabular-nums}

/* The comparison table's money column was a run of figures and plus signs.
   The figures stay, the plus becomes a thin mark that separates rather than
   adds to the sentence. */
.cmp td:nth-child(2){font-variant-numeric:tabular-nums;white-space:normal}
.cmp-us td{background:var(--mint)}
.cmp-us td:first-child{font-weight:600}

/* The chip sits over a third of a card, so it takes a short word and is given
   room to show all of it rather than trailing off in an ellipsis. */
.three-tag{max-width:none;overflow:visible;text-overflow:clip;font-size:.6rem;padding:3px 9px 4px}
.three-unit{font-size:.95rem;color:var(--muted);letter-spacing:.01em;margin-top:9px}
@media(max-width:520px){.three-tag{font-size:.52rem;padding:3px 5px 4px;letter-spacing:.08em}}

/* A price cell in the comparison table: what you pay once above what you pay
   every month, with a hairline between, so the monthly line can be read down
   the column on its own. */
.mc{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mc-once{font-variant-numeric:tabular-nums}
.mc-once b{font-family:'Space Grotesk';font-weight:600}
.mc-once i{font-style:normal;font-size:.84rem;color:var(--faint);letter-spacing:.04em;
  text-transform:uppercase}
.mc-mo{font-variant-numeric:tabular-nums;color:var(--muted)}
.mc-once + .mc-mo{padding-top:6px;border-top:1px solid var(--line);align-self:stretch}
.cmp-us .mc-mo{color:var(--ink);font-weight:600}

/* Four things, laid out three and one, reads as a mistake. Two by two is the
   readable answer for exactly four, at every width above a phone. */
.addons{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.addons{grid-template-columns:1fr}}
.addon{display:flex;flex-direction:column;gap:6px}
.addon b{font-family:'Space Grotesk';font-size:1.06rem}
.addon .ap{font-family:'Space Grotesk';font-weight:700;font-size:1.45rem;color:var(--green);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ---- no dark blanks ------------------------------------------------------
   Three of these grids drew their dividing lines by sitting on a dark
   background and letting it show through a 1px gap. That works only while
   every cell is filled. The terms row has three items in a grid that fits two
   per line at some widths, so the fourth cell was empty and the backing
   showed through as a solid black block.

   The backing is gone. Each cell carries its own hairline, so an empty cell
   is simply nothing, at any width, for any number of items.
   ------------------------------------------------------------------------- */
.terms{background:transparent;border:1px solid var(--line);gap:0;
  grid-template-columns:repeat(3,1fr)}
.terms p{background:var(--paper);border-left:1px solid var(--line)}
.terms p:first-child{border-left:0}
@media(max-width:900px){
  .terms{grid-template-columns:1fr}
  .terms p{border-left:0;border-top:1px solid var(--line)}
  .terms p:first-child{border-top:0}
}

.tgrid{background:transparent;border:1px solid var(--line);gap:0}
.tcard{border-left:1px solid var(--line)}
.tcard:first-child{border-left:0}
@media(max-width:640px){
  .tcard{border-left:0;border-top:1px solid var(--line)}
  .tcard:first-child{border-top:0}
}

.office{background:transparent;border:1px solid var(--line);gap:0}
.office-copy{border-left:1px solid var(--line)}
@media(max-width:760px){.office-copy{border-left:0;border-top:1px solid var(--line)}}

/* ---- what makes us different -------------------------------------------
   Two pledges and two plain differences. The two pledges are marked, because
   they are the ones a reader will be sceptical about and they should be easy
   to find again. No dark backing anywhere: each card carries its own line,
   so an odd number of cards can never leave a black hole.
   ------------------------------------------------------------------------- */
#different .gv{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
@media(max-width:820px){#different .gv{grid-template-columns:1fr}}
.gv-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px}
.gv-card h3{font-family:'Space Grotesk';font-weight:600;font-size:1.22rem;margin:0;line-height:1.3}
.gv-card p{margin:0;color:var(--muted);line-height:1.65;font-size:1.04rem}
.gv-mark{display:block;width:96px;height:96px;border-radius:22px;background:var(--mint);
  color:var(--green);margin-bottom:6px;overflow:hidden;line-height:0}
.gv-mark svg{width:100%;height:100%;display:block}
@media(max-width:820px){.gv-mark{width:80px;height:80px;border-radius:18px}}
.gv-card.gv-give{border-color:var(--green);box-shadow:0 2px 0 rgba(91,58,134,.10)}
.gv-card.gv-give h3{color:var(--ink)}
.gv-note{border-left:4px solid var(--green);background:var(--paper);padding:14px 18px;
  color:var(--muted);margin:22px 0 0;line-height:1.65;font-size:1rem;border-radius:0 18px 18px 0}

  /* ===== welcome (the page in front of the site) =====
     Nik, 2026-09-22: like Plaid. Statement on the left, a white card of
     choices on the right, no stars, no Next button: picking a row opens the
     form. The greeting keeps a fixed two-line box so nothing below it moves
     when the language changes. Fits one screen. */
  .welcome-body{background:var(--bg)}
  .wel{min-height:100vh;position:relative;overflow:hidden}
  .wel-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(20px,5vw,64px);border-bottom:1px solid var(--line)}
  .wel-brand{font-family:'Space Grotesk';font-weight:700;font-size:1.28rem;letter-spacing:-.01em;color:var(--ink);display:inline-block;line-height:1.1;white-space:nowrap}
  .wel-brand small{display:block}
  .wel-brand b{color:var(--green);font-weight:700}
  .wel-brand small{font-family:'Inter';font-weight:500;font-size:.62rem;letter-spacing:.24em;color:var(--muted);margin-top:4px}
  .wel-langs{display:flex;gap:4px;flex-wrap:wrap}
  .wel-langs a{font-family:'Space Grotesk';font-size:.84rem;letter-spacing:.04em;padding:8px 12px;border:1px solid transparent;border-radius:0;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
  .wel-langs .flag{font-size:1.05em;line-height:1}
  .wel-langs a:hover{color:var(--ink)}
  .wel-langs a.on{color:var(--ink);border-color:var(--ink)}
  .wel-main{max-width:1320px;margin:0 auto;padding:clamp(28px,6vh,64px) clamp(20px,4vw,40px) 40px;display:grid;grid-template-columns:1fr 1.02fr;gap:40px clamp(32px,5vw,80px);align-items:start;position:relative;z-index:2}
  @media(min-width:901px){.wel{padding-right:clamp(70px,9vw,150px)}}
  .wel-left{position:relative;padding-right:clamp(0px,3vw,40px)}
  .wel-greet{font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.06;min-height:3.2em}
  .wel-line{display:block;font-family:'Instrument Serif';font-style:italic;font-weight:400;color:var(--green);font-size:1em;letter-spacing:-.015em;text-wrap:balance;transition:opacity .33s ease,transform .33s ease}
  .wel-greet.is-out .wel-line{opacity:0;transform:translateY(8px)}
  .wel-checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:46ch}
  .wel-checks li{position:relative;padding-left:28px;color:var(--ink);font-size:1.12rem;line-height:1.5}
  .wel-checks li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:var(--green);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
  .wel-trades{margin:28px 0 0;color:var(--faint);font-size:.94rem;letter-spacing:.02em;max-width:46ch}
  .wel-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,2.6vw,36px);box-shadow:0 1px 0 var(--line);min-height:470px;display:flex;flex-direction:column}
  .wel-q{font-family:'Space Grotesk';font-weight:600;font-size:clamp(1.4rem,2.1vw,1.8rem);letter-spacing:-.01em;line-height:1.2;margin:0 0 14px}
  .wel-p{color:var(--muted);margin:0 0 16px;max-width:60ch;font-size:.96rem}
  .wel-opts{display:grid;gap:10px}
  .wel-opt{display:grid;grid-template-columns:76px 1fr auto 18px;gap:0 16px;align-items:center;padding:14px 14px 14px 12px;border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;position:relative;background:var(--bg)}
  .wel-opt:hover{border-color:var(--ink);transform:translateX(2px)}
  .wel-opt.is-on{border-color:var(--green);background:var(--mint)}
  .wel-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
  .wel-ico{width:76px;height:76px;display:block;border-radius:14px;background:var(--paper);border:1px solid var(--line);padding:4px;box-sizing:border-box}
  .wel-opt.is-on .wel-ico{border-color:var(--green)}
  .wel-ot{display:flex;flex-direction:column;gap:1px;min-width:0}
  .wel-ot b{font-family:'Space Grotesk';font-weight:600;font-size:1.16rem;line-height:1.25;color:var(--ink)}
  .wel-ot span{color:var(--muted);font-size:.98rem;line-height:1.42}
  .wel-price{font-family:'Space Grotesk';font-weight:600;font-size:1.08rem;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
  .wel-price small{font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
  .wel-arrow{color:var(--faint);font-size:1.1rem;transition:color .18s,transform .18s}
  .wel-opt:hover .wel-arrow{color:var(--ink);transform:translateX(2px)}
  .wel-under{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;padding:0 6px}
  .wel-call{color:var(--muted);font-size:.94rem}
  .wel-call:hover{color:var(--ink)}
  .wel-acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px}
  .wel-back{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;margin-bottom:12px;text-align:left}
  .wel-back:hover{color:var(--ink)}
  .wel-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:4px}
  .wel-fields label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--muted)}
  .wel-fields input,.wel-fields select{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 13px;width:100%;min-width:0}
  .wel-fields input:focus,.wel-fields select:focus{outline:none;border-color:var(--ink)}
  .hp{position:absolute;left:-9999px}
  /* the vine: the site's own, hanging from the bar on the right */
  .wel-plant{position:absolute;top:78px;right:clamp(8px,2.2vw,34px);width:min(9vw,124px);height:auto;max-height:66vh;z-index:0;pointer-events:none;transform:scaleY(-1);opacity:.6}
  .pl-stem{stroke-dasharray:1000;stroke-dashoffset:1000;animation:pl-draw 3.2s cubic-bezier(.4,0,.2,1) .3s forwards}
  @keyframes pl-draw{to{stroke-dashoffset:0}}
  .pl-open{transform-origin:0 0;transform:scale(0);animation:pl-open .7s cubic-bezier(.2,.9,.3,1.2) forwards}
  @keyframes pl-open{to{transform:var(--s,scale(1))}}
  .pl-leaf path:first-child{opacity:.55}
  .pl-node,.pl-bud{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:pl-node .5s cubic-bezier(.2,.9,.3,1.2) forwards}
  @keyframes pl-node{to{transform:scale(1)}}
  .pl-tendril{stroke-dasharray:1000;stroke-dashoffset:1000;animation:pl-draw 1.4s ease-out forwards}
  .pl-sway{transform-box:fill-box;transform-origin:50% 100%;animation:pl-sway 7s ease-in-out 3.6s infinite alternate}
  @keyframes pl-sway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
  .pl-pulse{animation:pl-node .6s cubic-bezier(.2,.9,.3,1.2) forwards,pl-pulse 2.6s ease-in-out 3.8s infinite alternate}
  @keyframes pl-pulse{from{transform:scale(1)}to{transform:scale(1.35)}}
  @media(max-width:900px){.wel-plant{display:none}}
  @media(max-width:640px){
    .wel-top{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:10px}.wel-langs{margin-left:-8px}.wel-langs a{padding:6px 8px;font-size:.74rem}
    .wel-opt{grid-template-columns:26px 44px 1fr;gap:4px 10px}.wel-price{grid-column:3;justify-self:start}.wel-ico{width:44px;height:44px}
    .wel-fields{grid-template-columns:1fr}.wel-call{margin-left:0}
  }
  @media(max-width:900px){.wel-main{grid-template-columns:1fr;gap:26px}.wel-left{padding-right:0}.wel-greet{min-height:0}.wel-plant{display:none}.wel-card{min-height:0}}
  @media(max-width:640px){
    .wel-top{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:10px}.wel-langs{margin-left:-8px}.wel-langs a{padding:6px 8px;font-size:.74rem}
    .wel-opt{grid-template-columns:44px 1fr 16px;gap:4px 10px}.wel-price{grid-column:2;justify-self:start}.wel-ico{width:44px;height:44px}
    .wel-fields{grid-template-columns:1fr}.wel-under{flex-direction:column;align-items:flex-start}
  }
  @media (prefers-reduced-motion:reduce){
    .pl-sway,.pl-stem,.pl-open,.pl-node,.pl-bud,.pl-tendril,.pl-pulse{animation:none}
    .pl-stem,.pl-tendril{stroke-dashoffset:0}.pl-node,.pl-bud{transform:scale(1)}.pl-open{transform:var(--s,scale(1))}
    .wel-greet.is-out .wel-line{opacity:1;transform:none}
  }


/* ---- 6. the other alphabets ----------------------------------------------
   Space Grotesk and Instrument Serif have no Cyrillic or Georgian, so those
   pages used to fall back to whatever the visitor's system had. These faces
   fill the gaps under the same family names, by code point, so every rule on
   the site keeps working and nothing downloads on an English page. */
/* Fixed weights on purpose: Chrome groups faces by exact descriptors, and a
   weight range here would shadow the Latin faces of the same family. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/manrope-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/notosans-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/manrope-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/notosans-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/manrope-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/notosans-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/manrope-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/notosans-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/notosans-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/notosans-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/notosans-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/playfair-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/playfair-it-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/notoserif-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/notoserif-geo.woff2) format('woff2');unicode-range:U+0589,U+10A0-10FF,U+1C90-1CBA,U+1CBD-1CBF,U+205A,U+2D00-2D2F,U+2E31}
html[lang=ka]{font-synthesis:none}
/* Georgian and Cyrillic run wider and taller than Latin at the same size. */
html[lang=ka] .hero h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:20ch}
html[lang=ru] .hero h1,html[lang=uk] .hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);max-width:20ch}
html[lang=ka] .h2{font-size:clamp(1.8rem,3.9vw,2.9rem)}
html[lang=ru] .h2,html[lang=uk] .h2{font-size:clamp(1.95rem,4.2vw,3.1rem)}
html[lang=ka] .final .h2{font-size:clamp(2rem,4.4vw,3.2rem)}
html[lang=ka] .nav-links,html[lang=ru] .nav-links,html[lang=uk] .nav-links{font-size:.84rem;gap:14px}
@media(max-width:1240px){html[lang=ka] .nav-links,html[lang=ru] .nav-links,html[lang=uk] .nav-links{font-size:.8rem;gap:11px}}
html[lang=ka] .btn,html[lang=ru] .btn,html[lang=uk] .btn{letter-spacing:.08em;font-size:.76rem}
html[lang=ka] .wel-line{font-size:clamp(2.1rem,5vw,3.6rem)}
html[lang=ru] .wel-line,html[lang=uk] .wel-line{font-size:clamp(2.3rem,5.4vw,4rem)}
/* Long words in any language wrap inside their box instead of pushing it. */
.btn,.pp-item b,.get-item b,.wel-ot b,.plan .name,.gv-card h3,.svc-card h3,.small-label{overflow-wrap:anywhere}
th,td{overflow-wrap:normal}

/* ---- 7. a little more colour ---------------------------------------------
   Green stays the accent. These are quiet companions: a blue for water and
   for "the other side" in comparisons, a sand for warmth, all as tints. */
:root{--blue:#4a2a6b;--sky:#f7f5ee;--sand:#f2f0e8;--moss:#4a2a6b}
.tone-mint{--tone:var(--mint)}.tone-sky{--tone:var(--sky)}.tone-sand{--tone:var(--sand)}

/* ---- 8. "You get everything" -----------------------------------------------
   Nik, 2026-09-22: organise the eight things into groups, and give the
   animation a proper place instead of the corner. */
.get-grid,.get-marks{display:none}
.get-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:40px 64px;align-items:center;margin-top:26px}
.get-stage{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;justify-content:center}
.get-stage .loop-stage{display:block;width:100%;max-width:360px;aspect-ratio:1/1}
.get-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;align-items:start}
.get-group{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:0 22px 12px;display:flex;flex-direction:column}
.get-gh{display:flex;align-items:center;gap:14px;margin:0 -22px 8px;padding:16px 22px;background:var(--tone,var(--mint));border-radius:22px 22px 0 0}
.get-gh .loop-gh{width:54px;height:54px;flex:0 0 auto;display:block}
.get-gh h3{font-family:'Space Grotesk';font-weight:600;font-size:1.06rem;margin:0;letter-spacing:.01em}
.get-item{display:grid;grid-template-columns:40px 1fr;gap:2px 14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.get-item:first-of-type{border-top:0}
.get-item .loop-li{width:36px;height:36px;display:block;grid-row:span 2}
.get-item b{font-family:'Space Grotesk';font-weight:600;font-size:1rem;line-height:1.3}
.get-item span:not(.loop){color:var(--muted);font-size:.92rem;line-height:1.45}
@media(max-width:980px){.get-groups{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.get-intro{grid-template-columns:1fr;gap:26px}.get-stage{padding:18px}.get-stage .loop-stage{max-width:280px}}
@media(max-width:640px){.get-groups{grid-template-columns:1fr}}

/* A nav word never breaks in two, in any language. */
.nav-links a,.langsel a{white-space:nowrap}

/* The two pledges carry their own tint: the church card in the site's mint,
   the water card in the sky blue the drop is drawn in. */
#different .gv-card.gv-give:nth-child(1){background:var(--mint)}
#different .gv-card.gv-give:nth-child(2){background:var(--sky);border-color:var(--blue)}
#different .gv-card.gv-give:nth-child(2) .gv-mark{background:var(--bg);color:var(--blue)}
#different .gv-card.gv-give:nth-child(1) .gv-mark{background:var(--bg)}

/* ---- the word grows ------------------------------------------------------
   Nik, 2026-09-22: the logo's "Grows" and "Studio." grow into place, in the
   opening and again in the header; then the last word of the headline grows.
   Everything is scale on an inline-block from its left baseline, so nothing
   around it moves. */
.wm-grow,.wm-studio,.grow-word{display:inline-block;transform-origin:0% 88%;will-change:transform;backface-visibility:hidden}
.grow-word{font-style:inherit;transform-origin:50% 92%}
/* One word at a time. "Grows" swells and settles before "Studio." appears,
   so the two never sit on top of each other. Each swells to the right and
   up only, where nothing else is. */
.rg-intro.draw .wm-grow{animation:wm-grow 1.5s cubic-bezier(.22,1,.36,1) both}
.rg-intro.draw .wm-studio{animation:wm-grow 1.5s cubic-bezier(.22,1,.36,1) 1.15s both}
html.rg-grown header .wm-grow{animation:wm-grow 1.5s cubic-bezier(.22,1,.36,1) .15s both}
html.rg-grown header .wm-studio{animation:wm-grow 1.5s cubic-bezier(.22,1,.36,1) 1.3s both}
html.rg-grown .hero .grow-word{animation:word-grow 2.6s cubic-bezier(.22,1,.36,1) 2.5s both}
/* When the opening already grew the words big in the hero, the header copy
   does not repeat it; only the hero word follows, straight away. */
html.rg-intro-played header .wm-grow,html.rg-intro-played header .wm-studio{animation:none}
html.rg-intro-played .hero .grow-word{animation-delay:.2s}
/* Starts tiny, swells past its size and holds there long enough to be seen,
   then settles. The word before it is untouched because it grows from its
   own left edge; the word after it is not on screen yet. */
@keyframes wm-grow{0%{transform:scale(.08);opacity:0}18%{opacity:1}40%{transform:scale(1.3)}62%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
/* The hero word can sit in the middle of a line (Georgian), so it grows from
   its own centre and only ever exceeds its box by a hair: no crossing. */
@keyframes word-grow{0%{transform:scale(.06);opacity:0}16%{opacity:1}42%{transform:scale(1.08)}68%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.hero .grow-word{position:relative;z-index:2}
@media (prefers-reduced-motion: reduce){.wm-grow,.wm-studio,.grow-word{animation:none !important;transform:none !important;opacity:1 !important}}
/* Short laptops: the welcome page still ends inside the screen. */
@media(min-width:901px) and (max-height:790px){
  .wel-main{padding-top:20px;gap:24px clamp(24px,4vw,60px)}
  .wel-greet{font-size:clamp(2.2rem,3.8vw,3.2rem)}
  .wel-card{padding:18px 20px;min-height:0}
  .wel-q{margin-bottom:10px}
  .wel-opts{gap:8px}
  .wel-opt{grid-template-columns:60px 1fr auto 18px;padding:10px 12px 10px 10px}
  .wel-ico{width:60px;height:60px}
  .wel-ot b{font-size:1.06rem}.wel-ot span{font-size:.92rem}
  .wel-under{margin-top:12px}
}

/* ---- 9. the pricing blocks, more to look at ---------------------------------
   Nik, 2026-09-22: every section should be visually engaging. Plan marks in
   the comparison header and the picked plan tinted; the three terms carry a
   mark and a tone; the who-line and the not-included cards take tints; the
   "how this starts" steps get numbered badges. */
.tick thead th{vertical-align:bottom;padding-top:18px}
.tick .tick-loop{display:block;width:52px;height:52px;margin:0 auto 6px}
.tick thead th.is-pick,.tick td:nth-child(3){background:var(--paper)}
.tick thead th em{display:block;font-style:normal;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-top:4px}
.tick i.y{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--bg);align-items:center;justify-content:center;font-size:.86rem;font-weight:700;line-height:1}
.tick i.n{color:var(--faint)}
.tick tbody tr:hover th,.tick tbody tr:hover td{background:var(--paper)}
.tick tbody tr:hover td:nth-child(3){background:#dcd2e8}
.terms p{display:flex;flex-direction:column;gap:10px;background:var(--tone,var(--paper))}
.terms .terms-loop{display:block;width:60px;height:60px;margin:-4px 0 2px}
.who-line{background:var(--sand);border-left:6px solid var(--green);padding:18px 22px;font-size:1.08rem}
#pricing .addon{background:var(--sky);border-color:transparent}
#pricing .addon .ap{color:var(--blue)}
#pricing .addon:last-child{background:var(--mint)}
#pricing .addon:last-child .ap{color:var(--green)}
.cmp tbody tr:nth-child(even) td{background:var(--paper)}
.cmp .cmp-us td{background:var(--mint)}
.buy-wrap{background:var(--paper);border-radius:22px}
.buy{list-style:none;counter-reset:b;margin-left:0;padding-left:0}
.buy li{position:relative;padding-left:46px;min-height:32px}
.buy li::before{counter-increment:b;content:counter(b);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--bg);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:.95rem}
/* process: a green number badge per step, a line between them */
#process .step{position:relative;border-top:0;padding:22px 0}
#process .step::before{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-size:.92rem;color:var(--bg);background:var(--green);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;opacity:1}
#process .step+.step::after{content:"";position:absolute;left:18px;top:-30px;height:44px;border-left:2px dashed #c9bcdc}
#process .steps.cycling .step.lit{background:var(--paper);border-radius:22px;padding-left:16px;margin-left:-16px}
/* why: the three points carry the matching loops */
.why-points .loop-whypt{width:58px;height:58px;flex-shrink:0;margin-top:-6px}
/* the team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.tm{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:4px}
.tm .avatar{width:72px;height:72px;border-radius:18px;background:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.tm .avatar span{font-family:'Space Grotesk';font-weight:700;font-size:1.9rem;color:var(--bg);line-height:1}
.tm:nth-child(2) .avatar{background:var(--blue)}.tm:nth-child(3) .avatar{background:var(--moss)}.tm:nth-child(4) .avatar{background:#4b6b8a}
.tm h3{font-family:'Space Grotesk';font-weight:600;font-size:1.08rem;margin:0}
.tm .role{font-family:'Space Grotesk';font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.team-note{color:var(--faint);font-size:.9rem;margin:12px 0 0}
#founders .founders-grid{grid-template-columns:1fr 1fr;gap:40px 60px;max-width:none;margin-top:40px}
#founders .founder .role{display:block;margin-top:12px;font-family:'Space Grotesk';font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#founders .founder .quote{font-family:'Instrument Serif';font-style:italic;font-size:1.4rem;line-height:1.3;color:var(--ink);margin:0 0 14px}
@media(max-width:980px){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){#founders .founders-grid{grid-template-columns:1fr}}
@media(max-width:520px){.team{grid-template-columns:1fr 1fr;gap:10px}.tm{padding:16px 14px}}

/* ---- 10. what is outside the plan, everywhere money is talked about ---------
   Nik, 2026-09-22: no customer should ever ask "why am I being charged for
   this". The same three lines, big print and fine print, on every surface. */
.ps-out{display:block;margin-top:10px;font-size:.88rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px}
.two-out{background:var(--sand);border-radius:22px;padding:18px 22px;margin:-6px 0 18px;display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:center}
.two-out .two-when{grid-column:1/-1}
.two-out b{font-family:'Space Grotesk';font-size:1.15rem;font-weight:700;white-space:nowrap}
.two-out p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.5}
@media(max-width:700px){.two-out{grid-template-columns:1fr}}
.tick tfoot td.tick-out{background:var(--sand);text-align:left;font-size:.92rem;color:var(--ink);padding:14px 16px;border-top:2px solid var(--green)}
.tick tfoot td.tick-out b{font-family:'Space Grotesk';font-weight:600;color:var(--green)}
.wel-out{margin:12px 2px 0;font-size:.86rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.money-box{background:var(--sand);border-left:6px solid var(--green);border-radius:0 18px 18px 0;padding:18px 22px;margin:28px 0}
.money-box b{display:block;font-family:'Space Grotesk';font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.money-box p{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink)}

/* ---- bring a neighbour, and the price lock (22 September) ---------------- */
#neighbours{background:var(--paper)}
.nb-lead{font-size:1.15rem;max-width:62ch;margin:0 0 26px;line-height:1.55}
.nb-ladder{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nb-ladder li{background:var(--tone,var(--bg));border-radius:22px;padding:22px 20px;display:flex;flex-direction:column;gap:6px;margin:0}
.nb-ladder li.nb-free{background:var(--green);color:var(--bg)}
.nb-n{font-family:'Space Grotesk';font-weight:700;font-size:2.4rem;line-height:1;color:var(--ink)}
.nb-free .nb-n{color:var(--bg)}
.nb-off{font-family:'Space Grotesk';font-weight:700;font-size:1.1rem;color:var(--green)}
.nb-free .nb-off{color:var(--bg)}
.nb-ladder li p{margin:0;color:var(--muted);line-height:1.5}
.nb-ladder li.nb-free p{color:var(--bg)}
.nb-rules{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin:0 0 22px}
.nb-rules p{margin:0;line-height:1.6}
.nb-rules p b{color:var(--ink)}
.nb-fine{grid-column:1/-1;font-size:.92rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:14px}
.nb-lock{display:flex;gap:16px;align-items:center;background:var(--sand);border-left:6px solid var(--green);border-radius:0 18px 18px 0;padding:16px 20px}
.nb-lock p{margin:0;line-height:1.55}
.nb-lock-loop{width:56px;height:56px;flex:0 0 56px}
.pp-nb{margin-top:26px}
.pp-lock{background:var(--sand);border-left:6px solid var(--green);padding:14px 18px;border-radius:0 18px 18px 0;color:var(--ink);margin-top:12px}
@media(max-width:900px){.nb-ladder{grid-template-columns:1fr 1fr}.nb-rules{grid-template-columns:1fr}}
@media(max-width:520px){.nb-ladder{grid-template-columns:1fr}}

/* ---- phones, properly (22 September) -------------------------------------
   A menu sheet, one plan at a time in the comparison, a photo strip you swipe,
   inputs that never trigger zoom, and no tap target under 44px. */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(91,58,134,.12)}
.menu-btn{display:none}
.mnav{display:none}
@media(max-width:860px){
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer;padding:0;margin-left:auto}
  .menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  header nav .langsel{display:none}
  header nav .search-btn span{display:none}
  .mnav{position:fixed;inset:0;z-index:95;background:var(--bg);display:flex;flex-direction:column;gap:18px;padding:18px 20px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mnav[hidden]{display:none}
  .mnav-top{display:flex;align-items:center;justify-content:space-between}
  .mnav-brand{font-family:'Space Grotesk';font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
  .mnav-brand b{color:var(--green);font-weight:700}
  .mnav-close{width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
  .mnav-links{display:flex;flex-direction:column}
  .mnav-links a{font-family:'Space Grotesk';font-weight:600;font-size:1.45rem;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);display:block}
  .mnav-acts{display:flex;flex-direction:column;gap:10px;margin-top:6px}
  .mnav-acts .btn{width:100%;justify-content:center;min-height:52px}
  .mnav-tel{text-align:center;padding:14px 0;font-family:'Space Grotesk';font-weight:600;color:var(--ink)}
  .mnav-langs.langsel{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:.95rem;margin-top:4px}
  .mnav-langs.langsel a,.mnav-langs.langsel span{padding:12px 14px;margin:0;border:1px solid var(--line);border-radius:999px;color:var(--ink);min-height:44px;gap:8px;display:inline-flex;align-items:center}
  .mnav-langs.mnav-soon span{color:var(--muted);background:var(--bg)}
  .mnav-soon-l{margin:14px 0 6px;text-align:center;font-family:'Space Grotesk';font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .mnav-langs.langsel a .flag{display:inline}
  .mnav-langs.langsel a.on{background:var(--mint);border-color:var(--green);color:var(--ink)}
  html.mnav-open{overflow:hidden}
  html.mnav-open .vine,html.mnav-open .mob-bar{display:none}
  /* comparison: one plan at a time */
  .tick-pick{display:flex;gap:6px;margin:0 0 12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px}
  .tick-pick button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;font-family:'Space Grotesk';font-weight:600;font-size:.92rem;color:var(--muted);cursor:pointer}
  .tick-pick button[aria-selected="true"]{background:var(--green);color:var(--bg)}
  .tick.tick-one thead th:not(:first-child),.tick.tick-one td{display:none}
  .tick.tick-one tbody th{width:auto}
  .tick.tick-one-a thead th:nth-child(2),.tick.tick-one-a td:nth-child(2),
  .tick.tick-one-b thead th:nth-child(3),.tick.tick-one-b td:nth-child(3),
  .tick.tick-one-c thead th:nth-child(4),.tick.tick-one-c td:nth-child(4){display:table-cell;width:34%}
  .tick.tick-one tfoot td{display:table-cell;width:auto}
  .tick.tick-one thead th{white-space:normal}
  /* photos you swipe, not a tower of three */
  .photo-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .photo-strip::-webkit-scrollbar{display:none}
  .photo-strip figure{flex:0 0 82%;scroll-snap-align:start;border-top:none;border-left:1px solid var(--ink)}
  .photo-strip figure:first-child{border-left:none}
  .photo-strip img{height:260px}
  /* inputs never zoom the page on iPhone */
  .cform input,.cform textarea,.cform select,.wel-fields input,.wel-fields select{font-size:max(16px,1rem)}
  .cform input{min-height:46px}
  /* tap targets */
  footer a,.foot-lang .langsel a,.get-list a,.tag,.chip{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:50px}
  .mob-bar a{padding:18px 8px;font-size:1.05rem}
  /* the outside-the-plan box reads left-aligned on phones */
  .money-box,.money-box p{text-align:left}
  /* section rhythm */
  section{padding:56px 0}
  .h2,section h2{font-size:clamp(1.7rem,7.2vw,2.4rem)}
  .hero{padding:44px 0 56px}
  .neighbours .nb-ladder{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){.nb-ladder{grid-template-columns:1fr 1fr}}
/* the welcome page height on phones: the visible viewport, not the address-bar one */
@supports(height:100svh){.wel{min-height:100svh}}
/* phone follow-ups */
.money-box p b{display:inline;font-family:inherit;font-size:inherit;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
@media(max-width:860px){
  .buy{text-align:left}
  .buy li{justify-content:flex-start;text-align:left}
  .price-note,.who-line{text-align:left}
}
/* phone follow-ups, second pass: nothing under 13px that has to be read, nothing under 44px that has to be tapped */
@media(max-width:860px){
  header .search-btn{width:44px;height:44px;padding:0;justify-content:center}
  .plan a.u,.hero a.u,.g-all,.wel-under a,.wel-call,.guide a.u,.two-card a.u{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
  .g-dot{width:44px;height:44px;border:0;background:transparent;position:relative;border-radius:0}
  .g-dot::after{content:"";position:absolute;inset:16px;border:1px solid var(--faint);border-radius:50%}
  .g-dot.on::after{background:var(--ink);border-color:var(--ink)}
  footer .langsel a,.foot-lang .langsel a{min-width:44px;min-height:44px;justify-content:center;margin:0;padding:8px 6px}
  .wel-langs a{min-height:44px;padding:8px 12px}
  .btn{font-size:.9rem;letter-spacing:.1em;padding:15px 22px}
  .two-when{font-size:.8rem;letter-spacing:.12em;white-space:normal}
  .three-name{font-size:.78rem;letter-spacing:.08em}
  .three-tag{font-size:.66rem}
  .founder .role,#founders .founder .role,.tm .role{font-size:.8rem}
  .sx-go,.pp-kicker,.areas-kicker,.area-card span,.shot .meta span,.post .meta,.post-meta,.meta{font-size:.84rem}
  .money-box b{font-size:.84rem}
  .cform select,.post-lang select,select{font-size:max(16px,1rem)}
  .pp-tbl{font-size:.92rem}
  .pp-tbl td:nth-child(2){white-space:normal}
  .pp-tbl th,.pp-tbl td{padding:12px 10px}
  .nb-ladder li{min-width:0}
  .nb-off,.nb-n{overflow-wrap:anywhere}
}
@media(max-width:430px){.nb-ladder{grid-template-columns:1fr}}
/* two people on the team for now */
.team{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
@media(max-width:520px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- video that gets watched: the co-founder's reels, with their counts ---- */
#video{background:var(--bg)}
.vd-top{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;margin-top:10px}
.vd-stats{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.vd-stats div{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 20px;min-width:150px;flex:1}
.vd-stats b{display:block;font-family:'Space Grotesk';font-size:2.1rem;font-weight:700;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.vd-stats span{display:block;font-size:.9rem;color:var(--muted);margin-top:6px;line-height:1.35}
.vd-lead{font-size:1.12rem;line-height:1.6;max-width:60ch;margin:0}
.vd-acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding-top:8px}
.reels{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:36px}
.reel{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper)}
.reel .fr{aspect-ratio:9/16;background:#171320;position:relative}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#171320}
.reel .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;font-size:.92rem;border-top:1px solid var(--line)}
.reel .meta b{font-family:'Space Grotesk';font-weight:700;color:var(--ink);white-space:nowrap}
.reel .meta b span{font-family:Inter,sans-serif;font-weight:400;color:var(--muted);font-size:.84rem}
.reel .meta a{color:var(--muted);white-space:nowrap}
.vd-note{margin-top:16px;font-size:.9rem;color:var(--muted);max-width:70ch}
@media(max-width:1100px){.reels{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.vd-top{grid-template-columns:1fr;gap:18px}.vd-acts{justify-content:flex-start}.vd-stats div{min-width:0}}
@media(max-width:560px){.reels{grid-template-columns:1fr 1fr;gap:10px}.reel .meta{padding:10px 12px;font-size:.86rem;flex-wrap:wrap}.vd-stats{gap:10px}.vd-stats div{padding:12px 14px}.vd-stats b{font-size:1.7rem}}
@media(max-width:1300px){.reel .meta .fbw{display:none}}
.reel .meta{font-size:.88rem}

/* phones: folded blocks */
details.fold{border:1px solid var(--line);border-radius:18px;background:var(--paper);margin:14px 0}
details.fold > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:14px 18px;font-family:'Space Grotesk';font-weight:600;font-size:1.02rem;color:var(--ink)}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--green);flex:0 0 auto}
details.fold[open] > summary::after{content:"\2212"}
details.fold > *:not(summary){padding:0 14px 14px}
details.fold.fold-in{border:0;background:transparent;margin:6px 0 0}
details.fold.fold-in > summary{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.fold.fold-in > *:not(summary){padding:12px 0 0}
details.fold.fold-rest{margin-top:12px}
details.fold.fold-rest > *:not(summary){padding:0 12px 12px}
details.fold .cmp-h3[hidden]{display:none}
/* long words in Georgian must never widen a card */
.tm,.two-card,.two,.plan,.get-group,.nb-ladder li,.vd-stats div{min-width:0}
.tm .role,.two-when,.tm h3,.vd-stats span,.three-name{overflow-wrap:anywhere}
@media(max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){
  .reel .meta a,.vd-acts a.u,.ex-copy a.u,.two-out a.u,.folio-note a.u{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:flex-end}
  .vd-acts a.u,.ex-copy a.u,.two-out a.u{justify-content:flex-start}
}
@media(max-width:860px){
  .gal-txt a.u,.contact-row .alt a.u,.folio-note a.u{display:inline-flex;align-items:center;min-height:44px}
  footer .socials a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  header .wordmark{padding:9px 0;display:inline-block}
}
@media(max-width:900px){.two-out{grid-template-columns:minmax(0,1fr)}.two-out>*{min-width:0}.two-out .two-when{white-space:normal;overflow-wrap:anywhere}}
@media(max-width:860px){footer .socials{flex-wrap:wrap;gap:6px 10px}footer .socials .at{flex-basis:100%;overflow-wrap:anywhere}}
/* the welcome greeting: full size, level with the card, not a small block in the corner */
@media(min-width:901px){
  .wel-main{grid-template-columns:1.08fr 1fr;align-items:center;gap:40px clamp(40px,5vw,90px)}
  .wel-greet{font-size:clamp(3.2rem,5.6vw,5.4rem);min-height:2.25em;line-height:1.04}
  html[lang=ka] .wel-greet,html[lang=ru] .wel-greet,html[lang=uk] .wel-greet{min-height:3.15em}
  html[lang=ka] .wel-line{font-size:clamp(2.4rem,4.6vw,3.9rem)}
  html[lang=ru] .wel-line,html[lang=uk] .wel-line{font-size:clamp(2.6rem,5vw,4.4rem)}
  .wel-checks{margin-top:26px;gap:14px;max-width:52ch}
  .wel-checks li{font-size:1.32rem;line-height:1.45;padding-left:32px}
  .wel-checks li::before{width:16px;height:16px;top:.5em}
  .wel-trades{font-size:1.04rem;margin-top:26px;max-width:52ch;color:var(--muted)}
}
@media(min-width:901px) and (max-height:790px){
  .wel-greet{font-size:clamp(2.6rem,4.4vw,3.8rem);min-height:2.25em}
  .wel-checks li{font-size:1.18rem}
}
/* the cycling greeting keeps its space above the text, not between the text and the checks */
@media(min-width:901px){.wel-greet{display:flex;align-items:flex-end}}
/* ---- trust, the owner's desk, the professionals' line, seven add-ons ------ */
#trust{background:var(--paper)}
.tr-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px clamp(32px,5vw,72px);align-items:start;margin-top:8px}
.tr-lead{font-size:1.14rem;line-height:1.6;max-width:58ch;margin:0 0 22px}
.tr-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tr-stats div{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.tr-stats b{display:block;font-family:'Space Grotesk';font-size:1.7rem;font-weight:700;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.tr-stats span{display:block;font-size:.9rem;color:var(--muted);margin-top:6px;line-height:1.35}
.tr-reviews{display:grid;gap:12px;align-content:start}
.tr-reviews blockquote{margin:0;background:var(--bg);border-left:4px solid var(--green);padding:14px 18px;border-radius:0 16px 16px 0;font-family:'Instrument Serif';font-style:italic;font-size:1.12rem;line-height:1.5}
.tr-reviews blockquote cite{display:block;font-family:'Space Grotesk';font-style:normal;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.tr-reviews .small-label{margin-bottom:2px}
@media(max-width:900px){.tr-grid{grid-template-columns:1fr;gap:22px}}
#desk{background:var(--bg)}
.dk-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px clamp(32px,5vw,72px);align-items:center;margin-top:8px}
.dk-loop{display:block;width:100%;max-width:520px;aspect-ratio:1/1;justify-self:center}
.dk-lead{font-size:1.14rem;line-height:1.6;max-width:60ch;margin:0 0 22px}
.dk-four{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dk-four div{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.dk-four b{display:block;font-family:'Space Grotesk';font-size:1.15rem;color:var(--green);margin-bottom:6px}
.dk-four p{margin:0;font-size:.95rem;color:var(--muted);line-height:1.5}
.dk-in{margin:18px 0 0;font-size:1rem}
@media(max-width:900px){.dk-grid{grid-template-columns:1fr;gap:20px}.dk-loop{max-width:360px}}
.nb-pro{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin:0 0 14px}
.nb-pro b{display:block;font-family:'Space Grotesk';font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.nb-pro p{margin:0;line-height:1.6}
.addons{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.addons{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.addons{grid-template-columns:1fr}}
/* the hero stage: the biggest services take turns */
.hero-stage{position:relative;width:100%;max-width:560px;aspect-ratio:1/1;justify-self:end}
.hero-stage .hero-slide{position:absolute;inset:0;width:100%;max-width:none;opacity:0;transition:opacity .7s ease;pointer-events:none}
.hero-stage .hero-slide.is-on{opacity:1}
.hero-cap{position:absolute;left:0;right:0;top:100%;margin-top:14px;text-align:center;font-family:'Space Grotesk';font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);background:none;border:0;padding:0 8px;white-space:normal;line-height:1.35;transition:opacity .4s ease}
.hero-cap.is-out{opacity:0}
@media(max-width:900px){.hero-stage{order:-1;max-width:340px;margin:0 auto 64px;justify-self:center}}
@media(max-width:560px){.hero-stage{max-width:280px;margin-bottom:60px}}
/* ---- Evergreen AI: the mark, the section, the one-thing row ---- */
.ai-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Space Grotesk';font-style:normal;font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);border:1.5px solid var(--green);border-radius:999px;padding:4px 10px;vertical-align:middle;margin-left:10px;white-space:nowrap;line-height:1}
.ai-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.page-h1 .ai-badge{font-size:.72rem;margin-left:14px;vertical-align:middle}
.svc-cname .ai-badge{margin-left:8px}
.og-links a.is-ai{border-color:var(--green)}
.ai-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:7px;vertical-align:middle}
.sx-card.is-ai{border-color:var(--green)}
.sx-card.is-ai::after{content:"Evergreen AI";position:absolute;top:14px;right:14px;font-family:'Space Grotesk';font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);border:1.5px solid var(--green);border-radius:999px;padding:4px 9px;background:var(--paper)}
.sx-card{position:relative}
#ai{background:var(--paper)}
.ai-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px clamp(32px,5vw,72px);align-items:start;margin-top:8px}
.ai-lead{font-size:1.14rem;line-height:1.6;max-width:60ch;margin:0}
.ai-four{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ai-four div{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.ai-four b{display:block;font-family:'Space Grotesk';font-size:1.15rem;color:var(--green);margin-bottom:6px}
.ai-four p{margin:0;font-size:.95rem;color:var(--muted);line-height:1.5}
.ai-rules{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:22px;border-top:1px dashed var(--line);padding-top:16px}
.ai-rules p{margin:0;font-size:.98rem;line-height:1.6}
.ai-rules .ai-badge{margin:0 8px 0 0}
@media(max-width:900px){.ai-grid,.ai-rules{grid-template-columns:1fr}}
.fn-row{margin:28px 0 8px;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline}
.fn-row b{font-family:'Space Grotesk';font-size:1.1rem}
.fn-row span{color:var(--muted)}
.fn-row .fn-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fn-row .fn-links a{font-family:'Space Grotesk';font-weight:600;font-size:.9rem;border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--ink);background:var(--bg);min-height:44px;display:inline-flex;align-items:center}
.fn-row .fn-links a:hover{border-color:var(--green);color:var(--green)}
@media(max-width:700px){.fn-row{grid-template-columns:1fr}}
/* ---- phones, fourth pass: centred where it should be, the same rules on every page ---- */
@media(max-width:860px){
  /* the same floors on every page, including pages that carry their own extra styles */
  a.btn,button.btn,.btn,.btn-2,.btn-ghost{font-size:.9rem !important;letter-spacing:.1em !important;min-height:50px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
  .page-kicker,.kicker,.small-label,.sec-kicker,.stage-kicker{font-size:.82rem !important}
  select,.cform select,input[type=text],input[type=tel],input[type=email],textarea{font-size:max(16px,1rem) !important}
  header .langsel,header nav .langsel{display:none !important}
  .area-langs a.u,.svc-cross a.u,.legal-links a.u,.foot-links a,footer a,.tel a,.langrow a,.tr-langs a,.post-langs a{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  .g-dots,.g-dot{display:none !important}
  .g-arrow{width:44px;height:44px}
  .pp-tbl-wrap{overflow-x:auto}
  .pp-tbl{font-size:.86rem;table-layout:fixed;width:100%;min-width:0}
  .pp-tbl th,.pp-tbl td{padding:10px 8px;white-space:normal;overflow-wrap:anywhere}
  .pp-tbl td:nth-child(2){white-space:normal}
  /* centred: headings, kickers, leads, calls to action, stats; body lists and cards stay left for reading */
  .hero-copy,.hero h1,.hero .ps,.hero-ctas,.kicker,.small-label,.h2,section > .wrap > h2,.lead,.sec-lead,.vd-lead,.dk-lead,.ai-lead,.tr-lead,.nb-lead,.get-intro,.price-note,.who-line,.bline,.fn-row,.dk-in,.vd-acts,.svc-btns,.svc-hero-text,.page-kicker,.page-h1,.intro,.svc-intro,.svc-price,.pp-hero,.pp-acts,.pp-kicker,.pp-for,.pp-outline,.svc-cta,.contact-row,.book-widget,.final .h2,.final .lead,.foot-grid,.founders-grid,.team,.tm,.two-plus,.g-all,.gal-txt,.guides-head,.terms-wrap .cmp-h3,.cmp-h3,.tick-wrap h3,.addons-wrap h3,.buy-wrap h3,.fn-faq summary{text-align:center}
  .hero-ctas,.vd-acts,.svc-btns,.pp-acts,.contact-row,.dk-in,.fn-row .fn-links,.svc-cta,.hero .ps{justify-content:center}
  .hero-ctas{display:flex;flex-direction:column;align-items:center;gap:14px}
  .hero .btn,.svc-btns .btn,.pp-acts .btn,.svc-cta .btn,.fn-form .btn{width:100%;max-width:420px;justify-self:center;margin-left:auto;margin-right:auto}
  .fn-form{margin-left:auto;margin-right:auto}
  .vd-stats div,.tr-stats div,.dk-four div,.ai-four div,.nb-ladder li,.money div,.tr-reviews blockquote{text-align:center}
  .tr-reviews blockquote{border-left:0;border-top:4px solid var(--green);border-radius:16px}
  .vd-stats span,.tr-stats span,.dk-four p,.ai-four p{text-align:center}
  .team{justify-items:center}
  .kicker{display:flex;justify-content:center}
  .fn-row{text-align:center}.fn-row b,.fn-row span{display:block}
  .fn-faq summary{justify-content:center}
  .foot-grid{justify-items:center}
  .mob-bar a{text-align:center}
}
@media(max-width:860px){
  .legal-nav a,.svc-btns a.u,.tr-reviews a.u,.pp-acts a.u,.fn-hero a.u{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
  .legal-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px}
  .pp-tbl .mo,.pp-tbl span{white-space:normal !important;display:inline}
  .pp-kicker,.sx-kicker,.tr-kicker{font-size:.82rem !important}
}
@media(max-width:860px){
  .svc-btns a.u,.svc-cta a.u,.pp-acts a.u{display:inline-flex !important;align-items:center;min-height:44px !important;padding:0 6px}
  footer a,.foot-lang a,.foot-grid a,.foot-links a{display:inline-flex !important;align-items:center;justify-content:center;min-height:44px !important;min-width:44px !important}
}
@media(max-width:860px){.demo-langs .langsel{flex-wrap:wrap;justify-content:center;gap:8px}.demo-langs .langsel a{min-width:44px !important;min-height:44px;justify-content:center;padding:8px 8px;border:1px solid var(--line);border-radius:999px;margin:0}}
/* titles stay plain text; the AI mark is a dot with room around it */
.page-h1 .ai-dot{width:10px;height:10px;margin-left:12px;vertical-align:middle}
.svc-cname .ai-dot{margin-left:8px}
.ai-dot{flex:0 0 auto}
/* phones: the outcome cards read centred, icon, title, text, chips and the plan line alike */
@media(max-width:860px){
  .og-card{align-items:center;text-align:center}
  .og-loop{margin-left:auto;margin-right:auto}
  .og-card p{max-width:none}
  .og-links{justify-content:center}
  .og-from{text-align:center}
}
/* phone audit, 22 September: nothing narrower than the screen, nothing under 12.5px, every control a real target */
.tr-stats,.ai-four{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tr-stats div,.ai-four div,.tr-reviews,.tr-reviews blockquote,.tr-lead,.ai-lead{min-width:0;overflow-wrap:anywhere}
.tr-stats b{overflow-wrap:anywhere}
.hero-cap{font-size:.8rem}
.sx-go{font-size:.82rem}
.three-name{font-size:.8rem}
.three-tag{font-size:.74rem;letter-spacing:.06em}
.wel-brand small{font-size:.8rem;letter-spacing:.18em}
.wel-langs a{font-size:.84rem}
.wel-price small{font-size:.8rem}
input[type=radio],input[type=checkbox]{width:22px;height:22px;min-height:0;min-width:0;flex:0 0 auto;accent-color:var(--green);margin:0 10px 0 0;vertical-align:middle}
@media(max-width:860px){
  .tr-stats b{font-size:1.4rem}
  .three-name{font-size:.8rem;letter-spacing:.06em}
  .three-tag{font-size:.74rem;letter-spacing:.04em;padding:3px 8px 4px}
  .wel-langs a{font-size:.84rem;padding:8px 10px}
  .wel-brand{min-height:44px;display:inline-flex;flex-direction:column;justify-content:center}
  .post-card .meta,.short .meta,.related .meta,.byline .meta,.toc .meta,.meta{font-size:.8rem}
  .pn a span{font-size:.8rem}
  .page-kicker{font-size:.82rem}
}
/* Every Language: fourteen on every site we build (22 September) */
#languages{background:var(--sand)}
#languages .lg-lead{max-width:62ch}
.lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 18px}
.lg-col{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 20px;min-width:0}
.lg-col b{display:block;font-family:'Space Grotesk';font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.lg-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lg-list li{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--bg);min-height:40px;display:inline-flex;align-items:center;color:var(--ink)}
.lg-soon{font-family:'Space Grotesk';font-weight:600;color:var(--ink);margin:0}
.foot-soon{display:block;margin-top:8px;color:var(--muted);font-size:.9rem}
.three-tag{font-size:.8rem}
@media(max-width:860px){
  .lg-grid{grid-template-columns:1fr}
  .lg-list{justify-content:center}
  .lg-col,.lg-soon,#languages .lg-lead,.foot-soon{text-align:center}
  .three-tag{font-size:.8rem}
  .page-body p a.u{padding:10px 0}
}
@media(max-width:860px){figure > a.u{display:inline-block;padding:10px 0}}
/* the opening runs on the compositor only: transform and opacity, layers promoted, nothing blurred */
.rg-intro{will-change:opacity;contain:layout paint;backdrop-filter:none}
.rg-intro-mark,.rg-intro-vine{will-change:transform,opacity;backface-visibility:hidden}
.rg-intro-mark{text-shadow:none}
html.rg-intro-on .hero-stage .hero-slide{transition:none}
.lg-list li.is-us{border-color:var(--green)}
.lg-legend{margin:12px 0 0;font-size:.92rem;color:var(--muted)}
@media(max-width:860px){.lg-legend{text-align:center}}
/* a light brushed-gold line under every heading and the hero caption, Nik's call on 22 September: no glow, just the line */
:root{--gold:#e6cf85;--gold-2:#d9bd68;--gold-3:#efdca0}
.glow,.glow-thin{background-image:repeating-linear-gradient(112deg,var(--gold-3) 0 3px,var(--gold) 3px 7px,var(--gold-2) 7px 9px);background-repeat:no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.glow{background-size:100% 5px;background-position:0 94%;padding-bottom:4px}
.glow-thin{font-style:normal;background-size:100% 2px;background-position:0 100%;padding-bottom:3px}
.glow .serif{color:var(--green)}
@media(max-width:860px){.h2,section > .wrap > h2,.hero h1{margin-left:auto;margin-right:auto}}
/* the events and opening forms (23 September) */
.fn-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:14px 0}
.fn-fields label{display:flex;flex-direction:column;gap:6px;font-family:'Space Grotesk';font-weight:600;font-size:.9rem;min-width:0}
.fn-fields input,.fn-fields select{font:inherit;font-family:Inter,sans-serif;font-weight:400;font-size:16px;min-height:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
.fn-fields input:focus-visible,.fn-fields select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.fn-note,.ev-empty{color:var(--muted);font-size:.95rem}
.ev-list{background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0 0 26px}
@media(max-width:700px){.fn-fields{grid-template-columns:1fr}.fn-note,.ev-empty{text-align:center}}
/* the funnel opener: the moment in the owner's day, before anything about us (playbook rule 2) */
.fn-open{font-family:'Instrument Serif',Georgia,serif;font-size:1.32rem;line-height:1.4;color:var(--ink);max-width:36ch;margin:0 0 14px;border-left:4px solid var(--green);padding-left:16px}
.fn-free{display:inline-flex;align-items:center;min-height:44px;font-family:'Space Grotesk';font-weight:600;color:var(--green);margin:6px 0 0}
@media(max-width:860px){.fn-open{border-left:0;border-top:4px solid var(--green);padding:12px 0 0;margin-left:auto;margin-right:auto;text-align:center}}
/* the floating Evergreen button, bottom right, above the phone bar on phones */
.eg-fab{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border:1.5px solid var(--green);border-radius:999px;padding:8px 16px 8px 8px;font-family:'Space Grotesk';font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 10px 24px rgba(74,42,107,.18);min-height:52px}
.eg-fab svg{width:36px;height:36px;display:block}
.eg-fab .eg-leaf{transform-origin:24px 34px;animation:eg-sway 3.2s ease-in-out infinite}
.eg-fab .eg-spark{animation:eg-twinkle 2.4s ease-in-out infinite}
.eg-fab .eg-spark2{animation:eg-twinkle 2.4s ease-in-out .9s infinite}
@keyframes eg-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
@keyframes eg-twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.eg-fab:hover{background:var(--mint)}
html.rg-intro-on .eg-fab{opacity:0}
.eg-fab{transition:opacity .4s ease}
@media(max-width:860px){.eg-fab{bottom:82px;right:12px;padding:8px 14px 8px 8px}.eg-fab span{font-size:.9rem}html.mnav-open .eg-fab{display:none}}
@media(prefers-reduced-motion:reduce){.eg-fab .eg-leaf,.eg-fab .eg-spark,.eg-fab .eg-spark2{animation:none}}
.ai-try{margin-top:18px}
@media(max-width:860px){.ai-try{justify-content:center;text-align:center}}
/* fourteen languages: the header dropdown, the chips, right-to-left, the other scripts (23 September) */
.langdd{position:relative}
.langdd summary{list-style:none;cursor:pointer;font-family:'Space Grotesk';font-weight:600;font-size:.85rem;border:1px solid var(--line);border-radius:999px;padding:8px 12px;min-height:40px;display:inline-flex;align-items:center;gap:6px;color:var(--ink);background:var(--paper)}
.langdd summary::-webkit-details-marker{display:none}
.langdd summary i{font-style:normal;font-size:.7rem;color:var(--muted)}
.langdd[open] summary{border-color:var(--green)}
.langdd-list{position:absolute;right:0;top:calc(100% + 8px);z-index:80;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:260px;box-shadow:0 14px 30px rgba(74,42,107,.14)}
.langdd-list a{display:block;padding:9px 12px;border-radius:10px;font-family:'Space Grotesk';font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.langdd-list a:hover{background:var(--mint)}
.langdd-list a.on{background:var(--mint);color:var(--green)}
@media(max-width:860px){.langdd{display:none}}
.mnav-langs.langsel a{white-space:nowrap}
html[dir=rtl]{direction:rtl}
html[dir=rtl] .hero-copy,html[dir=rtl] p,html[dir=rtl] li,html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .h2,html[dir=rtl] .lead,html[dir=rtl] td,html[dir=rtl] th{text-align:right}
html[dir=rtl] .fn-open{border-left:0;border-right:4px solid var(--green);padding-left:0;padding-right:16px}
html[dir=rtl] .langdd-list{right:auto;left:0}
html[dir=rtl] .eg-fab{right:auto;left:18px}
html[dir=rtl] .wordmark,html[dir=rtl] .langdd summary,html[dir=rtl] .topbar{direction:ltr}
html[dir=rtl] .foot-grid{text-align:right}
@media(max-width:860px){html[dir=rtl] .hero-copy,html[dir=rtl] p,html[dir=rtl] li,html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .h2,html[dir=rtl] .lead{text-align:center}}
html[lang=zh] body,html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3,html[lang=zh] .h2,html[lang=zh] .serif,html[lang=zh] button,html[lang=zh] input,html[lang=zh] select,html[lang=zh] .hero-cap{font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB',sans-serif;font-style:normal;letter-spacing:0}
html[lang=ja] body,html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3,html[lang=ja] .h2,html[lang=ja] .serif,html[lang=ja] button,html[lang=ja] input,html[lang=ja] select,html[lang=ja] .hero-cap{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;font-style:normal;letter-spacing:0}
html[lang=ko] body,html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3,html[lang=ko] .h2,html[lang=ko] .serif,html[lang=ko] button,html[lang=ko] input,html[lang=ko] select,html[lang=ko] .hero-cap{font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;font-style:normal;letter-spacing:0}
html[lang=ar] body,html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .h2,html[lang=ar] .serif,html[lang=ar] button,html[lang=ar] input,html[lang=ar] select,html[lang=ar] .hero-cap{font-family:'Noto Naskh Arabic','Geeza Pro',serif;font-style:normal;letter-spacing:0}
html[lang=hi] body,html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] h3,html[lang=hi] .h2,html[lang=hi] .serif,html[lang=hi] button,html[lang=hi] input,html[lang=hi] select,html[lang=hi] .hero-cap{font-family:'Noto Sans Devanagari','Kohinoor Devanagari',sans-serif;font-style:normal;letter-spacing:0}
html[lang=zh] .hero h1,html[lang=ja] .hero h1,html[lang=ko] .hero h1,html[lang=hi] .hero h1,html[lang=ar] .hero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.2}
html[lang=zh] .h2,html[lang=ja] .h2,html[lang=ko] .h2,html[lang=hi] .h2,html[lang=ar] .h2{line-height:1.25}
/* thirteen languages in the footer row wrap instead of running off the page */
.foot-lang{display:block}
.foot-lang .langsel{display:inline-flex;flex-wrap:wrap;gap:6px 10px;vertical-align:middle}
@media(max-width:860px){.foot-lang{text-align:center}.foot-lang .langsel{justify-content:center}}
.eg-steps span{font-size:.8rem}
@media(max-width:860px){a.topbar{min-height:44px;display:flex;align-items:center;justify-content:center}}
/* the header paints above the sections so the language dropdown is never hidden behind the hero */
header{z-index:40}

/* ---- 24 September: retention pass, light. Cream paper, ink borders, purple as the one accent, the gold line only ---- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv[data-rv="left"]{transform:translateX(-46px)}
.js .rv[data-rv="right"]{transform:translateX(46px)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}
/* numbers, one style everywhere: an ink ring, the number in purple */
.gn,.terms p::before,.ai-step i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);color:var(--green);font:700 .95rem 'Space Grotesk',sans-serif;font-style:normal}
/* what we actually do: numbered, bold */
.og-card{position:relative;border:2px solid var(--ink);border-radius:22px;background:var(--paper)}
.og-n{position:absolute;top:18px;right:20px;font-family:'Space Grotesk';font-weight:700;font-size:2.2rem;line-height:1;color:var(--green);letter-spacing:-.03em}
.og-n::after{content:"";display:block;height:3px;margin-top:4px;background:var(--gold)}
.og-card h3{font-size:1.6rem;letter-spacing:-.015em;color:var(--ink)}
.og-card:hover{border-color:var(--green)}
/* the honest part: numbered */
.gripe{position:relative;align-items:flex-start}
.gn{flex:none;margin-top:6px}
.gripe p b{font-size:1.08rem}
.aside-note{margin-top:30px;padding:16px 20px;border-left:3px solid var(--gold);background:var(--paper);max-width:62ch;font-size:1.02rem}
/* what it costs: the founding prices, and what passes through */
.was{font-family:'Space Grotesk';font-weight:500;font-size:.5em;color:var(--faint);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--green);display:block;letter-spacing:0;margin-bottom:2px}
.three-num .was{font-size:.62em;margin-bottom:0}
.was-note{font-size:.92rem;color:var(--muted);max-width:70ch;margin:-6px 0 20px}
.out4{background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:22px;padding:22px 24px 20px;margin:0 0 20px}
.out4 .two-when{color:var(--green);display:block;margin-bottom:12px}
.out4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.out4-grid div{background:var(--bg);border:1px solid var(--ink);border-radius:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:4px}
.out4-grid .o4-loop{display:block;width:44px;height:44px;margin-bottom:6px}
.out4-grid b{font-family:'Space Grotesk';font-weight:600;font-size:1rem;line-height:1.25;color:var(--ink)}
.out4-grid i{font-style:normal;font-family:'Space Grotesk';font-weight:700;font-size:1.25rem;color:var(--green)}
.out4>p{margin:14px 0 0;color:var(--muted);font-size:.98rem;line-height:1.55;max-width:80ch}
/* the three plans: a switch, one lit at a time */
.plan-switch{display:flex;gap:6px;margin:26px auto 0;max-width:560px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:4px}
.plan-switch button{flex:1;min-height:46px;border:0;border-radius:999px;background:transparent;font-family:'Space Grotesk';font-weight:700;font-size:.95rem;color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.plan-switch button[aria-selected="true"]{background:var(--green);color:var(--bg)}
#pricing .plan{transition:transform .35s,box-shadow .35s,border-color .35s}
#pricing .plan.is-on{border:3px solid var(--green);transform:translateY(-6px);box-shadow:0 8px 0 var(--green)}
#pricing .plan.is-on .price{background:linear-gradient(90deg,transparent,var(--gold-2) 12%,var(--gold) 50%,var(--gold-2) 88%,transparent) left bottom/100% 4px no-repeat;display:inline-block;padding-bottom:4px}
#pricing .plan.is-on .tag{color:var(--green)}
#pricing .plan.mid:not(.is-on){box-shadow:none;border-width:1px}
.three-cell.is-on,.three-cell.is-most.is-on{background:var(--paper);box-shadow:inset 0 0 0 3px var(--green)}
.three-cell.is-most:not(.is-on){background:var(--paper)}
/* what you get plan by plan */
.tick thead th{background:var(--paper)}
.tick tbody tr:nth-child(even) th,.tick tbody tr:nth-child(even) td{background:var(--paper)}
.tick i.y{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--green);color:var(--green);font-size:.9rem}
.tick.tick-on-a thead th:nth-child(2),.tick.tick-on-b thead th:nth-child(3),.tick.tick-on-c thead th:nth-child(4){color:var(--green);box-shadow:inset 0 -3px 0 var(--gold)}
.tick.tick-on-a td:nth-child(2),.tick.tick-on-b td:nth-child(3),.tick.tick-on-c td:nth-child(4){background:var(--bg)!important;box-shadow:inset 3px 0 0 var(--green),inset -3px 0 0 var(--green)}
.tick.tick-on-a td:nth-child(2) i.y,.tick.tick-on-b td:nth-child(3) i.y,.tick.tick-on-c td:nth-child(4) i.y{background:var(--green);color:var(--bg)}
/* the terms, in three lines: numbered, plain paper */
.tone-mint,.tone-sky,.tone-sand{--tone:var(--paper)}
.terms{counter-reset:term;border:2px solid var(--ink)}
.terms p{position:relative;padding-top:58px;color:var(--ink);font-size:1.06rem;line-height:1.55}
.terms p::before{counter-increment:term;content:counter(term);position:absolute;left:22px;top:16px}
.terms p b{color:var(--green);font-size:1.12rem;display:block;margin-bottom:2px}
.terms .terms-loop{position:absolute;right:16px;top:8px;width:52px;height:52px;margin:0}
/* what you pay outside the plan, said out loud */
.addons{grid-template-columns:repeat(4,1fr);gap:14px}
#pricing .addons .addon{background:var(--paper)}
.addon{border:2px solid var(--ink);border-radius:20px;padding:0 18px 18px;overflow:hidden}
.addon .ad-loop{display:block;width:56px;height:56px;margin:18px 0 8px}
.addon .ap{color:var(--green);font-size:1.5rem}
.addon[data-pay="1"]{border-color:var(--green)}
.addon[data-pay="1"]::before{content:attr(data-paylabel);display:block;margin:0 -18px;padding:7px 18px;border-bottom:2px solid var(--green);color:var(--green);font-family:'Space Grotesk';font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.addon[data-pay="1"] .ap{background:linear-gradient(90deg,transparent,var(--gold-2) 12%,var(--gold) 50%,var(--gold-2) 88%,transparent) left bottom/100% 4px no-repeat;display:inline-block;padding-bottom:4px;font-size:1.35rem}
/* the whole job, side by side */
.job{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px;align-items:stretch}
.job-card{border:2px solid var(--ink);border-radius:20px;background:var(--paper);padding:20px 18px 18px;display:flex;flex-direction:column;gap:6px}
.job-card .jn{font-family:'Space Grotesk';font-weight:700;font-size:1.12rem;line-height:1.2;min-height:2.4em}
.job-card .jl{font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.job-card .jp{font-family:'Space Grotesk';font-weight:700;font-size:1.05rem;line-height:1.35}
.job-card .jp .mc{display:flex;flex-direction:column;gap:2px}
.job-card .jp .mc-once i{font-weight:400;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--faint)}
.job-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.job-card.is-us{border:3px solid var(--green);box-shadow:0 6px 0 var(--green);transform:translateY(-4px)}
.job-card.is-us .jn{color:var(--green);background:linear-gradient(90deg,transparent,var(--gold-2) 12%,var(--gold) 50%,var(--gold-2) 88%,transparent) left bottom/100% 3px no-repeat;padding-bottom:3px}
.job-card.is-us .jp{color:var(--green)}
/* Evergreen AI: the presentation, on paper */
#ai.ai-dark{background:var(--paper);color:var(--ink)}
#ai.ai-dark .ai-lead{color:var(--ink);max-width:68ch;margin:0 0 22px}
.ai-models{display:flex;align-items:center;gap:16px;border:2px solid var(--ink);border-radius:999px;padding:8px 8px 8px 18px;background:var(--bg);margin:0 0 30px;overflow:hidden}
.ai-models .am-k{flex:none;font-family:'Space Grotesk';font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);max-width:34%}
.am-wrap{flex:1;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.am-track{display:flex;gap:10px;width:max-content;animation:am 36s linear infinite}
.am-track span{flex:none;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 14px;font-family:'Space Grotesk';font-weight:600;font-size:.9rem;white-space:nowrap}
@keyframes am{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.am-track{animation:none}}
.ai-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 26px}
.ai-line{position:absolute;left:0;right:0;top:34px;width:100%;height:24px;z-index:0}
.ai-step{position:relative;z-index:1;background:var(--paper);border:2px solid var(--ink);border-radius:20px;padding:18px 20px 18px}
.ai-step i{width:44px;height:44px;font-size:1.1rem;margin-bottom:12px;box-shadow:0 0 0 6px var(--paper)}
.ai-step b{display:block;font-family:'Space Grotesk';font-size:1.25rem;line-height:1.2;margin-bottom:6px;color:var(--ink)}
.ai-step p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55}
#ai.ai-dark .ai-four{grid-template-columns:repeat(4,1fr);margin-bottom:8px}
#ai.ai-dark .ai-four div{background:var(--bg);border:1px solid var(--ink)}
#ai.ai-dark .ai-four b{color:var(--green)}
.btn-gold{background:var(--green)!important;color:var(--bg)!important;border-color:var(--green)!important}
@media(max-width:900px){
  .out4-grid{grid-template-columns:1fr 1fr}
  .ai-flow{grid-template-columns:1fr}
  .ai-line{display:none}
  #ai.ai-dark .ai-four{grid-template-columns:1fr 1fr}
  .job{grid-template-columns:repeat(5,minmax(210px,1fr));overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
  .job-card{scroll-snap-align:start}
  .addons{grid-template-columns:1fr 1fr}
  .og-n{font-size:1.7rem;top:14px;right:16px}
}
@media(max-width:560px){
  .out4-grid{grid-template-columns:1fr 1fr;gap:8px}
  .out4{padding:16px 14px 14px}
  .addons{grid-template-columns:1fr}
  .ai-models{flex-direction:column;align-items:stretch;border-radius:18px;padding:12px}
  .ai-models .am-k{max-width:none}
  #ai.ai-dark .ai-four{grid-template-columns:1fr}
  .plan-switch button{font-size:.82rem;min-height:44px}
  .terms p{padding-top:56px}
  .job-card.is-us{transform:none}
}
@media(min-width:861px){.tick-pick{display:none}}
.ai-step .ai-photo{display:block;width:calc(100% + 40px);margin:-18px -20px 14px;height:150px;object-fit:cover;border-radius:18px 18px 0 0;border-bottom:2px solid var(--ink)}
.ai-step i{margin-top:-36px;position:relative}
.ai4-loop{display:block;width:60px;height:60px;margin-bottom:8px}
.job-loop{display:block;width:56px;height:56px;margin-bottom:6px}
.am-track span{display:inline-flex;align-items:center;gap:7px}
.bl{width:15px;height:15px;flex:none}.bl-claude{fill:#d97757}.bl-openai{fill:#000}.bl-googlegemini{fill:#3b82f6}.bl-adobe{fill:#eb1000}.bl-elevenlabs{fill:#000}
/* the phone bar: nearly see-through paper, the real number on the left, the free call on the right, both on the gold line */
.mob-bar{background:rgba(253,252,248,.9);border-top:1px solid var(--ink)}
.mob-bar a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 8px 11px;color:var(--ink);text-decoration:none}
.mob-bar a small{font-family:'Space Grotesk';font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600}
.mob-bar a b{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk';font-weight:700;font-size:1.02rem;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.mob-bar a b svg{width:17px;height:17px;fill:currentColor;flex:none}
.mob-bar a b .glow-thin{font-style:normal}
.mob-bar .mb-call{border-right:1px solid var(--line)}
.mob-bar .mb-book{background:transparent;color:var(--green)}
.mob-bar .mb-book b{color:var(--green)}
.mob-bar .mb-book small{color:var(--green)}
.mob-bar a:active{background:var(--sand)}
.out4-grid div{min-width:0}
.out4-grid b,.out4-grid i{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:420px){.out4-grid i{font-size:1.05rem}}
/* the Evergreen mark, in four places and no more */
.eg-fab .eg-mark{width:34px;height:34px;display:block;flex:none}
.eg-fab:hover{background:var(--sand)}
.nav-eg,.foot-eg a{display:inline-flex;align-items:center;gap:7px}
.eg-mark-sm{width:22px;height:22px;display:inline-block;flex:none}
#ai .eg-mark-lg{display:block;width:96px;height:96px;margin:0 auto -8px}
@media(max-width:1080px){.nav-eg{display:none}}
.soon{display:inline-block;font:700 .62rem/1 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--green);border:1.5px solid var(--green);border-radius:999px;padding:5px 9px;vertical-align:2px;white-space:nowrap}
.soon-line{max-width:64ch;color:var(--muted);font-size:.98rem;border-left:3px solid var(--gold);padding:8px 0 8px 14px;margin:0 0 20px}
.eg-fab span i{display:block;font-style:normal;font:700 .58rem/1.2 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--green);opacity:.85}
.nav-eg .soon{font-size:.55rem;padding:3px 6px;margin-left:6px}
.eg-embed{margin:18px 0 26px;border:2px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--paper)}
.eg-embed iframe{display:block;width:100%;height:640px;border:0}
@media(max-width:860px){.eg-embed iframe{height:620px}}
@media(max-width:560px){.eg-embed{border-radius:18px}.eg-embed iframe{height:560px}}