/* ==========================================================================
   Components: the shared building blocks every page uses.
   Depends on tokens.css + base.css. Paths in url() are relative to this file.
   Usage for each block is in DESIGN.md; design-system.html shows them live.
   ========================================================================== */

/* ---- Icons ----------------------------------------------------------------
   <svg class="icon icon-sm" aria-hidden="true"><use href="#i-arrow-right"/></svg>
   Symbols come from scripts/icons.js. Line icons inherit colour and stroke
   from here, so one class sets size and optical weight together. */
.icon{
  width:var(--icon-lg);height:var(--icon-lg);
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-md{width:var(--icon-md);height:var(--icon-md);stroke-width:1.75;}
.icon-sm{width:var(--icon-sm);height:var(--icon-sm);stroke-width:2;}

/* ---- Buttons --------------------------------------------------------------
   .btn + a size (.btn-lg, or default 40px) + a style (.btn-primary,
   .btn-secondary, .btn-soft). Add .btn-block for full width and
   .btn-icon for a square icon-only button (needs aria-label). */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  height:40px;
  padding:0 var(--space-5);
  border:1px solid transparent;
  border-radius:var(--radius-md);
  font-size:var(--text-control-size);
  font-weight:var(--weight-regular);
  line-height:var(--text-control-lh);
  letter-spacing:var(--tracking-tight);
  white-space:nowrap;
  transform:translateY(0) scale(1);
  transition:transform var(--duration-press) var(--ease-standard), box-shadow var(--duration-press) var(--ease-standard), background-color var(--duration-press) var(--ease-standard);
}
.btn:hover{transform:translateY(-2px) scale(1.0025);}
.btn:active{transform:translateY(0) scale(0.98);}
.btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;}
.btn .icon{width:var(--icon-sm);height:var(--icon-sm);stroke-width:2;}

.btn-lg{height:48px;padding:0 var(--space-6);gap:6px;line-height:var(--text-body-lh);}
.btn-lg .icon{width:var(--icon-lg);height:var(--icon-lg);stroke-width:1.5;}
.btn-block{display:flex;width:100%;}
.btn-icon{width:40px;padding:0;}

/* primary: olive fill with a glossy top edge (Figma button) */
.btn-primary{
  background:var(--color-bg-brand);
  color:var(--color-text-inverse);
  box-shadow:var(--shadow-raised), var(--shadow-sheen);
}
/* secondary: light grey fill on a hairline highlight */
.btn-secondary{
  background-color:var(--paper-100);
  color:var(--color-text-strong);
  border-color:var(--near-white);
  box-shadow:var(--shadow-control);
}
.btn-secondary:hover{background-color:var(--paper-300);}
/* soft: a hairline outer ring, 1px of air, then a gradient face.
   <a class="btn btn-lg btn-soft btn-block"><span class="btn-face">..</span></a> */
.btn-soft{
  padding:1px;
  border-color:var(--color-border);
  color:var(--color-text-primary);
}
.btn-soft .btn-face{
  flex:1;align-self:stretch;
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:1px solid var(--near-white);
  border-radius:calc(var(--radius-md) - 1px);
  background:var(--gradient-control);
  filter:drop-shadow(var(--shadow-soft-drop));
  transition:background var(--duration-press) var(--ease-standard);
}
.btn-soft:hover .btn-face{background:var(--gradient-control-hover);}

/* ---- Chips, pills and badges ------------------------------------------- */
/* chip: a small caps label on the control gradient */
.chip{
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-md);
  background:var(--gradient-control);
  font-size:var(--text-tag-size);line-height:var(--text-tag-lh);letter-spacing:var(--tracking-caps);
}
/* pill: a rounded caps highlight, olive on olive tint */
.pill{
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-full);
  background:var(--color-bg-brand-tint);
  color:var(--color-text-brand);
  font-size:var(--text-tag-size);line-height:var(--text-tag-lh);letter-spacing:var(--tracking-caps);
}
/* badge: outlined announcement with a solid leading tag */
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:var(--text-small-size);
  line-height:var(--text-small-lh);
  color:var(--color-text-primary);
}
.badge-tag{
  padding:2px var(--space-1);
  border-radius:var(--radius-xs);
  background:var(--color-bg-brand);
  color:var(--color-text-inverse);
  font-size:var(--text-small-size);
  line-height:var(--text-small-lh);
  letter-spacing:var(--tracking-caps);
}

