/* Homepage enhancements, 2026-10-01: the AI receptionist call capsule under the hero, a before and after slider, a cost calculator.
   Colours come only from existing tokens (feerasta.css and the .gradient-home tokens in home-gradient.css), so light and dark both follow. */

/* Shared */
.gradient-home .home-story .he-compare,
.gradient-home .home-story .he-calc{color:var(--gradient-ink)}
.gradient-home .home-story :is(.he-compare,.he-calc) p{font-size:1.125rem;line-height:1.55}
.gradient-home .home-story :is(.he-compare,.he-calc) h2{margin:0 0 20px}
.gradient-home .home-story :is(.he-compare,.he-calc) .gradient-product-label{margin-bottom:16px}
.gradient-home .home-story :is(.he-compare,.he-calc) :is(a,button,input):focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.he-head{max-width:760px;margin-bottom:40px}
.gradient-home .home-story .he-head p{color:var(--gradient-muted);margin:0}
.gradient-home .home-story .he-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-block:10px;font-size:1.125rem;font-weight:500;color:var(--gradient-accent);text-decoration:underline;text-underline-offset:5px}
.gradient-home .home-story .he-link:hover{text-decoration-thickness:2px}

/* Feature 2: before and after slider */
.gradient-home .home-story .he-compare{padding-block:96px 48px}
.he-pair{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.he-pair[hidden]{display:none}
.gradient-home .home-story .he-pair-btn{font:inherit;font-size:1.125rem;font-weight:500;min-height:52px;padding:12px 22px;border:1px solid var(--gradient-line);border-radius:999px;background:var(--navy-soft);color:var(--gradient-ink);cursor:pointer}
.gradient-home .home-story .he-pair-btn[aria-pressed="true"]{background:var(--gradient-action);border-color:var(--gradient-action);color:var(--gradient-action-ink)}
.he-compare-figure{margin:0;min-width:0}
.he-compare-stage{position:relative;direction:ltr;width:100%;max-width:100%;aspect-ratio:2200/1411;overflow:hidden;border:1px solid var(--gradient-line);border-radius:16px;background:var(--navy-soft);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.he-compare-stage img{display:block;width:100%;max-width:100%;height:100%;object-fit:cover}
.he-after{position:relative}
.he-before-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos, 50%)) 0 0)}
.he-tag{position:absolute;top:14px;z-index:2;padding:4px 12px;border:1px solid var(--gradient-line);border-radius:999px;background:var(--navy-soft);color:var(--gradient-ink);font-size:1.125rem;line-height:1.5;pointer-events:none}
.he-tag-before{left:14px}
.he-tag-after{right:14px}
.he-handle{position:absolute;top:0;bottom:0;left:var(--pos, 50%);z-index:2;width:3px;transform:translateX(-50%);background:var(--gradient-action);pointer-events:none}
.he-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--gradient-action);background:var(--navy-soft);box-sizing:border-box}
.he-handle::before{content:"";position:absolute;top:50%;left:50%;z-index:1;width:14px;height:14px;transform:translate(-50%,-50%);border-inline:3px solid var(--gradient-action)}
.he-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding:0;background:transparent;border:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.he-range::-webkit-slider-runnable-track{height:100%;background:transparent;border:0}
.he-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4px;height:100%;background:transparent;border:0}
.he-range::-moz-range-track{height:100%;background:transparent;border:0}
.he-range::-moz-range-thumb{width:4px;height:100%;background:transparent;border:0;border-radius:0}
.gradient-home .home-story .he-compare .he-range:focus-visible{outline:none}
.he-compare-stage:has(.he-range:focus-visible) .he-handle::after{outline:3px solid var(--gold);outline-offset:3px}
@supports not selector(:has(*)){
  .gradient-home .home-story .he-compare .he-range:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
}
.he-compare-figure figcaption{margin-top:16px;font-size:1.125rem;line-height:1.55;color:var(--gradient-muted)}

