/* ============================================================
   KIWA — layers.css : the layered page system for every inner page.
   Loads AFTER pages.css and only adds; the tokens, nav, footer,
   buttons and FAQ stay pages.css's.

   The idea, borrowed from the way stripe.com is built and translated
   into this studio's charter: a page is ONE continuous surface with a
   few layers on it — a plane of the film's own light behind the
   opening, reading plates that float over that light, and drawn
   product UI, diagrams and figures doing the explaining instead of
   paragraphs. The same grammar on every page, so the site reads as
   one object however deep you go.

   Laws kept:  one background per page (ambient light only on the
   fixed .sweep), glass only on pressable controls (none here — every
   surface is a reading surface, so it is plate + hairline + lit
   gradient), one type family with hierarchy by weight, shu the only
   accent, ember fenced to the sweep and the lit plates.
   ============================================================ */

:root{
  --lwrap:1200px;
  --ember:#FFB38A;
  --brine:#12756B;                     /* the grant's seawater — its own semantics */
  --brine-ink:#6FB37E;                 /* seawater as INK on dark, 7.83:1        */
  --r-plate:22px; --r-ui:12px;
  --sweep-o:1;                         /* layers.js lowers it as the reading begins */
}

/* ---------- page-level layers ---------- */
main.lpage{position:relative;z-index:1}
/* The sweep: the film's gap of light as a diagonal plane, FIXED so it can never
   clip on a section edge (the one-background law). The opening's plates float
   over it; the JS dims it as the visitor scrolls, and a faint memory of it
   stays behind the whole page. */
.sweep{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--sweep-o);
  background:
    radial-gradient(52% 44% at 96% 4%,rgba(255,214,182,.24),transparent 62%),
    linear-gradient(108deg,transparent 0 44%,rgba(58,25,16,.94) 48%,rgba(150,46,22,.6) 57%,
      rgba(216,64,31,.42) 64%,rgba(255,179,138,.34) 72%,rgba(58,25,16,.62) 84%,transparent 94%);
  -webkit-mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.55) 66%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 34%,rgba(0,0,0,.55) 66%,transparent 100%)}
@media (max-width:760px){
  .sweep{background:
    radial-gradient(70% 34% at 100% 0%,rgba(255,214,182,.22),transparent 64%),
    linear-gradient(118deg,transparent 0 40%,rgba(58,25,16,.9) 46%,rgba(216,64,31,.38) 60%,
      rgba(255,179,138,.3) 70%,rgba(58,25,16,.5) 84%,transparent 95%)}
}