/* ---- Avatar ------------------------------------------------------------- */
.avatar{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:var(--color-bg-muted);
}
/* stand-in until a real headshot is added */
.avatar.initials{
  display:flex;align-items:center;justify-content:center;
  background:var(--sage-100);
  color:var(--color-text-brand);
  font-size:var(--text-body-size);font-weight:var(--weight-medium);
}

/* ---- Point list: sage dots with dashed dividers ----------------------------
   <ul class="point-list"><li><span class="point-dot"></span>..</li></ul> */
.point-list{display:flex;flex-direction:column;}
.point-list li{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) 0;
  font-size:var(--text-lead-size);
  line-height:var(--text-lead-lh);
  letter-spacing:var(--tracking-tight);
  color:var(--color-text-strong);
  background-image:var(--texture-dash-rule);
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:16px 1px;
}
.point-list li:last-child{background:none;}
.point-dot{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, #b3c9ae 0%, #7f9b7d 55%, #5d7a5f 100%);
}

/* ---- Sample tag: marks illustrative or placeholder content ----------------
   <span class="sample-tag">Sample</span> */
.sample-tag{
  display:inline-block;
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  background:var(--sage-100);color:var(--color-text-brand);
  font-size:var(--text-tag-size);line-height:var(--text-tag-lh);font-weight:var(--weight-medium);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  white-space:nowrap;
}

/* ---- Copy field -----------------------------------------------------------
   A value to paste somewhere else (a URL, a key) with a copy button.
   <div class="copy-field"><code id="x">..</code>
     <button class="btn btn-secondary" data-copy="#x">..<span>Copy</span></button></div>
   site.js copies the target's text and flips the label to "Copied". */
.copy-field{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  max-width:440px;
  padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  background:var(--color-bg-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}
.copy-field code{
  font-family:var(--font-mono);
  font-size:var(--text-body-size);line-height:var(--text-body-lh);
  color:var(--color-text-primary);
  overflow-x:auto;white-space:nowrap;
}
.copy-field .btn{flex-shrink:0;}
/* sits inside the field, so no lift: hover only shades the fill */
.copy-field .btn:hover,
.copy-field .btn:active{transform:none;}
.copy-field .btn.is-copied{color:var(--color-text-brand);}

/* ---- Prompt card: an example of something to ask, with an accent bar ------
   <ul class="prompt-list"><li class="prompt-card">"…"</li></ul> */
.prompt-list{display:flex;flex-direction:column;gap:var(--space-3);}
.prompt-card{
  position:relative;
  padding:var(--space-4) var(--space-5) var(--space-4) var(--space-6);
  background:var(--color-bg-raised);
  border:1px solid var(--color-border-subtle);
  font-size:var(--text-body-size);line-height:var(--text-body-lh);letter-spacing:var(--tracking-tight);
  color:var(--color-text-strong);
}
.prompt-card::before{
  content:"";position:absolute;left:var(--space-2);top:var(--space-4);bottom:var(--space-4);
  width:3px;border-radius:var(--radius-full);
  background:linear-gradient(180deg, var(--green-300), var(--green-500));
}

/* ---- Ruled frame ----------------------------------------------------------
   A box whose outer rules run --frame-overhang past each edge, with a cross
   on every corner. Add the four .ruled-corner spans (tl/tr/bl/br) inside.
   Cells inside are square-cornered and divided by --color-border-rule. */
.ruled-frame{position:relative;}
.ruled-frame::before,
.ruled-frame::after{content:"";position:absolute;pointer-events:none;z-index:var(--z-rule);}
.ruled-frame::before{
  inset:0 calc(-1 * var(--frame-overhang));
  border-top:1px solid var(--color-border-rule);
  border-bottom:1px solid var(--color-border-rule);
}
.ruled-frame::after{
  inset:calc(-1 * var(--frame-overhang)) 0;
  border-left:1px solid var(--color-border-rule);
  border-right:1px solid var(--color-border-rule);
}
/* 25px crosses whose 1px arms sit on exactly the same pixel row and
   column as the frame's rules: the rules are drawn inside the frame's
   edges (x/y 0 at the top-left, the last pixel at the bottom-right),
   so each cross is offset to land its arms on those pixels */
.ruled-corner{
  position:absolute;
  width:25px;height:25px;
  z-index:var(--z-rule-mark);
  background:
    linear-gradient(var(--color-mark), var(--color-mark)) 12px 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-mark), var(--color-mark)) 0 12px / 100% 1px no-repeat;
}
.ruled-corner.tl{left:-12px;top:-12px;}
.ruled-corner.tr{left:calc(100% - 13px);top:-12px;}
.ruled-corner.bl{left:-12px;top:calc(100% - 13px);}
.ruled-corner.br{left:calc(100% - 13px);top:calc(100% - 13px);}