/* Feature 3: cost calculator */
.gradient-home .home-story .he-calc{padding-block:48px 96px;border-bottom:1px solid var(--gradient-line)}
.he-calc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.he-calc-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;min-width:0}
.he-field{display:flex;flex-direction:column;min-width:0}
.he-field label{font-size:1.125rem;font-weight:600;line-height:1.4;margin-bottom:8px}
.he-input{display:flex;align-items:center;min-height:52px;border:1px solid var(--gradient-line);border-radius:8px;background:var(--navy-soft);color:var(--gradient-ink)}
.he-input:focus-within{border-color:var(--gradient-accent)}
.he-cur,.he-suf{flex:0 0 auto;font-size:18px;color:var(--gradient-muted);padding-inline:14px 0}
.he-suf{padding-inline:0 14px}
.he-input input{flex:1 1 auto;min-width:0;width:100%;min-height:52px;padding:10px 14px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:18px;font-variant-numeric:tabular-nums}
.he-has-pre input{padding-left:6px}
.he-has-suf input{padding-right:6px}
.gradient-home .home-story .he-calc .he-hint{margin:8px 0 0;font-size:1.125rem;line-height:1.5;color:var(--gradient-muted)}
.he-result{padding:32px;border:1px solid var(--gradient-line);border-radius:16px;background:var(--navy-soft);min-width:0}
.he-output{display:flex;flex-direction:column;gap:10px}
.he-output [hidden]{display:none}
.he-line,.he-nojs{font-size:1.125rem;line-height:1.55}
.he-line b{font-weight:600;font-variant-numeric:tabular-nums}
.he-total{margin-top:12px;padding-top:18px;border-top:1px solid var(--gradient-line);font-size:clamp(30px,3.4vw,44px);line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--gradient-accent)}
.he-total b{font-weight:600;font-variant-numeric:tabular-nums}
.gradient-home .home-story .he-calc .he-disclaim{margin:20px 0 0;color:var(--gradient-muted)}
.he-calc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
.gradient-home .home-story .he-primary{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 24px;border-radius:7px;background:var(--gradient-action);color:var(--gradient-action-ink);font-size:1.125rem;font-weight:500;text-decoration:none}
.gradient-home .home-story .he-primary:hover{filter:brightness(1.08)}
@media(min-width:961px){
  .he-calc-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .he-result{position:sticky;top:96px}
}

@media(max-width:800px){
  .gradient-home .home-story .he-compare{padding-block:64px 32px}
  .gradient-home .home-story .he-calc{padding-block:32px 64px}
  .he-result{padding:24px}
}
@media(max-width:600px){
  .he-calc-form{grid-template-columns:minmax(0,1fr)}
  .he-tag{top:10px;padding:2px 10px}
  .he-tag-before{left:10px}
  .he-tag-after{right:10px}
}

@media(prefers-reduced-motion:reduce){
  .he-compare,.he-compare *,.he-calc,.he-calc *{transition:none!important;animation:none!important}
}

/* Review fixes: one focus ring per calculator field (on the wrapper, not the inner input) */
.gradient-home .home-story .he-calc .he-input input:focus-visible{outline:none}
.gradient-home .home-story .he-calc .he-input:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
/* Section headings clear the fixed site header when reached by anchor or focus */
.he-compare,.he-calc{scroll-margin-top:120px}
.he-compare .he-range,.he-calc input{scroll-margin-top:140px;scroll-margin-bottom:96px}

/* Call capsule (variant G2, approved 2026-10-01): one glass capsule at the foot of the hero with a single
   action. In reading order: live dot, "Try our AI receptionist", a quieter "Answers your calls at any hour.",
   a delicate waveform that fills the middle, and one pill button that dials the demo line.
   Rhythm: every gap between groups is --c4-gap; the button sits --c4-inset from the capsule edge on
   top, end and bottom, so the two pills are concentric. Logical properties throughout, so the capsule
   mirrors on right-to-left pages. Colours come only from the .gradient-home tokens (home-gradient.css)
   and --engage-shadow (home-engagement.css). Motion stops under prefers-reduced-motion and when the
   site's motion control is paused (html[data-effects=paused]). On phones the capsule becomes two rows
   and docks to the foot of the screen (home-enhance.js). */