/* ---------- measure & rhythm ---------- */
.lwrap{max-width:var(--lwrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.lsec{position:relative;padding:clamp(3.4rem,8vh,6.4rem) 0}
.lsec--tight{padding-top:clamp(2rem,4vh,3rem)}
.lsec[id]{scroll-margin-top:7.6rem}

/* ---------- the opening ---------- */
.lopen{position:relative;padding-bottom:clamp(2.6rem,6vh,4.6rem)}
.lopen__stack{max-width:46rem;padding:clamp(1.8rem,5vh,3.4rem) 0 clamp(2rem,4vh,2.8rem)}
.lk{font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.lk .idx{margin-right:.55rem}
.lopen__stack .lk{margin-bottom:1.15rem}
.lopen h1.lt{font-size:clamp(2.5rem,1.4rem + 5vw,5.1rem);line-height:.98;letter-spacing:-.042em;margin:0 0 1.25rem;max-width:15ch;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.lead{font-size:clamp(1.08rem,1rem + .5vw,1.38rem);font-weight:300;line-height:1.48;color:var(--body);max-width:44ch;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.lead b{font-weight:500;color:var(--ink)}
.lopen .btn-row{margin-top:1.8rem}

/* ---------- two-tone headings ----------
   Stripe's dark-sentence + grey-continuation, done with weight instead of a
   second typeface: 500 ink for the claim, 300 body for the rest. */
.lt{font-weight:500;letter-spacing:-.035em;line-height:1.06;margin:0}
.lt .lt-cont{font-weight:300;color:var(--body)}
.lt em{font-style:normal;font-weight:600;color:var(--vermilion-text)}
h2.lt{font-size:clamp(1.75rem,1.15rem + 2.4vw,2.95rem);max-width:24ch}
.lhead{display:grid;gap:.9rem;margin-bottom:clamp(1.8rem,4vh,2.8rem)}
.lhead .lk{display:block}
.lhead>p{font-size:clamp(1rem,.95rem + .3vw,1.12rem);font-weight:300;line-height:1.6;color:var(--body);max-width:54ch}
@media (min-width:900px){
  .lhead--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(2rem,5vw,4rem);align-items:end}
  .lhead--split .lk{grid-column:1/-1}
  .lhead--split>p{padding-bottom:.35rem}
}

/* ---------- the grid ---------- */
.lgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.75rem,1.3vw,1.1rem)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
.r2{grid-row:span 2}
@media (max-width:980px){
  .c3,.c4{grid-column:span 6}
  .c5,.c7,.c8,.c9{grid-column:span 12}
}
@media (max-width:600px){.lgrid>*{grid-column:span 12}.r2{grid-row:auto}}

/* ---------- plates: the reading surface ---------- */
.plate{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--hair-2);border-radius:var(--r-plate);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 34px 70px -40px rgba(0,0,0,.85)}
.plate__cap{padding:1.2rem 1.35rem 1.15rem;display:flex;flex-direction:column;gap:.4rem}
.plate__cap h3{font-size:1.06rem;font-weight:500;letter-spacing:-.018em;line-height:1.28;margin:0}
.plate__cap h3 .lt-cont{font-weight:300;color:var(--body)}
.plate__cap p{font-size:.9rem;font-weight:300;line-height:1.55;color:var(--body);max-width:36ch;margin:0}
.plate__cap .lk{margin-bottom:.35rem}
.more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:.84rem;font-weight:500;color:var(--vermilion-text)}
.more .arr{transition:transform .25s var(--ease)}
.more:hover .arr,a.plate:hover .more .arr{transform:translateX(4px)}
/* the art: the drawn thing the plate is about. It bleeds off the plate's
   bottom edge like a product screen that keeps going. */
.plate__art{position:relative;flex:1;margin-top:auto;padding:0 1.35rem;min-height:11rem;display:flex;align-items:flex-end}
.plate__art>*{width:100%}
.plate__art>.ui,.plate__art>.answer,.plate__art>.phone{transform:translateY(12px)}
.plate__art--pad{padding:.4rem 1.35rem 1.35rem;align-items:flex-start;min-height:0}
.plate--tall .plate__art{min-height:15rem}
/* lit: the ember at a corner — the light of the opening carried into a surface */
.plate--lit{background:radial-gradient(90% 62% at 100% 100%,rgba(255,179,138,.17),transparent 62%),var(--paper-2)}
.plate--lit-top{background:radial-gradient(78% 56% at 0% 0%,rgba(255,179,138,.14),transparent 60%),var(--paper-2)}
.plate--deep{background:#0A0807;border-color:var(--hair)}
/* the one paper object: the washi sheet, for the thing we hand back */
.plate--washi{background:#F6F3EC;color:#1A1714;border-color:#DED8CB;box-shadow:0 34px 70px -40px rgba(0,0,0,.9)}
.plate--washi .plate__cap p,.plate--washi .lt-cont{color:#4C463B}
.plate--washi .lk{color:#6A6358}
.plate--washi .more{color:var(--vermilion-on-light)}
/* the grant keeps its seawater */
.plate--brine{background:radial-gradient(84% 60% at 100% 0%,rgba(18,117,107,.34),transparent 62%),var(--paper-2);border-color:rgba(18,117,107,.55)}
.plate--brine .more{color:var(--brine-ink)}
.plate--brine .lk{color:var(--brine-ink)}
a.plate{color:inherit;transition:border-color .25s var(--ease),transform .25s var(--ease)}
a.plate:hover{border-color:var(--hair-3);transform:translateY(-3px)}

/* ---------- drawn UI ----------
   No screenshots, nothing to go stale: every "screen" is HTML on the plate. */
.ui{position:relative;min-width:0;border:1px solid var(--hair-2);border-radius:var(--r-ui);background:var(--paper);overflow:hidden;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.9);font-size:.8rem}
.ui__bar{display:flex;align-items:center;gap:.35rem;padding:.55rem .75rem;border-bottom:1px solid var(--hair);background:var(--paper-2)}
.ui__bar i{width:6px;height:6px;border-radius:50%;background:var(--hair-3)}
.ui__bar i:first-child{background:var(--vermilion)}
.ui__url{margin-left:.45rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui__body{padding:.9rem .95rem;display:flex;flex-direction:column;gap:.55rem}
.ui__h{font-size:.86rem;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.ui__sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.ln{height:6px;border-radius:3px;background:var(--hair-2)}
.ln.s{width:58%}.ln.xs{width:36%}.ln.hi{background:var(--vermilion);height:3px;width:44px;border-radius:2px}
.ui__row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.42rem 0;border-top:1px solid var(--hair);font-size:.74rem;color:var(--body)}
.ui__row:first-child{border-top:0}
.ui__row b{font-family:var(--mono);font-weight:500;font-size:.72rem;color:var(--ink)}
.ui__btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .85rem;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.72rem;font-weight:500;align-self:flex-start}
.ui__grid2{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.ui__cell{padding:.55rem .6rem;border:1px solid var(--hair);border-radius:8px;background:var(--paper-2)}
.ui__cell b{display:block;font-family:var(--mono);font-weight:300;font-size:1.05rem;color:var(--ink);line-height:1.1}
.ui__cell span{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.tag{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--hair-3);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.tag--ok{color:var(--good);border-color:rgba(111,179,126,.45)}
.tag--shu{color:var(--vermilion-text);border-color:rgba(216,64,31,.55)}
.tag--ink{color:var(--ink);border-color:var(--hair-3)}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}

/* a phone, for the things that live in a hand */
.phone{width:min(11.5rem,72%);margin:0 auto;border-radius:24px;border:1px solid var(--hair-3);background:var(--paper);padding:.6rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);display:flex;flex-direction:column;gap:.5rem;font-size:.72rem}
.phone__notch{width:36%;height:4px;background:var(--hair-3);border-radius:2px;margin:.1rem auto .35rem}

/* the answer card — an AI engine answering, and naming one business */
.answer{position:relative;min-width:0;border:1px solid var(--hair-2);border-radius:14px;background:var(--paper);padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.7rem;box-shadow:0 26px 50px -30px rgba(0,0,0,.9)}
.answer__q{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.answer__q b{font-family:var(--sans);font-weight:500;font-size:.88rem;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.answer__a{font-size:.9rem;font-weight:300;line-height:1.62;color:var(--body);margin:0}
.answer__a mark{background:none;color:var(--ink);font-weight:500;box-shadow:inset 0 -1.5px 0 var(--vermilion)}
.answer__foot{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.cite{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem;border-radius:999px;background:var(--paper-2);border:1px solid var(--hair-3);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap}
.cite i{width:6px;height:6px;border-radius:50%;background:var(--vermilion);flex:none}
.cite.dim{color:var(--stone)}
.cite.dim i{background:var(--hair-3)}

/* the results page emptying: ten links fading under one answer */
.serp{display:flex;flex-direction:column;gap:.62rem;padding:.2rem 0}
.serp__r{display:flex;flex-direction:column;gap:.32rem;opacity:var(--o,1)}
.serp__r .t{height:7px;border-radius:3px;background:var(--hair-3);width:var(--w,70%)}
.serp__r .u{height:4px;border-radius:2px;background:var(--hair-2);width:38%}
.over{position:relative}
.over .answer{position:absolute;left:0;right:0;top:0;z-index:2}
.over .serp{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}

/* meters: the bars a monitor shows */
.meter{display:grid;gap:.62rem;width:100%}
.meter__row{display:grid;grid-template-columns:minmax(6rem,7.5rem) 1fr auto;gap:.7rem;align-items:center;font-size:.76rem}
.meter__row>span{color:var(--ink-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter__bar{height:5px;border-radius:99px;background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.meter__bar i{display:block;height:100%;border-radius:99px;background:var(--ink);width:var(--v,50%);transform-origin:left;
  transition:transform 1s var(--ease) var(--d,0s)}
.meter__bar i.ok{background:var(--good)}
.meter__bar i.shu{background:var(--vermilion)}
.meter__bar i.dim{background:var(--hair-3)}
.meter__row b{font-family:var(--mono);font-weight:500;font-size:.72rem;color:var(--ink);min-width:2.6em;text-align:right}
html.js .rv:not(.in) .meter__bar i{transform:scaleX(0)}

/* the score ring (pages.css draws it); here the value is a variable */
.ring .fill{stroke-dashoffset:var(--off,339.29)}
html.js .rv:not(.in) .ring .fill{stroke-dashoffset:339.29}
.ring--sm{width:96px;height:96px}
.ring--sm .ring__num b{font-size:1.7rem}
.ring--sm .ring__num span{font-size:.5rem;letter-spacing:.12em}
.rings{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center}

/* a checklist that reads as a spec sheet */
.spec{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;width:100%}
.spec li{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;padding:.5rem .7rem;border:1px solid var(--hair);border-radius:9px;background:var(--paper);font-size:.8rem;color:var(--ink-soft)}
.spec li i{width:7px;height:7px;border-radius:2px;background:var(--vermilion);flex:none}
.spec li i.ok{background:var(--good)}
.spec li i.dim{background:var(--hair-3)}
.spec li code{font-family:var(--mono);font-size:.72rem;color:var(--ink)}
.spec li .tag{margin-left:auto}

/* a booking calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%}
.cal i{aspect-ratio:1;border-radius:5px;background:var(--paper-3);border:1px solid var(--hair);display:block}
.cal i.b{background:var(--hair-3);border-color:var(--hair-3)}
.cal i.s{background:var(--vermilion);border-color:var(--vermilion)}
.cal i.x{opacity:.32}
.cal__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);padding-bottom:.3rem}
.cal__head b{color:var(--ink);font-weight:500}

/* pipeline columns (a CRM at a glance) */
.pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%}
.pipe__col{display:flex;flex-direction:column;gap:.4rem}
.pipe__col>span{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);padding-bottom:.15rem;border-bottom:1px solid var(--hair)}
.pipe__card{padding:.5rem .55rem;border:1px solid var(--hair);border-radius:7px;background:var(--paper);display:flex;flex-direction:column;gap:.3rem}
.pipe__card i{display:block;height:5px;border-radius:3px;background:var(--hair-2);width:var(--w,70%)}
.pipe__card i.hi{background:var(--vermilion);height:3px;width:34%}

/* tokens & type: the design system, as a specimen */
.swatches{display:flex;gap:.4rem;width:100%}
.swatches i{flex:1;height:28px;border-radius:7px;border:1px solid var(--hair-2)}
.specimen{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;width:100%;padding-top:.6rem;border-top:1px solid var(--hair);margin-top:.7rem}
.specimen b{font-size:2.4rem;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.specimen b.w3{font-weight:300}.specimen b.w5{font-weight:500}.specimen b.w6{font-weight:600}
.specimen span{flex:1 1 100%;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.plate--washi .ui,.plate--washi .ui__bar{background:#FFFDF8;border-color:#DED8CB}
.plate--washi .ui__url,.plate--washi .ui__sub{color:#6A6358}
.plate--washi .ln{background:#CFC8B8}
.plate--washi .specimen b{color:#1A1714}
.plate--washi .specimen{border-color:#DED8CB}
.plate--washi .swatches i{border-color:#CFC8B8}

/* ---------- tiles: one per service ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:clamp(.75rem,1.3vw,1.1rem)}
a.tile{display:flex;flex-direction:column;gap:.7rem;min-width:0;padding:1.2rem 1.3rem 1.25rem;color:inherit;
  border:1px solid var(--hair-2);border-radius:18px;background:var(--paper-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
a.tile:hover{border-color:var(--vermilion);transform:translateY(-3px);background:var(--paper-3)}
.tile__glyph{display:block;width:100%;height:auto;aspect-ratio:5/2;margin-bottom:.2rem;overflow:visible}
.tile__glyph *{vector-effect:non-scaling-stroke}
.tile__glyph .k{fill:none;stroke:var(--hair-3);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.tile__glyph .f{fill:var(--paper-3);stroke:var(--hair-3);stroke-width:1.2}
.tile__glyph .hi{fill:none;stroke:var(--vermilion);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile__glyph .hf{fill:var(--vermilion);stroke:none}
.tile__glyph .mu{fill:var(--hair-2);stroke:none}
.tile__glyph .tx{fill:var(--stone);font-family:var(--mono);font-size:8px;letter-spacing:.1em}
.tile__glyph .tb{fill:var(--ink);font-family:var(--sans);font-weight:600}
a.tile:hover .tile__glyph .k{stroke:var(--stone)}
a.tile:hover .tile__glyph .hi{filter:drop-shadow(0 0 6px rgba(216,64,31,.55))}
.tile h3{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:1.02rem;font-weight:500;letter-spacing:-.018em;margin:0}
.tile h3 .arr{color:var(--vermilion-text);font-weight:400;transition:transform .25s var(--ease)}
a.tile:hover .arr{transform:translateX(4px)}
.tile p{font-size:.88rem;font-weight:300;line-height:1.55;color:var(--body);margin:0}

/* ---------- split: text beside its drawing ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
.split__text h3{font-size:clamp(1.4rem,1.1rem + 1.4vw,2.05rem);font-weight:500;letter-spacing:-.032em;line-height:1.1;margin:0 0 .9rem}
.split__text h3 .lt-cont{font-weight:300;color:var(--body)}
.split__text h3 em{font-style:normal;font-weight:600;color:var(--vermilion-text)}
.split__text p{font-size:clamp(.98rem,.95rem + .2vw,1.08rem);font-weight:300;line-height:1.62;color:var(--body);max-width:46ch;margin:0}
.split__text p+p{margin-top:.8rem}
.split__text .lk{display:block;margin-bottom:.9rem}
.split__text ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.split__text li{position:relative;padding-left:1.15rem;font-size:.94rem;font-weight:300;color:var(--ink-soft);line-height:1.5}
.split__text li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--vermilion)}
.split__text .btn-row{margin-top:1.4rem}
.split__art{min-width:0}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,5vw,4.6rem)}
  .split--flip .split__text{order:2}
}

/* ---------- chapters: the page's own rail under the nav ---------- */
.chapters{position:sticky;top:64px;z-index:400;background:color-mix(in srgb,var(--paper) 94%,transparent);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chapters__in{max-width:var(--lwrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem);display:flex;gap:clamp(1rem,2vw,1.6rem);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.chapters__in::-webkit-scrollbar{display:none}
.chapters a{flex:none;padding:.78rem 0;margin-bottom:-1px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);border-bottom:1px solid transparent;white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease)}
.chapters a:hover,.chapters a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--vermilion)}
.chapters a:focus-visible{outline-offset:-2px}

/* ---------- diagrams: hairline drawings that explain the work ---------- */
.rail{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.rail .lab{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--stone)}
.rail .lab.hi{fill:var(--vermilion-text)}
.rail .t{fill:var(--ink);font-size:12px;font-weight:500;letter-spacing:-.01em}
.rail .t.s{fill:var(--body);font-weight:300;font-size:10.5px}
.rail .line{fill:none;stroke:var(--hair-3);stroke-width:1.2;stroke-linecap:round}
.rail .line.hi{stroke:var(--vermilion);stroke-width:1.6}
.rail .line.dash{stroke-dasharray:3 6}
.rail .box{fill:var(--paper-2);stroke:var(--hair-3);stroke-width:1}
.rail .box.hi{stroke:var(--vermilion)}
.rail .box.deep{fill:var(--paper)}
.rail .dot{fill:var(--vermilion)}
.rail .dot.mu{fill:var(--hair-3)}
.rail .glow{fill:url(#emberglow)}
/* draw-on: authored finished; only the JS tier hides a line to draw it */
html.js .rv .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease) var(--d,0s)}
html.js .rv.in .draw{stroke-dashoffset:0}
html.js .rv .pop{opacity:0;transition:opacity .7s var(--ease) var(--d,0s)}
html.js .rv.in .pop{opacity:1}
.diagram{position:relative;padding:clamp(1.2rem,3vw,2.4rem);border:1px solid var(--hair-2);border-radius:var(--r-plate);
  background:radial-gradient(60% 50% at 50% 100%,rgba(255,179,138,.09),transparent 70%),var(--paper-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.diagram__foot{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.diagram__foot b{color:var(--ink);font-weight:500}

/* ---------- figures ---------- */
.lnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;padding:clamp(2.2rem,5vh,3.4rem) 0;
  border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.lnum{min-width:0}
.lnum i{display:block;width:34px;height:1px;background:var(--vermilion);margin-bottom:1rem;transform-origin:left;transition:transform .5s var(--ease) .2s}
html.js .rv:not(.in) .lnum i{transform:scaleX(0)}
.lnum b{display:block;font-family:var(--mono);font-weight:300;font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);letter-spacing:-.02em;line-height:1;color:var(--ink)}
.lnum span{display:block;margin-top:.65rem;font-size:.86rem;font-weight:300;line-height:1.45;color:var(--body);max-width:20ch}
@media (max-width:760px){.lnums{grid-template-columns:1fr 1fr;gap:1.4rem 1.2rem}}

/* ---------- the close ---------- */
.lcta{padding:clamp(4rem,10vh,7rem) 0 clamp(2rem,4vh,3rem)}
.lcta .lt{font-size:clamp(2rem,1.3rem + 3.4vw,3.8rem);max-width:18ch;letter-spacing:-.04em;line-height:1.02}
.lcta__row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.7rem}
.lcta .btn-solid{margin-top:0}
.lcta p{margin-top:1rem;font-weight:300;color:var(--body);max-width:44ch}

/* the FAQ, compact, two columns when there is room */
.lfaq{margin-top:0}
@media (min-width:900px){
  .lfaq{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem);border-top:0}
  .lfaq details:first-of-type,.lfaq details:nth-of-type(2){border-top:1px solid var(--hair-2)}
}

/* ---------- reveal (the site's one entrance verb) ---------- */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  html.js .rv{filter:blur(6px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s),filter .8s var(--ease) var(--d,0s)}
  html.js .rv.in{filter:none}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;filter:none;transition:none}
  html.js .rv .draw,html.js .rv .pop,html.js .rv .meter__bar i,html.js .rv .lnum i,html.js .rv .ring .fill{transition:none;stroke-dashoffset:0;opacity:1;transform:none}
  .sweep{opacity:.35}
}
/* touch: no backdrop-filter and no animated filters (iOS composites stale snapshots) */
@media (pointer:coarse){
  .chapters{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--paper) 97%,transparent)}
}
/* no JS: the sweep holds, the chapters still link, nothing is hidden */
html:not(.js) .sweep{opacity:.6}
@media (max-width:760px){
  .lopen__stack{padding-top:1.4rem}
  .plate__cap{padding:1.05rem 1.1rem 1rem}
  .plate__art{padding:0 1.1rem}
  .plate__art--pad{padding:.3rem 1.1rem 1.1rem}
  a.tile{padding:1.05rem 1.1rem 1.1rem}
  .diagram{border-radius:18px}
  .plate{border-radius:18px}
}

/* ---------- additions: tile columns, the grant plate, read-more, the rail's list twin ---------- */
@media (min-width:981px){
  .tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tiles--5 a.tile{padding:1.05rem 1.1rem 1.1rem}
  .tiles--5 .tile h3{font-size:.95rem}
  .tiles--5 .tile p{font-size:.84rem}
}
.grant{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;padding:clamp(1.3rem,3vw,2.4rem)}
.grant h3{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.4rem);max-width:20ch}
.grant h3 em{color:var(--brine-ink)}
.grant .idx{color:var(--brine-ink)}
.grant__text>p:not(.lk){margin-top:.9rem;font-weight:300;line-height:1.6;color:var(--body);max-width:44ch}
.grant__text .btn-row{margin-top:1.4rem}
.grant__art{display:flex;flex-direction:column;gap:.75rem;align-self:center}
@media (min-width:900px){.grant{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}}
.gsplit{display:flex;height:40px;border-radius:9px;overflow:hidden;border:1px solid var(--hair-3)}
.gsplit i{display:flex;align-items:center;padding:0 .8rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-style:normal}
.gsplit .funded{flex:0 0 55%;background:var(--brine);color:#F2EEE7;transform-origin:left;transition:transform 1s var(--ease)}
.gsplit .you{flex:1;justify-content:flex-end;background:var(--paper-3);color:var(--stone)}
html.js .rv:not(.in) .gsplit .funded{transform:scaleX(.2)}
.gleg{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.lmore{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.lmore a{font-size:.9rem;font-weight:400;color:var(--ink-soft);border-bottom:1px solid var(--hair-3)}
.lmore a:hover{color:var(--ink);border-bottom-color:var(--vermilion)}
/* the drawn rail needs width; below it the same steps read as a list */
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:st}
.rail-list li{position:relative;padding:.75rem .9rem .75rem 2.6rem;border:1px solid var(--hair);border-radius:12px;background:var(--paper);font-size:.92rem;color:var(--ink-soft)}
.rail-list li b{display:block;font-weight:500;color:var(--ink)}
.rail-list li span{font-weight:300;color:var(--body);font-size:.86rem}
.rail-list li::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;left:.85rem;top:.9rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--vermilion-text)}
@media (min-width:760px){
  .rail-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:759px){.rail{display:none}}

/* ---------- additions: static tiles, an always-visible step list, the still plate ---------- */
div.tile{display:flex;flex-direction:column;gap:.7rem;min-width:0;padding:1.2rem 1.3rem 1.25rem;
  border:1px solid var(--hair-2);border-radius:18px;background:var(--paper-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
@media (min-width:760px){.rail-list--always{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
@media (min-width:900px){.rail-list--always{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* a plate carrying one of the studio's own stills (Higgsfield, palette-native) behind its caption */
.plate--still{isolation:isolate}
.plate--still>img.still{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.92}
.plate--still::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(14,12,10,.94) 0%,rgba(14,12,10,.62) 48%,rgba(14,12,10,.18) 100%)}
.plate--still .plate__cap{position:relative;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* ---------- additions: compact tiles, drawings on plates, the layered article, post plates ---------- */
.tile--compact{gap:.5rem;padding:1rem 1.1rem 1.05rem}
.tile--compact .tile__glyph{aspect-ratio:5/2;margin-bottom:.1rem}
.tile--compact h3{font-size:.95rem}
.plate-svg{display:block;width:100%;height:auto;aspect-ratio:auto;margin:0;overflow:visible}
.split__text p strong,.split__text p b{font-weight:500;color:var(--ink)}
.article--layered{max-width:66ch;padding-top:0}
.article--layered h2{font-weight:500;letter-spacing:-.03em;scroll-margin-top:7.6rem}
.article--layered>p:first-child{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);line-height:1.6}
.lopen--post .lgrid{align-items:start}
.lopen--post .lopen__stack{max-width:none;padding-top:clamp(1.2rem,4vh,2.6rem)}
.lopen--post h1.lt{font-size:clamp(2.1rem,1.3rem + 3.6vw,4rem);max-width:18ch}
.lopen--post .plate{margin-top:clamp(1.2rem,4vh,2.6rem)}
@media (max-width:980px){.lopen--post .plate{margin-top:0}}
a.plate--post .plate__cap{padding:1.25rem 1.35rem 1.3rem;gap:.55rem}
a.plate--post .plate__cap h3{font-size:1.12rem;line-height:1.28}
a.plate--post .plate__cap p{max-width:none}
a.plate--post:hover{border-color:var(--vermilion)}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;width:100%}
.toc li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:baseline;padding:.45rem .6rem;border:1px solid var(--hair);border-radius:8px;background:var(--paper);font-size:.8rem;color:var(--ink-soft);line-height:1.35}
.toc li i{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--vermilion-text);font-style:normal}

/* ============================================================
   COLOUR (founder, 2026-09-23: "more colours"): one hue per family, one brand
   per product. Shu stays the action colour. The family hue lights the plates,
   the glyphs, the indices, the rail and the sweep of the page it belongs to;
   product screens carry the real brand of the product they show.
   ============================================================ */
:root{
  --hue-design:#E8A33A;   /* the gilded kiwi                 8.5:1 on paper-2 */
  --hue-build:#6FA0FF;    /* the film's cobalt sky, lifted   6.9:1 */
  --hue-grow:#6FB37E;     /* kiwi flesh                      7.4:1 */
  --hue-geo:#FFB38A;      /* the gap of light               11.6:1 */
  --hue-grant:#2FA596;    /* seawater, lifted                6.4:1 */
  --c:var(--hue-geo);
}
[data-hue="design"]{--c:var(--hue-design)}
[data-hue="build"]{--c:var(--hue-build)}
[data-hue="grow"]{--c:var(--hue-grow)}
[data-hue="geo"]{--c:var(--hue-geo)}
[data-hue="grant"]{--c:var(--hue-grant)}
/* the sweep takes the page's hue where the ember used to be */
.lpage[data-hue] .sweep{background:
  radial-gradient(52% 44% at 96% 4%,color-mix(in srgb,var(--c) 36%,transparent),transparent 62%),
  linear-gradient(108deg,transparent 0 44%,color-mix(in srgb,var(--c) 26%,#160B08) 48%,color-mix(in srgb,var(--c) 34%,transparent) 57%,
    color-mix(in srgb,var(--c) 46%,transparent) 64%,color-mix(in srgb,var(--c) 40%,transparent) 72%,color-mix(in srgb,var(--c) 22%,#160B08) 84%,transparent 94%)}
.lpage[data-hue="geo"] .sweep,.lpage:not([data-hue]) .sweep{background:
  radial-gradient(52% 44% at 96% 4%,rgba(255,214,182,.24),transparent 62%),
  linear-gradient(108deg,transparent 0 44%,rgba(58,25,16,.94) 48%,rgba(150,46,22,.6) 57%,rgba(216,64,31,.42) 64%,rgba(255,179,138,.34) 72%,rgba(58,25,16,.62) 84%,transparent 94%)}
.plate--lit{background:radial-gradient(90% 62% at 100% 100%,color-mix(in srgb,var(--c) 24%,transparent),transparent 62%),var(--paper-2)}
.plate--lit-top{background:radial-gradient(78% 56% at 0% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 60%),var(--paper-2)}
.plate--hue{border-color:color-mix(in srgb,var(--c) 40%,var(--hair-2))}
.idx,.lk .idx{color:var(--c)}
.tile__glyph .hi{stroke:var(--c)}
.tile__glyph .hf{fill:var(--c)}
a.tile:hover{border-color:var(--c)}
a.tile:hover .tile__glyph .hi{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.tile h3 .arr{color:var(--c)}
.lnum i{background:var(--c)}
.split__text li::before{background:var(--c)}
.meter__bar i.hue{background:var(--c)}
.tag--hue{color:var(--c);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.chapters{--c:var(--hue-geo)}
.chapters a:hover,.chapters a[aria-current="true"]{border-bottom-color:var(--c)}
.rail .line.hi{stroke:var(--c)} .rail .box.hi{stroke:var(--c)} .rail .lab.hi{fill:var(--c)}
.plate__art>.fit{transform:translateY(12px)}

/* ============================================================
   PRODUCT SCREENS — the things KIWA built, re-assembled in HTML at their
   natural size (a 760px app window, a 300px phone) and scaled to the plate by
   layers.js (.fit sets zoom), so type keeps its proportions instead of being
   squashed into the column. Names of applications and clients are not shown.
   ============================================================ */
.fit{position:relative;width:100%;overflow:hidden;line-height:0}
.fit>*{line-height:1.35;width:calc(var(--w,720) * 1px);max-width:100%}
.fit--center{display:flex;justify-content:center}
.fit--center>*{max-width:none}
html.js .fit>*{max-width:none}
.scr{position:relative;min-width:0;border-radius:16px;overflow:hidden;font-family:var(--sans);font-size:13px;line-height:1.35;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);border:1px solid rgba(0,0,0,.14)}
.scr--light{background:#FBFAF7;color:#1A1714;color-scheme:light}
.scr--dark{background:#0F0D0B;color:#F2EEE7;border-color:var(--hair-2)}
.scr__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr--light .scr__bar{background:#F1EEE6;color:#6A605D;border-bottom:1px solid #E4DED0}
.scr--dark .scr__bar{background:var(--paper-2);color:var(--stone);border-bottom:1px solid var(--hair)}
.scr__bar i{width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.35;flex:none}
.scr__bar i:first-child{background:var(--b,#D8401F);opacity:1}
.scr__bar span{overflow:hidden;text-overflow:ellipsis;margin-left:6px}
/* an app with a sidebar */
.scr__app{display:grid;grid-template-columns:168px 1fr;min-height:320px}
.scr__side{background:#1E293B;color:#E2E8F0;padding:16px 10px;display:flex;flex-direction:column;gap:2px;font-size:12.5px;min-width:0}
.scr__side b{display:block;font-weight:700;color:#fff;font-size:14px;margin:0 8px 12px;letter-spacing:-.01em}
.scr__side b small{display:block;font-weight:400;font-size:10.5px;color:#94A3B8;letter-spacing:.02em;margin-top:2px}
.scr__side span{padding:6px 10px;border-radius:6px;color:#CBD5E1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr__side span.on{background:#2A5DB0;color:#fff}
.scr__main{padding:18px 20px;background:#F4F1EA;display:flex;flex-direction:column;gap:14px;min-width:0;color:#1A1D2E}
.scr__main--white{background:#fff}
.scr__h{font-weight:600;font-size:17px;color:#2F2118;line-height:1.2}
.scr__h small{display:block;font-weight:400;color:#6A605D;font-size:12px;margin-top:3px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpis--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{background:#fff;border:1px solid #E2E8F0;border-radius:8px;padding:10px 12px;min-width:0}
.kpi span{display:block;font-size:11px;color:#64748B;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{display:block;font-family:var(--mono);font-weight:500;font-size:19px;color:#1A1D2E;letter-spacing:-.02em;margin:3px 0 2px;white-space:nowrap}
.kpi b.red{color:#DC2626}
.kpi em{display:block;font-style:normal;font-size:10.5px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card{background:#fff;border:1px solid #E2E8F0;border-radius:8px;padding:12px 14px}
.card__t{display:block;font-size:12px;font-weight:600;color:#334155;margin-bottom:6px}
.rows{display:flex;flex-direction:column;background:#fff;border:1px solid #E2E8F0;border-radius:8px;overflow:hidden}
.row{display:grid;grid-template-columns:86px 1fr auto auto;gap:12px;align-items:center;padding:8px 12px;border-top:1px solid #EEF2F7;font-size:12.5px;color:#334155;min-width:0}
.row:first-child{border-top:0}
.row>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .id{font-family:var(--mono);color:#2A5DB0}
.row .mo{color:#64748B}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.02em}
.pill--ok{background:#ECFDF5;color:#047857}.pill--bad{background:#FEF2F2;color:#B91C1C}.pill--mu{background:#F1F5F9;color:#475569}.pill--warn{background:#FFFBEB;color:#B45309}
.bars{display:flex;align-items:flex-end;gap:6px;height:72px;padding-top:4px}
.bars i{flex:1;background:color-mix(in srgb,var(--b,#2A5DB0) 62%,#fff);border-radius:3px 3px 0 0;height:var(--h)}
.bars i.hi{background:var(--b,#2A5DB0)}
/* a booking screen */
.bk{padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:#FBFAF7}
.bk__brand{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--b)}
.bk__brand small{font-family:var(--mono);font-weight:400;color:#6A605D;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bk__brand img{height:24px;width:auto}
.bk__wm{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.01em;color:var(--b)}
.bk__crown{width:26px;height:26px;flex:none}
.bk__fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk__f{border:1px solid #DED8CB;border-radius:8px;padding:8px 11px;background:#fff;min-width:0}
.bk__f span{display:block;font-size:10px;color:#6A605D;text-transform:uppercase;letter-spacing:.08em}
.bk__f b{display:block;font-weight:600;font-size:13px;color:#1A0A08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.car{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;border:1px solid #DED8CB;border-radius:10px;padding:9px 11px;background:#fff;min-width:0}
.car__img{height:36px;border-radius:6px;background:linear-gradient(135deg,color-mix(in srgb,var(--b) 55%,#fff),color-mix(in srgb,var(--b) 18%,#fff))}
.car b{display:block;font-size:13.5px;color:#1A0A08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car small{display:block;font-size:11px;color:#6A605D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.car .price{text-align:right;font-family:var(--mono);font-size:16px;font-weight:500;color:#1A0A08;white-space:nowrap}
.car .price small{font-family:var(--sans);display:inline;font-size:11px}
.car .price .pill{display:block;margin-top:4px}
.bk__btn{display:flex;justify-content:center;padding:11px;border-radius:8px;background:var(--b);color:#fff;font-weight:700;font-size:14px}
/* a phone */
.ph{width:300px;border-radius:40px;background:#111;padding:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.95)}
.ph__scr{border-radius:30px;overflow:hidden;background:#FBFAF7;color:#1A1714;font-size:13px}
.ph__top{background:var(--b);color:#fff;padding:26px 18px 14px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.ph__top small{display:block;font-weight:400;opacity:.85;font-size:11.5px;margin-top:3px}
.ph__body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px}
.ph__row{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border:1px solid #DED8CB;border-radius:8px;background:#fff;min-width:0}
.ph__row span{color:#6A605D;white-space:nowrap}
.ph__row b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph__car{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;padding:9px 11px;border:1px solid #DED8CB;border-radius:10px;background:#fff}
.ph__car i{display:block;height:32px;border-radius:6px;background:linear-gradient(135deg,color-mix(in srgb,var(--b) 60%,#fff),color-mix(in srgb,var(--b) 20%,#fff))}
.ph__car b{display:block;font-size:13.5px}
.ph__car small{display:block;font-size:11px;color:#6A605D;margin-top:1px}
.ph__btn{margin-top:2px;text-align:center;padding:12px;border-radius:8px;background:var(--b2,var(--b));color:#111;font-weight:800;font-size:14px}
/* the grant estimator */
.est{padding:16px 18px;display:flex;flex-direction:column;gap:9px;background:#FBFAF7;color:#1A1714}
.est__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:600;font-size:15px}
.est__t small{font-family:var(--mono);font-size:10px;color:#6A605D;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.est__lab{font-size:12px;color:#6A605D}
.est__cost{font-family:var(--mono);font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1}
.est__slider{height:2px;background:#DED8CB;position:relative;margin:10px 0 6px}
.est__slider i{position:absolute;left:18%;top:-7px;width:16px;height:16px;border-radius:50%;background:#12756B;border:3px solid #fff;box-shadow:0 0 0 1px #12756B}
.est__split{display:flex;height:36px;border-radius:6px;overflow:hidden;border:1px solid #1A1714}
.est__split i{display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:11px;font-style:normal;white-space:nowrap;overflow:hidden}
.est__split .a{flex:0 0 53%;background:#12756B;color:#fff}
.est__split .b{flex:1;justify-content:flex-end;background:#F4F1EA;color:#6A605D}
.est__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid #DED8CB;font-size:12px;color:#6A605D}
.est__row b{font-family:var(--mono);font-size:15px;color:#1A1714;font-weight:500;white-space:nowrap}
.est__row.total b{color:#12756B;font-size:20px}
/* the GEO score result */
.gs{padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.gs__ring{width:124px;height:124px;position:relative;flex:none}
.gs__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gs__ring circle{fill:none;stroke-width:8}
.gs__ring .tr{stroke:var(--hair-3)}
.gs__ring .fl{stroke:var(--warn);stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:var(--off,86)}
.gs__num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.gs__num b{font-size:34px;font-weight:600;letter-spacing:-.04em}
.gs__num span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:5px}
.gs__cats{display:grid;gap:7px;min-width:0}
.gs__cat{display:grid;grid-template-columns:104px 1fr 44px;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-soft)}
.gs__cat>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs__cat i{height:6px;border-radius:99px;background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden;display:block}
.gs__cat i::after{content:"";display:block;height:100%;width:var(--v);background:var(--ink);border-radius:99px}
.gs__cat i.ok::after{background:var(--good)} .gs__cat i.bad::after{background:var(--vermilion)} .gs__cat i.warn::after{background:var(--warn)}
.gs__cat b{font-family:var(--mono);font-weight:500;font-size:12px;text-align:right;white-space:nowrap}
.gs__issues{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--hair);padding-top:12px}
.gs__issue{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--body);min-width:0}
.gs__issue>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs__issue .sev{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;border-radius:999px;flex:none}
.sev.crit{color:#F0714D}.sev.med{color:var(--warn)}.sev.ok{color:var(--good)}
/* the studio hub */
.hub{padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:#F6F3EC;color:#1A1714}
.hub__brand{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;letter-spacing:.2em;font-size:12px}
.hub__brand i{width:14px;height:14px;background:#D8401F;display:inline-block;margin-right:8px;vertical-align:-2px}
.hub__brand small{font-family:var(--mono);font-weight:400;letter-spacing:.1em;font-size:10px;color:#6A6358}
.hub__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hub__tile{border:1px solid #DCD5C7;border-radius:3px;padding:10px 12px;background:#FCFAF5;min-width:0}
.hub__tile span{display:block;font-size:10.5px;color:#6A6358;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub__tile b{display:block;font-family:var(--mono);font-weight:400;font-size:26px;letter-spacing:-.02em;line-height:1.1;margin-top:3px}
.hub__tile b.warn{color:#B07D2B}
.hub__pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hub__col{border-top:2px solid #DCD5C7;padding-top:7px;font-size:11px;color:#6A6358;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub__col b{display:block;font-family:var(--mono);color:#1A1714;font-size:14px;font-weight:400;margin-top:1px}
.hub__col.on{border-top-color:#D8401F}
/* an online shop */
.shop{padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:#FBFAF7;color:#1A1714}
.shop__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shop__p{border:1px solid #DED8CB;border-radius:8px;overflow:hidden;background:#fff;min-width:0}
.shop__p i{display:block;height:64px;background:linear-gradient(135deg,color-mix(in srgb,var(--b) 50%,#fff),color-mix(in srgb,var(--b) 15%,#fff))}
.shop__p b{display:block;padding:8px 10px 0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop__p span{display:block;padding:2px 10px 9px;font-family:var(--mono);font-size:12px;color:#6A605D}
.shop__cart{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #DED8CB;padding-top:11px;font-size:13px}
.shop__cart b{font-family:var(--mono);font-weight:500}
.shop__btn{padding:8px 16px;border-radius:999px;background:var(--b);color:#fff;font-weight:700;font-size:12.5px;white-space:nowrap}
/* a marketing site */
.site{background:#FBFAF7;color:#1A0A08}
.site__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;font-size:12px;border-bottom:1px solid #DED8CB}
.site__nav b{font-weight:800;color:var(--b);white-space:nowrap}
.site__nav b img{height:22px;width:auto;display:block}
.site__nav span{color:#6A605D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site__nav em{font-style:normal;padding:5px 12px;border-radius:999px;background:var(--b);color:#fff;font-weight:700;white-space:nowrap}
.site__hero{padding:20px 16px 18px;display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:center}
.site__hero h5{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.site__hero h5 em{font-style:normal;color:var(--b)}
.site__hero p{margin:8px 0 0;font-size:12.5px;color:#6A605D;line-height:1.45}
.site__cta{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:999px;background:var(--b);color:#fff;font-weight:700;font-size:12.5px}
.site__art{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--b) 62%,#fff),color-mix(in srgb,var(--b) 18%,#fff))}
/* a search results page */
.ser{padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px;background:#fff;color:#202124}
.ser__q{display:flex;align-items:center;gap:10px;border:1px solid #DADCE0;border-radius:999px;padding:9px 16px;font-size:14px;color:#202124;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.ser__q i{width:14px;height:14px;border:2px solid #4285F4;border-radius:50%;flex:none}
.ser__r{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid #F1F3F4;min-width:0}
.ser__r .u{font-size:11px;color:#1A7F37;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ser__r .t{font-size:15px;color:#1A0DAB;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ser__r .s{font-size:12px;color:#4D5156;line-height:1.4}
.ser__r.you{border-left:3px solid var(--b,#D8401F);padding-left:10px;margin-left:-10px}
/* a brand sheet */
.brd{padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:#FBFAF7;color:#1A0A08}
.brd--marks{gap:0}
.brd__mark{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brd--marks .brd__mark{padding:12px 0}
.brd__mark--rule{border-top:1px solid #DED8CB}
.brd__mark img{height:32px;width:auto;display:block}
.brd__svg{width:44px;height:44px;flex:none}
.brd__mark small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6A605D;text-align:right;line-height:1.5}
.brd__sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.brd__sw div{border:1px solid #DED8CB;border-radius:8px;overflow:hidden;min-width:0}
.brd__sw i{display:block;height:38px}
.brd__sw span{display:block;padding:6px 8px;font-size:11px;color:#1A0A08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brd__sw span small{display:block;font-family:var(--mono);color:#6A605D;font-size:10px}
.brd__type{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid #DED8CB;padding-top:11px}
.brd__type b{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.brd__type small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6A605D;white-space:nowrap}

/* ============================================================
   AUTOMATE (2026-09-25): the founder's focus. Automation, reply agents,
   email sorting and internal apps lead the site; their family hue is the
   kiwi's own flesh. Screens: an inbox that sorts itself, a conversation an
   agent answers, a log of automations running. No names, illustrative data.
   ============================================================ */
:root{--hue-auto:#B4D46A}
[data-hue="auto"]{--c:var(--hue-auto)}
.kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.scr__app--mail{grid-template-columns:150px 1fr}
.scr__side span em{float:right;font-style:normal;opacity:.7;margin-left:8px}
/* the inbox, sorted */
.mails{display:flex;flex-direction:column;background:#fff;border:1px solid #E2E8F0;border-radius:8px;overflow:hidden}
.mail{display:grid;grid-template-columns:92px minmax(0,1fr) auto 96px;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid #EEF2F7;font-size:12.5px;color:#334155;min-width:0}
.mail:first-child{border-top:0}
.mail>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail .from{font-weight:600;color:#1A1D2E}
.mail .subj{color:#475569}
.mail .act{font-family:var(--mono);font-size:10.5px;color:#64748B;text-align:right}
.mail .act b{color:#047857;font-weight:500}
.lab{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:600}
.lab--enq{background:#EFF6FF;color:#1D4ED8}.lab--inv{background:#ECFDF5;color:#047857}.lab--sup{background:#FFFBEB;color:#B45309}
.lab--cmp{background:#FEF2F2;color:#B91C1C}.lab--nws{background:#F1F5F9;color:#475569}
/* the conversation (a messaging app, answered by the agent) */
.chat{display:grid;grid-template-columns:minmax(0,1fr) 196px;min-height:300px;background:#EFEAE2;color:#111B21}
.chat__thread{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.chat__tabs{display:flex;gap:6px;margin-bottom:4px}
.chat__tabs span{padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:600;background:rgba(255,255,255,.75);color:#54656F}
.chat__tabs span.on{background:#111B21;color:#fff}
.msg{max-width:84%;padding:8px 11px;border-radius:10px;font-size:12.5px;line-height:1.42;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.msg--in{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.msg--out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:3px}
.msg small{display:block;margin-top:3px;font-family:var(--mono);font-size:9.5px;color:#54656F;text-align:right}
.msg--note{align-self:center;background:#FFF3C4;color:#6B4E00;font-size:11px;padding:5px 10px;border-radius:8px;box-shadow:none}
.chat__side{background:#FBFAF7;border-left:1px solid #E4DED0;padding:14px;display:flex;flex-direction:column;gap:12px;font-size:11.5px;color:#4C463B;min-width:0;line-height:1.45}
.chat__side b{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6A605D;margin-bottom:3px}
.chat__side p{margin:0}
.chat__side .ok{color:#047857;font-weight:600}
/* the automation log */
.runs{display:flex;flex-direction:column;background:#fff;border:1px solid #E2E8F0;border-radius:8px;overflow:hidden}
.run{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-top:1px solid #EEF2F7;font-size:12.5px;color:#334155;min-width:0}
.run:first-child{border-top:0}
.run time{font-family:var(--mono);font-size:11px;color:#64748B}
.run div{min-width:0}
.run b{display:block;font-weight:600;color:#1A1D2E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run small{display:block;font-size:11px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}