/* ---- Segmented tabs with a gliding highlight -------------------------------
   <div class="tabs" role="tablist" style="--tab-count:5">
     <span class="tab-glider"></span><button class="tab-btn">..</button>...
   JS sets --tab-pos to the active index; the highlight glides there. */
.tabs{
  --tab-count:5;
  --tab-gap:var(--space-3);
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--tab-count), 1fr);
  gap:var(--tab-gap);
  padding:var(--space-2);
  background:var(--color-bg-sunken);
}
.tab-glider{
  position:absolute;
  left:var(--space-2);top:var(--space-2);
  width:calc((100% - 2 * var(--space-2) - (var(--tab-count) - 1) * var(--tab-gap)) / var(--tab-count));
  height:48px;
  background:var(--color-bg-raised);
  border:1px solid var(--color-border-subtle);
  transform:translateX(calc(var(--tab-pos, 0) * (100% + var(--tab-gap))));
  transition:transform var(--duration-move) var(--ease-out);
  pointer-events:none;
}
.tab-btn{
  position:relative;z-index:1;
  height:48px;
  background:transparent;
  border:1px solid transparent;
  font-size:var(--text-lead-size);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-snug);
  color:var(--color-text-muted);
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.tab-btn:hover{color:var(--color-text-strong);}
.tab-btn.active{color:var(--color-text-primary);font-weight:var(--weight-medium);}
.tab-btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px;}

/* ---- Concept bar -----------------------------------------------------------
   A slim olive strip above the header that scrolls away with the page.
   <div class="concept-bar dot-list"><span>..</span><span class="dot"></span>..<a>..</a></div> */
.concept-bar{
  justify-content:center;
  min-height:40px;
  padding:var(--space-2) var(--gutter);
  background:var(--color-bg-brand);
  color:var(--color-text-inverse);
  font-size:var(--text-small-size);line-height:var(--text-small-lh);letter-spacing:var(--tracking-tight);
}
.concept-bar strong{font-weight:var(--weight-medium);}
.concept-bar a{display:inline-flex;align-items:center;gap:var(--space-1);text-decoration:underline;text-underline-offset:3px;}
.concept-bar a:hover{text-decoration:none;}
.concept-bar a:focus-visible{outline:2px solid var(--color-text-inverse);outline-offset:2px;}