.c4-slot{position:relative;padding-bottom:52px}
.gradient-home .gradient-opening:has(.c4-slot) .gradient-hero-content{padding-bottom:52px}

.gradient-home .c4{
  --c4-inset:15px;--c4-gap:32px;--c4-btn:60px;
  position:relative;isolation:isolate;display:flex;align-items:center;gap:var(--c4-gap);
  box-sizing:border-box;min-height:calc(var(--c4-btn) + var(--c4-inset) * 2 + 2px);
  padding-block:var(--c4-inset);padding-inline:34px var(--c4-inset);
  border:1px solid var(--gradient-line);border-radius:999px;
  background:color-mix(in srgb,var(--gradient-canvas) 86%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gradient-white) 22%,transparent),var(--engage-shadow);
  color:var(--gradient-ink);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.gradient-home .c4:is(:hover,:focus-within){transform:translateY(-1px);border-color:var(--gradient-accent)}

/* Live dot with a slow ring; it sits on the lead line's optical centre */
.c4-live{position:relative;flex:none;box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:var(--gradient-accent);margin-inline-end:calc(14px - var(--c4-gap))}
.c4-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--gradient-accent);opacity:0}

/* Lead and secondary share one baseline, split by a hairline */
/* The copy keeps one line where it fits; a longer translation may shrink it and wrap rather than push the button out */
.gradient-home .home-story .c4-copy{display:flex;align-items:baseline;flex:0 1 auto;min-width:0;margin:0}
.gradient-home .home-story .c4-lead{min-width:0}
.gradient-home .home-story .c4-lead{font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--gradient-ink)}
.gradient-home .home-story .c4-sub{position:relative;font-size:16px;line-height:1.3;font-weight:400;color:var(--gradient-muted);margin-inline-start:17px;padding-inline-start:17px}
.c4-sub::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:1px;height:18px;margin-top:-9px;background:var(--gradient-line)}

/* Waveform: hairline bars filling the flexible middle; ends fade so it never meets the text hard */
.c4-wave{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:3px;height:22px;min-width:48px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.c4-wave i{flex:none;display:block;width:2px;height:22px;border-radius:2px;background:var(--gradient-accent);opacity:.38;transform:scaleY(var(--h,.4));transform-origin:center;transition:opacity .3s}
.gradient-home .c4:is(:hover,:focus-within) .c4-wave i{opacity:.7}

/* The one action. Its ::after stretches over the capsule, so the whole capsule dials */
.gradient-home .home-story .c4-call{position:static;flex:none;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:var(--c4-btn);padding:0 30px;border-radius:999px;
  background:var(--gradient-action);color:var(--gradient-action-ink);text-decoration:none;
  font-size:17px;line-height:1;font-weight:500;letter-spacing:-.005em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gradient-white) 16%,transparent);
  transition:background-color .25s}
.c4-call::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit}
/* Hover deepens the button toward the ink: darker on paper, lighter on night */
.gradient-home .c4:is(:hover,:focus-within) .c4-call{background:color-mix(in srgb,var(--gradient-action) 88%,var(--gradient-ink))}
.c4-now,.c4-sr{display:none}

/* Focus: the ring wraps the whole capsule */
.gradient-home .home-story .c4-call:focus-visible{outline:3px solid var(--gradient-focus);outline-offset:3px}
@supports selector(:has(*)){
  .gradient-home .home-story .c4-call:focus-visible{outline:none}
  .gradient-home .c4:has(.c4-call:focus-visible){outline:3px solid var(--gradient-focus);outline-offset:5px}
}

@media (prefers-reduced-motion:no-preference){
  html:not([data-effects=paused]) .c4-live::after{animation:c4-live 3.2s cubic-bezier(.2,.6,.3,1) infinite}
  html:not([data-effects=paused]) .gradient-home .c4:is(:hover,:focus-within) .c4-wave i{animation:c4-ripple 1.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -85ms)}
  /* Once, when the capsule first comes into view: two short ripples that start and end at rest, then still. */
  html:not([data-effects=paused]) .gradient-home .c4.is-intro:not(:hover):not(:focus-within) .c4-wave i{animation:c4-ripple .9s ease-in-out 2;animation-delay:calc(var(--i,0) * 4ms)}
}
@keyframes c4-live{0%{transform:scale(.6);opacity:.55}80%,100%{transform:scale(2.2);opacity:0}}
@keyframes c4-ripple{0%,100%{transform:scaleY(var(--h,.4))}50%{transform:scaleY(calc(var(--h,.4) * .45 + .1))}}

/* Tablet and small laptops: the secondary phrase moves under the lead so the waveform keeps its room (from 1239px, so the longer translations stay on one line each) */
@media(max-width:1239px){
  .gradient-home .c4{--c4-gap:26px;padding-inline-start:30px}
  .c4-live{align-self:flex-start;margin-top:calc(var(--c4-btn) / 2 - 24px)}
  .gradient-home .home-story .c4-copy{flex-direction:column;align-items:flex-start;gap:2px}
  .gradient-home .home-story .c4-sub{margin-inline-start:0;padding-inline-start:0}
  .c4-sub::before{display:none}
}

/* Phones: two rows inside the capsule, the lead line on top and the button full width below */
@media(max-width:760px){
  .c4-slot{padding-bottom:32px}
  .gradient-home .gradient-opening:has(.c4-slot) .gradient-hero-content{padding-bottom:28px}
  .gradient-home .c4{--c4-inset:8px;--c4-btn:52px;
    display:grid;grid-template-columns:auto minmax(0,max-content) minmax(36px,1fr);grid-template-areas:"live copy wave" "call call call";
    column-gap:12px;row-gap:12px;min-height:0;padding:18px var(--c4-inset) var(--c4-inset);border-radius:34px}
  /* The dot lines up with the first line of the lead (18px type, 1.3 line height), which may wrap in longer languages */
  .c4-live{grid-area:live;align-self:start;justify-self:center;margin:calc((18px * 1.3 - 8px) / 2) 0 0;margin-inline-start:16px}
  .gradient-home .home-story .c4-copy{grid-area:copy;white-space:normal;align-self:center}
  .gradient-home .home-story .c4-lead{text-wrap:balance}
  .c4-wave{grid-area:wave;align-self:center;height:20px;margin-inline-end:14px}
  .c4-wave i{height:20px}
  .gradient-home .home-story .c4-call{grid-area:call;width:100%;font-size:17px}
  .c4-sub{display:none}

  .gradient-home .c4.is-docked{position:fixed;z-index:70;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--gradient-canvas) 92%,transparent);
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gradient-white) 22%,transparent),0 14px 44px color-mix(in srgb,var(--gradient-night) 26%,transparent)}
}
/* Small phones: the visible label shortens; the number stays in the accessible name */
@media(max-width:480px){
  .c4-lbl{display:none}
  .c4-now{display:inline}
  .c4-num{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .c4-sr{display:inline}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  html:not([data-effects=paused]) .gradient-home .c4.is-docked{animation:c4-dock .42s cubic-bezier(.16,1,.3,1)}
  /* Phones: the ring grows by its inset rather than by a scale transform. A transformed ring gets its
     own layer, which rounds to the device pixel grid differently from the dot when the phone layout
     puts the dot at a fractional position, so the halo sat off centre. Painted with the dot, it stays
     concentric. Same start and end size as the scaled ring. */
  html:not([data-effects=paused]) .c4-live::after{animation-name:c4-live-phone}
}
@keyframes c4-live-phone{0%{inset:-.8px;opacity:.55}80%,100%{inset:-14px;opacity:0}}
@keyframes c4-dock{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

@media (prefers-reduced-transparency:reduce){
  .gradient-home .c4,.gradient-home .c4.is-docked{background:var(--gradient-canvas);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .gradient-home .c4{transition:border-color .2s}
  .gradient-home .c4:is(:hover,:focus-within){transform:none}
}