/* ---- Header -------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
}
/* progressive blur: five stacked backdrop blurs fading out downwards */
.header-blur{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.header-blur span{
  position:absolute;
  inset:0;
  display:block;
  background:rgba(250,250,248,0.55);
}
.header-blur span:nth-child(1){
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  mask-image:linear-gradient(to bottom, #000 0%, #000 20%, transparent 40%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 20%, transparent 40%);
}
.header-blur span:nth-child(2){
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%);
}
.header-blur span:nth-child(3){
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  mask-image:linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%);
}
.header-blur span:nth-child(4){
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  mask-image:linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%);
}
.header-blur span:nth-child(5){
  backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px);
  mask-image:linear-gradient(to bottom, transparent 60%, #000 80%, #000 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 60%, #000 80%, #000 100%);
}
.site-header .wrap{
  height:var(--header-height);
  padding:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.logo{
  display:flex;
  align-items:center;
  justify-self:start;
}
.logo img{
  height:47px;
  width:auto;
  display:block;
}
/* the logo's 47px box carries ~10px of drop-shadow bleed below the mark,
   so centring the box leaves the mark sitting 4.37px high — nudge it back */
.site-header .logo img{transform:translateY(4.37px);}

.main-nav{display:flex;align-items:center;justify-self:center;gap:var(--space-8);}
.main-nav a{
  font-family:var(--font-sans);
  font-size:var(--text-body-size);
  font-weight:var(--weight-regular);
  line-height:var(--text-body-lh);
  letter-spacing:var(--tracking-tight);
  color:var(--color-text-strong);
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  transition:color var(--duration-fast) var(--ease-standard);
}
.main-nav a:hover{color:var(--color-text-brand);}
/* sparkle sits superscript against the label and inherits its colour */
.nav-star{
  width:12px;
  height:12px;
  flex-shrink:0;
  transform:translateY(-5px);
}
.header-actions{display:flex;align-items:center;justify-self:end;gap:var(--space-4);}

/* ---- FAQ accordion -------------------------------------------------------- */
.faq-item{
  padding:var(--space-6) 0;
  background-image:var(--texture-dash-rule);
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:16px 1px;
}
.faq-item:first-child{padding-top:0;}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);
  font-size:var(--text-ui-lg-size);line-height:var(--text-ui-lg-lh);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);color:var(--color-text-primary);
}
.faq-q-btn{
  background:none;border:none;padding:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;text-align:left;
  font:inherit;color:inherit;
}
.faq-icon{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-secondary);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s var(--ease-standard), opacity .2s var(--ease-standard), margin-top .28s var(--ease-standard);
  opacity:0;
  font-size:var(--text-body-size);
  line-height:var(--text-body-lh);
  letter-spacing:var(--tracking-tight);
  color:var(--color-text-secondary);
}
.faq-item.open .faq-a{max-height:240px;opacity:1;margin-top:14px;}
.faq-item.open .faq-icon .i-plus{display:none;}
.faq-item:not(.open) .faq-icon .i-minus{display:none;}

/* question field: typing then Enter / the arrow opens an email to support */
.ask-field{
  margin-top:var(--space-2);
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) 0 0;
}
.ask-field input{
  flex:1;min-width:0;
  padding:var(--space-2) 0;
  border:none;border-bottom:1px solid transparent;
  background:transparent;
  font:inherit;font-size:var(--text-body-size);line-height:var(--text-body-lh);letter-spacing:var(--tracking-tight);
  color:var(--color-text-primary);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.ask-field input::placeholder{color:var(--color-text-muted);opacity:1;}
.ask-field input:focus{outline:none;border-bottom-color:var(--color-focus);}
.ask-field input:focus-visible{outline:none;}   /* the olive underline marks focus */
.ask-field button{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-bg-raised);color:var(--color-text-strong);
  opacity:0.5;
  transition:opacity var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ask-field.has-text button{opacity:1;}
.ask-field.has-text button:hover{background:var(--color-bg-brand);border-color:var(--color-bg-brand);color:var(--color-text-inverse);}
.ask-field button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;}
.ask-note{margin-top:var(--space-2);font-size:var(--text-small-size);line-height:var(--text-small-lh);letter-spacing:var(--tracking-tight);color:var(--color-text-brand);}

/* ---- CTA card -------------------------------------------------------------
   The last block before the footer: a white ruled-frame card with the
   animated depth art behind a centred heading, copy and primary button. */
.cta-band-wrap{padding:calc(var(--section-gap) / 2) 0 calc(var(--footer-gap) - 80px);}
.cta-band{
  position:relative;
  width:min(var(--container), 100% - 2 * var(--gutter));
  margin:0 auto;
  padding:var(--space-14) var(--space-10);
  text-align:center;
  background:var(--color-bg-raised);
}
.cta-depth-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.cta-band-content{position:relative;z-index:1;}
.cta-band h2{
  font-family:var(--font-sans);
  font-size:var(--text-heading-size);
  line-height:var(--text-heading-lh);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tighter);
  color:var(--color-text-primary);
}
.cta-band p{
  max-width:560px;margin:18px auto 0;
  font-size:var(--text-lead-size);line-height:var(--text-lead-lh);letter-spacing:var(--tracking-tight);color:var(--color-text-secondary);
}
.cta-band .btn{margin-top:var(--space-8);}

/* ---- Footer curtain --------------------------------------------------------
   Wrap everything between the header and the footer in .page-stack and put
   .page-blur right after it. The whole page is one tall sticky block that
   pins once the CTA card sits --footer-pin above the fold; then only the
   footer keeps scrolling, sliding over it while .page-blur blurs it back.
   z-index:0 makes the stack a stacking context so nothing inside can
   escape above the footer. site.js measures --stack-pin. */
.page-stack{
  position:sticky;
  top:var(--stack-pin, 0px);
  z-index:0;
}
.page-blur{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* ---- Footer ---------------------------------------------------------------
   Layout and type follow the Figma "footer" frame (Kello revamp, 140:17203).
   Opaque so it reads as a layer sliding over the page; it carries its own
   copy of the texture (background-attachment:fixed keeps it registered
   with the page-wide pattern underneath). */
.site-footer{
  position:relative;
  z-index:var(--z-footer);
  padding:var(--space-20) 0 0;   /* the giant wordmark meets the bottom edge */
  background-color:var(--color-bg-page);
  background-image:url('../assets/bg-pattern-tile.svg');
  background-repeat:repeat;
  background-size:10.028px 7px;
  background-attachment:fixed;
  color:var(--color-text-secondary);
  font-size:var(--text-ui-lg-size);
  line-height:var(--text-ui-lg-lh);
  letter-spacing:var(--tracking-tight);
}
.site-footer .wrap{padding:0;}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:1px solid var(--color-border-soft);
}
.footer-pitch{width:640px;padding-bottom:var(--space-6);}
.footer-pitch h2{
  font-size:var(--text-heading-sm-size);font-weight:var(--weight-medium);line-height:var(--text-heading-sm-lh);letter-spacing:var(--tracking-tight);
  color:var(--color-text-primary);
  white-space:nowrap;
}
.footer-pitch .sub{
  margin-top:var(--space-4);
  font-size:var(--text-card-size);line-height:var(--text-card-lh);letter-spacing:var(--tracking-tight);
}
.footer-cta{margin-top:var(--space-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);}
/* Figma: a fixed 160 x 48 button with 18px text */
.footer-cta .btn{width:160px;padding:0 var(--space-4);font-size:var(--text-ui-lg-size);line-height:var(--text-ui-lg-lh);}
/* inline runs separated by a centred dot in a fixed-width slot */
.dot-list{display:flex;flex-wrap:wrap;align-items:center;}
.dot-list .dot{
  width:24px;height:24px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.dot-list .dot::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;}
.footer-cta .dot-list{font-size:var(--text-body-size);letter-spacing:var(--tracking-tight);}
.talk-human{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);
  width:640px;height:64px;
  padding:0 19px 0 20px;
  background:var(--color-bg-raised);
  border:1px solid var(--color-border-soft);
  /* sits on the rule below it rather than doubling it */
  margin-bottom:-1px;
  font-size:var(--text-body-size);letter-spacing:var(--tracking-caps);
  color:var(--color-text-secondary);
  transition:border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.talk-human:hover{border-color:var(--color-text-brand);color:var(--color-text-brand);}
.talk-human .icon{color:var(--color-text-primary);}

/* four equal columns with a 1px divider 40px either side of each gap */
.footer-links{
  display:grid;
  grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;
  column-gap:var(--space-10);
  padding:var(--space-10) 0;
  border-bottom:1px solid var(--color-border-soft);
}
.footer-divider{background:var(--color-border-soft);}
.footer-col h5{
  font-size:var(--text-body-size);line-height:var(--text-body-lh);font-weight:var(--weight-regular);text-transform:uppercase;
  margin:0 0 var(--space-3);
  letter-spacing:var(--tracking-caps);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-3);}
.footer-col a{transition:color var(--duration-fast) var(--ease-standard);}
.footer-col a:hover{color:var(--color-text-brand);}

.footer-bottom{
  padding-top:var(--space-10);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-3);}
.footer-logo{display:flex;align-items:center;gap:var(--space-4);}
/* logo tile: the white mark on a 40px olive square */
.logo-tile{
  position:relative;
  width:40px;height:40px;flex-shrink:0;
  border-radius:6px;
  background:var(--color-bg-brand);
  box-shadow:var(--shadow-raised), var(--shadow-sheen);
  color:var(--color-text-inverse);   /* the mark is drawn in currentColor */
}
.logo-tile svg{position:absolute;left:4px;top:4px;width:32px;height:32px;}
.footer-wordmark{font-size:var(--text-subhead-size);font-weight:var(--weight-medium);line-height:var(--text-subhead-lh);letter-spacing:var(--tracking-snug);color:var(--ink-850);}
.footer-copy{gap:var(--space-1);font-size:var(--text-body-size);letter-spacing:var(--tracking-tight);}
.footer-copy .dot{width:27px;}
.footer-social{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3);}
.footer-social .label{font-size:var(--text-body-size);letter-spacing:var(--tracking-caps);}
.social-icons{display:flex;gap:var(--space-6);}
.social-icons a{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-secondary);
  transition:color var(--duration-fast) var(--ease-standard);
}
.social-icons a:hover{color:var(--color-text-brand);}

/* oversized "kello.ai" at the foot of the page: its ink spans the content
   width exactly and the bottom 10% of the letters is cropped off (the
   full stop is 20% of the letter height, so its top half still shows).
   Inclusive Sans 500 at -0.04em: "kello.ai" ink (to the i's dot) is 2.904em wide starting 0.087em in;
   with line-height 1 the letters run from 0.131em to 0.85em (0.719em tall),
   so 90% of them is 0.647em. */
.footer-giant{container-type:inline-size;margin-top:var(--space-16);}
.footer-giant-crop{
  font-size:calc(100cqw / 2.904);
  height:0.647em;
  display:flow-root;                  /* keeps the span's negative top margin inside */
  overflow-x:visible;overflow-y:clip;  /* crop the bottom only, so the i's dot can overhang */
}
.footer-giant span{
  display:block;
  margin:-0.131em 0 0 -0.087em;
  width:max-content;padding-right:0.1em;   /* the gradient paints only inside this box, so it must cover every glyph */
  font-weight:var(--weight-medium);
  line-height:1;
  letter-spacing:var(--tracking-tighter);
  white-space:nowrap;
  /* sage, dark at the top of the letters to pale at the crop */
  background:linear-gradient(180deg, var(--sage-500) 13%, var(--sage-200) 52%, var(--sage-100) 78%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  user-select:none;
}

@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{transform:none;transition:none;}
  .faq-a{transition:none;}
  .tab-glider{transition:none;}
}