/* ============================================================================
   Kinetic Repair Marketplace — stylesheet

   Two parts:
     1. DESIGN TOKENS — the Kinetic brand values, copied from the design
        system (_reference/tokens/*.css). Colours, type, spacing and shape all
        come from here. Use a --k-* token rather than a literal value.
     2. PAGE STYLES — the classes this page is built from. The design system
        used to ship these as React components that wrote inline styles; the
        rules below reproduce exactly what those components rendered, plus the
        real :hover and @media rules the runtime used to synthesise.

   Breakpoints, matching the original page: 479px, 767px, 1023px.
   ========================================================================= */


/* ===========================================================================
   1. DESIGN TOKENS
   ========================================================================= */

/* --- Denim, the only Kinetic brand typeface. Static weights. ------------- */
@font-face{font-family:"Denim";src:url("fonts/Denim-Light.woff") format("woff");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Medium.woff") format("woff");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-SemiBold.woff") format("woff");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Bold.woff") format("woff");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Denim";src:url("fonts/Denim-Heavy.woff") format("woff");font-style:normal;font-weight:800;font-display:swap}

:root{
  /* Primitive palette — the only legal colours */
  --k-color-violet:#6f41e1;
  --k-color-lavender:#c5aeff;
  --k-color-paper:#f1f1eb;
  --k-color-steel:#d6dcdf;
  --k-color-ink:#262626;
  --k-color-slate:#6c6f70;
  /* Slate darkened to clear 4.5:1 on Paper and Steel. The #6C6F70 primitive
     above is production-site heritage and is legal only for large text,
     rules, and graphics. */
  --k-color-slate-text:#575a5b;
  --k-color-white:#ffffff;
  --k-color-black:#000000;

  /* Semantic — light (default) */
  --k-bg-canvas:var(--k-color-paper);
  --k-bg-surface:var(--k-color-white);
  --k-bg-subtle:var(--k-color-steel);
  --k-bg-inverse:var(--k-color-ink);
  --k-text-primary:var(--k-color-ink);
  --k-text-accent:var(--k-color-violet);
  --k-text-inverse:var(--k-color-paper);
  --k-text-muted:var(--k-color-slate-text);
  --k-border-default:rgb(38 38 38 / 26%);
  --k-border-hairline:rgb(38 38 38 / 14%);
  --k-border-strong:var(--k-color-ink);
  --k-action-primary:var(--k-color-violet);
  --k-action-primary-text:var(--k-color-white);
  --k-action-primary-hover:var(--k-color-ink);
  --k-action-primary-hover-text:var(--k-color-paper);
  --k-focus-ring:var(--k-color-violet);

  /* Media overlay — flat Ink, never a gradient */
  --k-overlay-media:rgb(38 38 38 / 46%);
  --k-overlay-media-min:rgb(38 38 38 / 28%);
  --k-overlay-media-max:rgb(38 38 38 / 58%);

  /* Typography */
  --k-font-sans:"Denim",Arial,Helvetica,sans-serif;
  --k-weight-light:300;
  --k-weight-regular:400;
  --k-weight-medium:500;
  --k-weight-semibold:600;
  --k-weight-bold:700;
  --k-weight-heavy:800;

  /* Fluid roles — tuned to the live site's 102 / 53 / 27 px hierarchy at 1363px */
  --k-type-display-xl:clamp(4rem,7.5vw,7rem);
  --k-leading-display-xl:0.95;
  --k-type-display-lg:clamp(3.25rem,5.7vw,5.125rem);
  --k-leading-display-lg:0.94;
  --k-type-h1:clamp(2.625rem,4.5vw,4rem);
  --k-leading-h1:1.02;
  --k-type-h2:clamp(2.25rem,3.7vw,3.3125rem);
  --k-leading-h2:1.1;
  --k-type-h3:clamp(1.5rem,2vw,1.75rem);
  --k-leading-h3:1.2;
  --k-type-h4:clamp(1.25rem,1.55vw,1.375rem);
  --k-leading-h4:1.3;
  --k-type-body-lg:clamp(1.125rem,1.45vw,1.375rem);
  --k-leading-body-lg:1.45;
  --k-type-body:clamp(1rem,1.2vw,1.125rem);
  --k-leading-body:1.5;
  --k-type-body-sm:0.875rem;
  --k-leading-body-sm:1.5;
  --k-type-label:0.8125rem;
  --k-leading-label:1.3;
  --k-tracking-display:-0.01em;
  --k-tracking-label:0.07em;
  --k-measure-copy:68ch;

  /* Spacing */
  --k-space-0:0;
  --k-space-1:0.25rem;
  --k-space-2:0.5rem;
  --k-space-3:0.75rem;
  --k-space-4:1rem;
  --k-space-5:1.25rem;
  --k-space-6:1.5rem;
  --k-space-8:2rem;
  --k-space-10:2.5rem;
  --k-space-12:3rem;
  --k-space-15:3.75rem;
  --k-space-18:4.5rem;
  --k-space-22:5.5rem;
  --k-space-30:7.5rem;
  --k-space-40:10rem;
  --k-space-50:12.5rem;
  --k-space-60:15rem;

  /* Layout */
  --k-container-max:90rem;
  --k-page-gutter:clamp(1.25rem,2.6vw,2.5rem);
  --k-grid-gap:clamp(1rem,1.9vw,1.875rem);
  --k-section-compact:clamp(4rem,6.8vw,6rem);
  --k-section-default:clamp(6rem,9.5vw,10rem);
  --k-section-spacious:clamp(10rem,13vw,15rem);

  /* Breakpoints (reference values; media queries are authored literally) */
  --k-bp-sm:640px;
  --k-bp-md:768px;
  --k-bp-lg:1024px;
  --k-bp-xl:1280px;

  /* Shape */
  --k-radius-none:0;
  --k-radius-control:0.125rem;
  --k-radius-card:0.25rem;
  --k-border-thin:1px;
  --k-border-emphasis:2px;
  --k-shadow-none:none;
  --k-shadow-overlay:0 0.75rem 2.5rem rgb(38 38 38 / 12%);

  /* Component dimensions */
  --k-header-announcement-height:2.625rem;
  --k-header-height:4.5rem;
  --k-header-height-mobile:4rem;
  --k-control-height:3rem;
  --k-control-height-lg:3.5rem;
  --k-control-min-width:8.5rem;
  --k-input-height:3.25rem;
  --k-textarea-min-height:9rem;
  --k-touch-min:2.75rem;
  --k-icon-sm:1.25rem;
  --k-icon-md:1.5rem;
  --k-icon-brand:3rem;

  /* Motion */
  --k-duration-fast:150ms;
  --k-duration-base:250ms;
  --k-duration-reveal:650ms;
  --k-ease-standard:cubic-bezier(0.4,0,0.2,1);
  --k-ease-out:cubic-bezier(0.22,1,0.36,1);
  --k-arrow-travel:6px;
}

@media (prefers-reduced-motion:reduce){
  :root{
    --k-duration-fast:0ms;
    --k-duration-base:0ms;
    --k-duration-reveal:0ms;
    --k-arrow-travel:0px;
  }
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--k-color-paper);
  color:var(--k-text-primary);
  font-family:var(--k-font-sans);
  font-size:var(--k-type-body);
  line-height:var(--k-leading-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  /* The how-it-works clip is deliberately wider than its column (100vw with a
     negative margin), so the page must not grow a horizontal scrollbar. */
  overflow-x:hidden;
}

a{color:var(--k-color-violet);text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{color:var(--k-color-ink)}
button,input,select,textarea{font:inherit}
:focus-visible{outline:var(--k-border-emphasis) solid var(--k-focus-ring);outline-offset:2px}
img,svg,video{max-width:100%}

/* In-page navigation glides rather than jumps — unless the visitor has asked
   their system for less motion, in which case everything stops moving. */
html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0s !important;transition-duration:0s !important}
}


/* ===========================================================================
   2. PAGE STYLES
   ========================================================================= */

/* --- Skip link ----------------------------------------------------------- */
/* Parked off-screen until it takes keyboard focus, so the first Tab on the
   page jumps a screen-reader or keyboard user straight past the header. */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:60;
  padding:12px 20px;
  background:var(--k-color-ink);
  color:var(--k-color-paper);
  font-weight:500;
}
.skip-link:focus{left:20px;top:8px}


/* --- Buttons ------------------------------------------------------------- */
/* One class for every call to action on the page, whether it is an <a> or a
   <button>. --sm is the header's compact variant, --full stretches to the
   width of its container (the mobile sticky bar). */
.k-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--k-space-3);
  min-height:var(--k-control-height-lg);
  min-width:var(--k-control-min-width);
  padding:0 var(--k-space-6);
  border:1px solid transparent;
  border-radius:999px;
  background:var(--k-action-primary);
  color:var(--k-action-primary-text);
  font-family:var(--k-font-sans);
  font-size:16px;
  font-weight:var(--k-weight-medium);
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--k-duration-fast) var(--k-ease-standard),
             color var(--k-duration-fast) var(--k-ease-standard);
}
.k-button:hover{
  background:var(--k-action-primary-hover);
  color:var(--k-action-primary-hover-text);
}
.k-button:disabled{opacity:.6;cursor:progress}

.k-button--sm{
  min-height:2.5rem;
  min-width:0;
  padding:0 var(--k-space-5);
  font-size:15px;
}

.k-button--full{min-width:100%;width:100%}

.hero-form button[type="submit"]{
  min-height:var(--k-control-height);
  min-width:0;
  padding:0 var(--k-space-8);
  justify-self:center;
  text-align:center;
}


/* --- Arrow link ---------------------------------------------------------- */
/* An underlined link with an arrow that slides forward on hover. The travel
   distance is a token, and it is 0 under prefers-reduced-motion. */
.k-arrow-link{
  display:inline-flex;
  align-items:center;
  gap:var(--k-space-3);
  min-height:var(--k-touch-min);
  color:var(--k-text-accent);
  font-size:var(--k-type-body);
  font-weight:var(--k-weight-medium);
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:7px;
}
.k-arrow-link__arrow{
  transform:none;
  transition:transform var(--k-duration-base) var(--k-ease-standard);
}
.k-arrow-link:hover .k-arrow-link__arrow{transform:translateX(var(--k-arrow-travel))}


/* --- Uppercase eyebrow label --------------------------------------------- */
/* No line-height here on purpose: a label written straight into the page copy
   inherits the body's 1.5, and only the ones the design system's own Label
   component produced (inside a metric, and in the footer) tighten it to
   --k-leading-label. Setting it here made every eyebrow 3px shorter than the
   original. */
.k-label{
  margin:0;
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
}
.metric .k-label,
.site-footer__group .k-label{line-height:var(--k-leading-label)}


/* --- Sections ------------------------------------------------------------ */
/* Every band on the page is a .k-section: full-bleed background, gutters on
   the outside, and an inner wrapper that caps the content at the container
   width and centres it. Theme modifiers set the background and text colour. */
.k-section{
  padding:var(--k-section-default) var(--k-page-gutter);
  background:var(--k-color-paper);
  color:var(--k-color-ink);
}
.k-section--compact{padding-block:var(--k-section-compact)}
.k-section__inner{max-width:var(--k-container-max);margin:0 auto}

.k-section--white{background:var(--k-color-white);color:var(--k-color-ink)}
.k-section--paper{background:var(--k-color-paper);color:var(--k-color-ink)}
.k-section--ink{background:var(--k-color-ink);color:var(--k-color-paper)}

/* The how-it-works band is a shade lighter than Ink so the demo's own black
   letterboxing does not disappear into the page. */
.k-section--charcoal{background:#2b2b2b;color:var(--k-color-paper)}

/* On an Ink or charcoal band the hairline rules have to be light-on-dark. */
.k-section--ink,
.k-section--charcoal{
  --k-border-hairline:rgb(241 241 235 / 28%);
  --k-border-strong:var(--k-color-paper);
}


/* --- Section headings ---------------------------------------------------- */
.k-h2{
  margin:0;
  color:var(--k-color-violet);
  font-size:var(--k-type-h2);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h2);
  letter-spacing:var(--k-tracking-display);
  text-wrap:pretty;
}
/* Violet does not clear contrast on Ink, so dark bands use Lavender. */
.k-section--ink .k-h2,
.k-section--charcoal .k-h2{color:var(--k-color-lavender)}


/* ===========================================================================
   Header
   ========================================================================= */
.site-header{
  position:relative;
  min-height:var(--k-header-height);
  display:flex;
  align-items:center;
  gap:var(--k-grid-gap);
  padding:0 var(--k-page-gutter);
  border-bottom:1px solid var(--k-border-hairline);
  background:rgb(241 241 235 / 96%);
}
.site-header__logo{line-height:0;flex:0 0 auto}
.site-logo{display:block;color:var(--k-color-violet);overflow:visible}

.site-nav{display:flex;align-items:center;gap:clamp(24px,3vw,40px);margin:0 auto}
.site-nav a{
  color:var(--k-color-violet);
  font-size:15px;
  font-weight:var(--k-weight-medium);
  text-decoration-line:none;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
  white-space:nowrap;
}
.site-nav a:hover{color:var(--k-color-violet);text-decoration-line:underline}

.site-header__actions{
  flex:0 0 auto;
  margin-left:auto;
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--k-space-4);
}

.k-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Hamburger toggle */
.site-header__menu-toggle{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--k-border-hairline);
  border-radius:999px;
  background:transparent;
  cursor:pointer;
}
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after{
  display:block;
  width:18px;
  height:2px;
  border-radius:1px;
  background:var(--k-color-violet);
  transition:transform var(--k-duration-fast) var(--k-ease-standard),
             opacity var(--k-duration-fast) var(--k-ease-standard);
}
.site-header__menu-icon{position:relative}
.site-header__menu-icon::before,
.site-header__menu-icon::after{
  content:"";
  position:absolute;
  left:0;
}
.site-header__menu-icon::before{top:-5px}
.site-header__menu-icon::after{top:5px}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon{background:transparent}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::before{top:0;transform:rotate(45deg)}
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::after{top:0;transform:rotate(-45deg)}

/* Dropdown nav menu */
.site-nav-menu{
  position:absolute;
  top:calc(100% + var(--k-space-4));
  right:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  min-width:220px;
  padding:var(--k-space-4);
  border:1px solid var(--k-border-hairline);
  border-radius:var(--k-radius-panel,12px);
  background:var(--k-color-white);
  box-shadow:0 12px 32px rgb(0 0 0 / 12%);
}
.site-nav-menu a{
  padding:var(--k-space-3) var(--k-space-4);
  border-radius:8px;
  color:var(--k-color-ink);
  font-size:15px;
  font-weight:var(--k-weight-medium);
  text-decoration:none;
  min-height:44px;
  display:flex;
  align-items:center;
}
.site-nav-menu a:hover{background:var(--k-color-paper,#f1f1eb);color:var(--k-color-violet)}

/* Below 1024px the nav drops onto its own row under the logo and CTA, and
   scrolls sideways if the four links do not fit. */
/* The original also carried `padding-top:10px;padding-bottom:10px` here, but
   it never took effect: the header's padding was an inline style, which wins
   over a stylesheet rule that is not !important. Reproducing it would make
   the header 20px taller than the live page, so it is deliberately left out. */
@media (max-width:1023px){
  .site-header{flex-wrap:wrap}
  .site-nav{order:3;width:100%;margin:0;gap:20px;overflow-x:auto;padding-bottom:4px}
  .site-nav a{padding:8px 0;min-height:44px;display:flex;align-items:center}
  .site-header__logo .site-logo{width:132px;height:auto}
}


/* ===========================================================================
   Hero
   ========================================================================= */
/* The photo fills the whole section as a background (.hero__bg, positioned
   behind everything); the copy sits on top of it. The gradient scrim on the
   background is what keeps the light-on-photo text in .hero__copy legible —
   strongest behind the copy's left edge, fading out toward the right so the
   photo still reads on its own there. */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--k-color-ink);
}

.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

@media (max-width:767px){
  .hero__bg img{object-position:40% 40%}
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgb(0 0 0 / 85%) 0%,
    rgb(0 0 0 / 65%) 50%,
    rgb(0 0 0 / 45%) 100%);
}

.hero__copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  max-width:640px;
  color:var(--k-text-inverse);
  padding:clamp(48px,6vw,104px) var(--k-page-gutter) 10px
          max(var(--k-page-gutter), calc((100vw - var(--k-container-max)) / 2));
}

.hero__heading{
  margin:0;
  max-width:22ch;
  font-size:var(--k-type-h1);
  font-weight:var(--k-weight-semibold);
  line-height:var(--k-leading-h1);
  letter-spacing:var(--k-tracking-display);
  color:var(--k-color-white);
  text-wrap:pretty;
}
.hero__heading em{font-style:normal;color:var(--k-color-lavender)}

.hero__lede{
  margin:var(--k-space-8) 0 0;
  max-width:52ch;
  font-size:var(--k-type-body-lg);
  line-height:var(--k-leading-body-lg);
  color:rgb(241 241 235 / 88%);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--k-space-6);
  margin-top:var(--k-space-10);
}

.hero__cta{gap:var(--k-space-4)}
.hero__cta-divider{width:1px;align-self:stretch;background:rgb(255 255 255 / 40%)}
.hero__cta-price{font-weight:var(--k-weight-bold, 700);font-size:18px}
.hero__cta-caption{
  margin:var(--k-space-3) 0 0;
  font-size:14px;
  color:rgb(241 241 235 / 80%);
}

/* Three-up feature row under the primary CTA: icon, then a two-line label,
   separated by hairline dividers — mirrors the button's own divider. */
.hero__cta-features{
  display:flex;
  align-items:flex-start;
  list-style:none;
  margin:var(--k-space-4) 0 0;
  padding:0;
}
.hero__cta-feature{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:0 var(--k-space-4);
  text-align:center;
  position:relative;
}
.hero__cta-feature:first-child{padding-left:0}
.hero__cta-feature:last-child{padding-right:0}
.hero__cta-feature + .hero__cta-feature::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:1px;
  background:rgb(255 255 255 / 30%);
}
.hero__cta-feature-icon{
  width:24px;
  height:24px;
  background-color:var(--k-color-white);
}
.hero__cta-feature-label{
  font-size:12px;
  font-weight:var(--k-weight-semibold);
  line-height:1.3;
  color:rgb(241 241 235 / 92%);
}

.hero__cta-feature--camera .hero__cta-feature-icon{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 3a1 1 0 0 0-.83.44L7.13 5H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.13l-1.04-1.56A1 1 0 0 0 15 3H9Zm3 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 3a1 1 0 0 0-.83.44L7.13 5H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.13l-1.04-1.56A1 1 0 0 0 15 3H9Zm3 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hero__cta-feature--clipboard .hero__cta-feature-icon{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4a1 1 0 0 1 1-1h2.17a2 2 0 0 1 3.66 0H16a1 1 0 0 1 1 1v2H7V4Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 5h2v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5h2a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm3 8a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3Cpath d='M15.7 11.3a1 1 0 0 1 1.4 1.4l-3.5 3.5a1 1 0 0 1-1.4 0l-1.5-1.5a1 1 0 1 1 1.4-1.4l.8.8 2.8-2.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4a1 1 0 0 1 1-1h2.17a2 2 0 0 1 3.66 0H16a1 1 0 0 1 1 1v2H7V4Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 5h2v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5h2a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm3 8a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3Cpath d='M15.7 11.3a1 1 0 0 1 1.4 1.4l-3.5 3.5a1 1 0 0 1-1.4 0l-1.5-1.5a1 1 0 1 1 1.4-1.4l.8.8 2.8-2.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hero__cta-feature--shield .hero__cta-feature-icon{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm3.7 7.7-4.2 4.2a1 1 0 0 1-1.4 0L8.3 12a1 1 0 1 1 1.4-1.4l1 1 3.5-3.5a1 1 0 1 1 1.4 1.4Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm3.7 7.7-4.2 4.2a1 1 0 0 1-1.4 0L8.3 12a1 1 0 1 1 1.4-1.4l1 1 3.5-3.5a1 1 0 1 1 1.4 1.4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (max-width:767px){
  .hero__actions{justify-content:center}
  .hero__cta{width:100%;max-width:420px}
}

/* Google rating badge */
.hero__rating{
  display:inline-flex;
  align-self:flex-start;
  width:fit-content;
  align-items:center;
  gap:var(--k-space-4);
  margin-top:var(--k-space-6);
  min-height:44px;
  color:inherit;
  text-decoration:none;
}
.hero__rating:hover{color:var(--k-color-lavender)}
.hero__rating img{display:block;width:24px;height:24px;object-fit:contain}
.hero__rating-stars{font-size:16px;letter-spacing:.08em;color:var(--k-color-lavender)}
.hero__rating-score{font-size:15px;font-weight:var(--k-weight-medium)}

.hero__points{
  list-style:none;
  margin:var(--k-space-5) 0 0;
  padding:0;
  display:grid;
  gap:var(--k-space-2);
  font-size:15px;
  color:rgb(241 241 235 / 88%);
}
.hero__points li{padding-left:var(--k-space-6);position:relative}
.hero__points li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  font-size:14px;
  font-weight:var(--k-weight-bold, 700);
  line-height:1.6;
  color:var(--k-color-lavender);
}
/* This bullet is about seeing what's not obvious at a glance, so a
   magnifying glass reads as "closer inspection" better than a checkmark. */
.hero__points li.hero__point--search::before{
  content:"";
  width:14px;
  height:14px;
  top:3px;
  background-color:var(--k-color-lavender);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 3a7.5 7.5 0 105.163 13.09l4.624 4.623a1 1 0 001.414-1.414l-4.623-4.624A7.5 7.5 0 0010.5 3zm-5.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 3a7.5 7.5 0 105.163 13.09l4.624 4.623a1 1 0 001.414-1.414l-4.623-4.624A7.5 7.5 0 0010.5 3zm-5.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* This bullet is about the cash-out/insurance payout, so a plain dollar sign
   reads as "money" better than the crosshair scope it originally replaced. */
.hero__points li.hero__point--dollar::before{
  content:"$";
  font-size:18px;
  font-weight:var(--k-weight-bold, 700);
  line-height:1.1;
  top:2px;
  color:var(--k-color-lavender);
}

/* This bullet is about a written estimate document, so a clipboard with
   lines and a check reads as "itemized and verified" better than a shield. */
.hero__points li.hero__point--clipboard::before{
  content:"";
  width:14px;
  height:14px;
  top:3px;
  background-color:var(--k-color-lavender);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4a1 1 0 0 1 1-1h2.17a2 2 0 0 1 3.66 0H16a1 1 0 0 1 1 1v2H7V4Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 5h2v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5h2a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm3 8a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3Cpath d='M15.7 11.3a1 1 0 0 1 1.4 1.4l-3.5 3.5a1 1 0 0 1-1.4 0l-1.5-1.5a1 1 0 1 1 1.4-1.4l.8.8 2.8-2.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4a1 1 0 0 1 1-1h2.17a2 2 0 0 1 3.66 0H16a1 1 0 0 1 1 1v2H7V4Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 5h2v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5h2a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm3 8a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z'/%3E%3Cpath d='M15.7 11.3a1 1 0 0 1 1.4 1.4l-3.5 3.5a1 1 0 0 1-1.4 0l-1.5-1.5a1 1 0 1 1 1.4-1.4l.8.8 2.8-2.8Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Press logos: the copy sits over a photo now, so the strip gets its own
   light backing chip instead of a plain hairline rule — colored logos need a
   near-white surface to stay legible against whatever is behind them. */
.hero__press{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--k-space-4) var(--k-space-6);
  margin-top:var(--k-space-8);
  padding:var(--k-space-5) var(--k-space-6);
  background:rgb(241 241 235 / 92%);
  border-radius:var(--k-radius-card);
  color:var(--k-color-ink);
  width:fit-content;
  max-width:100%;
}
.hero__press-label{
  margin:0;
  flex:0 0 auto;
  font-size:14px;
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  color:var(--k-text-muted);
}
.hero__press-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k-space-4) var(--k-space-6)}
.hero__press-logos a{display:inline-flex;align-items:center;min-height:44px}
/* The original declared a hover of `opacity:1` with no base opacity to return
   from, so it does nothing. Carried over as-is rather than "improved" into a
   fade, which would make the logos lighter than the live page. */
.hero__press-logos a:hover{opacity:1}
.hero__press-logos img{display:block;width:auto;object-fit:contain}

/* Each logo is a different lock-up, so they are matched by optical height
   rather than by a single value. */
.hero__press-logos img[alt="CNBC"]{height:34px}
.hero__press-logos img[alt="Business Insider"]{height:28px}
.hero__press-logos img[alt="Axios"]{height:18px}
.hero__press-logos img[alt="FenderBender"]{height:30px}

/* --- Scheduling form modal ------------------------------------------------
   The intake form is no longer inline in the hero: it opens as an overlay
   whenever a CTA is pressed, and the same markup renders inside the modal. */
.form-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--k-space-6);
}
.form-modal[hidden]{display:none}
.form-modal__overlay{
  position:absolute;
  inset:0;
  background:rgb(20 18 30 / 55%);
}
.form-modal__dialog{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  max-height:min(720px, 92vh);
  overflow-y:auto;
  border-radius:var(--k-radius-panel,16px);
  background:var(--k-color-white);
  color:var(--k-color-ink);
  padding:clamp(32px,5vw,56px);
  box-shadow:0 24px 64px rgb(0 0 0 / 24%);
}
.form-modal__close{
  position:absolute;
  top:var(--k-space-4);
  right:var(--k-space-4);
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--k-border-hairline);
  border-radius:999px;
  background:transparent;
  color:var(--k-color-ink);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.form-modal__close:hover{background:var(--k-color-paper,#f1f1eb)}

.hero__form{width:100%}
.hero__form-panel{width:100%;max-width:480px;margin:0 auto}

.hero__form-eyebrow{
  margin:0 0 var(--k-space-5);
  font-size:16px;
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  color:var(--k-color-violet);
}
.hero__form-eyebrow.text-\[18px\]{font-size:18px}
.hero__heading.text-\[58px\]{font-size:58px}
.hero__heading.text-\[48px\]{font-size:48px}
.hero__heading.font-medium{font-weight:var(--k-weight-medium)}
.hero__lede.text-\[30px\]{font-size:30px}
.hero__lede.font-medium{font-weight:var(--k-weight-medium)}
.hero__lede.text-\[24px\]{font-size:24px}
.hero__lede.font-normal{font-weight:var(--k-weight-regular)}
.hero__lede.text-\[color\:var\(--k-color-white\)\]{color:var(--k-color-white)}
.hero__form-heading{
  margin:0 0 var(--k-space-8);
  font-size:var(--k-type-body-lg);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h2);
  letter-spacing:var(--k-tracking-display);
  text-wrap:pretty;
}

/* The confirmation that replaces the panel once a submission lands. */
.hero__form-confirmation{
  width:100%;
  max-width:480px;
  text-align:center;
}
.hero__form-confirmation p{
  margin:0;
  font-size:var(--k-type-body-lg);
  font-weight:var(--k-weight-medium);
  color:var(--k-color-violet);
}

/* --- Hero film ----------------------------------------------------------- */
/* OPTIONAL FEATURE, OFF BY DEFAULT. None of these rules match anything unless
   SITE_CONFIG.heroVideo.enabled is true, in which case app.js builds the
   markup below. They are not dead code -- do not delete them.

   Sits full width under the two hero columns (flex-basis 100% puts it on its
   own row). Nothing loads from Vimeo until the visitor presses Play. */
.hero__media{
  flex:1 1 100%;
  position:relative;
  aspect-ratio:16 / 9;
  max-height:clamp(280px,40vw,560px);
  background:var(--k-color-black);
  overflow:hidden;
}
.hero__media-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
}
.hero__media-scrim{
  position:absolute;
  inset:0;
  background:var(--k-color-ink);
  opacity:.34;
  pointer-events:none;
}
.hero__media-playwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero__media-play{
  display:inline-flex;
  align-items:center;
  gap:var(--k-space-4);
  min-height:56px;
  padding:0 var(--k-space-6);
  background:var(--k-color-lavender);
  color:var(--k-color-ink);
  border:0;
  border-radius:var(--k-radius-control);
  font-family:inherit;
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--k-duration-fast) var(--k-ease-standard);
}
.hero__media-play:hover{background:var(--k-color-paper)}
/* A CSS triangle, so there is no icon file to load. */
.hero__media-play-glyph{
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid currentColor;
}
.hero__media-frame{position:absolute;inset:0;width:100%;height:100%;border:0}

/* The mute control appears only once the Vimeo player is on screen. It drives
   the player through its API rather than the iframe's own volume button, so
   the state stays in sync with the label. */
.hero__media-mute{
  position:absolute;
  right:var(--k-space-4);
  bottom:var(--k-space-4);
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:var(--k-touch-min);
  padding:0 var(--k-space-5);
  background:rgb(38 38 38 / 72%);
  color:var(--k-color-paper);
  border:1px solid rgb(241 241 235 / 42%);
  border-radius:var(--k-radius-control);
  font-family:inherit;
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  cursor:pointer;
}
.hero__media-mute:hover{background:var(--k-color-ink)}

/* On a phone the hero headline would otherwise run to four lines, and the
   section headings are dropped a step with it.

   `main h2` is deliberately blunt and carries !important, exactly as the
   original page did: it has to beat both the .k-h2 class and the larger
   --k-type-h1 on the final call to action. It therefore also catches the
   heading above the hero form, which lands at the same size as a section
   heading on a phone. That is what the live page does; do not "fix" it here
   without checking the design against a real phone first. */
@media (max-width:479px){
  .hero__heading{font-size:clamp(2rem,8.6vw,2.6rem);line-height:1.05}
  main h2{font-size:clamp(1.75rem,7.4vw,2.25rem) !important;line-height:1.1 !important}
}


/* ===========================================================================
   Form controls
   ========================================================================= */
.hero-form{display:grid;gap:var(--k-space-5)}

.k-field{display:grid;gap:var(--k-space-2)}
.k-field__label{font-size:14px;font-weight:var(--k-weight-medium);line-height:1.4}
.k-field__required{color:var(--k-text-muted)}

.k-input,
.k-select{
  height:var(--k-input-height);
  width:100%;
  padding:0 var(--k-space-4);
  border:1px solid var(--k-border-strong);
  border-radius:var(--k-radius-control);
  box-shadow:none;
  outline:none;
  background:transparent;
  color:inherit;
}
.k-input:focus-visible,
.k-select:focus-visible{outline:var(--k-border-emphasis) solid var(--k-focus-ring);outline-offset:2px}

/* A native select with the UA arrow replaced by one drawn in the background,
   so the control matches the text inputs beside it. Used only by the optional
   location dropdown (SITE_CONFIG.form.showLocationField), which is off today. */
.k-select{
  appearance:none;
  padding-right:var(--k-space-10);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}

/* Phone field with a country flag/dial-code prefix (US/Canada only). */
.phone-field{
  position:relative;
  display:flex;
  align-items:center;
  height:var(--k-input-height);
  border:1px solid var(--k-border-strong);
  border-radius:var(--k-radius-control);
  padding:0 var(--k-space-4);
  gap:var(--k-space-2);
}
.phone-field__flag{font-size:20px;line-height:1;pointer-events:none}
.phone-field__chevron{color:var(--k-text-muted);pointer-events:none}
.phone-field__country-select{
  position:absolute;
  inset:0 auto 0 0;
  width:64px;
  height:100%;
  opacity:0;
  cursor:pointer;
  border:0;
  appearance:none;
}
.phone-field__divider{width:1px;align-self:stretch;margin:var(--k-space-2) 0;background:var(--k-border-strong)}
.phone-field__dial{color:inherit;pointer-events:none}
.phone-field__input{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  border:0;
  outline:none;
  background:transparent;
  color:inherit;
  font:inherit;
  padding:0;
}
.phone-field:focus-within{outline:var(--k-border-emphasis) solid var(--k-focus-ring);outline-offset:2px}

/* The field-level validation message under the phone input. */
.k-field__error{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--k-color-violet);
}

/* SMS consent */
.form-consent{
  display:flex;
  gap:var(--k-space-4);
  align-items:flex-start;
  font-size:13px;
  line-height:1.6;
  cursor:pointer;
}
.form-consent input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--k-color-violet);
}

.form-fee-note{
  margin:calc(var(--k-space-2) - 10px) 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--k-color-ink-muted, rgb(28 25 23 / 65%));
  text-align:center;
}

/* Location toggle: big tap targets, easy to hit with a thumb. */
.form-toggle{display:flex;gap:var(--k-space-3)}
.form-toggle__option{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 var(--k-space-4);
  border:1px solid var(--k-border-hairline);
  border-radius:999px;
  font-size:15px;
  font-weight:var(--k-weight-medium);
  color:var(--k-color-ink);
  text-align:center;
  cursor:pointer;
  transition:background var(--k-duration-fast) var(--k-ease-standard),
             color var(--k-duration-fast) var(--k-ease-standard),
             border-color var(--k-duration-fast) var(--k-ease-standard);
}
.form-toggle__option input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.form-toggle__option:has(input:checked){
  background:var(--k-color-violet);
  border-color:var(--k-color-violet);
  color:var(--k-color-white);
}
.form-toggle__option:focus-within{outline:var(--k-border-emphasis) solid var(--k-focus-ring);outline-offset:2px}

.form-location__address{display:none;margin:var(--k-space-3) 0 0;font-size:13px;line-height:1.6;color:var(--k-text-muted)}
.k-field:has(input[value="las-vegas"]:checked) .form-location__address[data-address="las-vegas"]{display:block}
.k-field:has(input[value="tempe"]:checked) .form-location__address[data-address="tempe"]{display:block}
.k-field:has(input[value="santa-clara"]:checked) .form-location__address[data-address="santa-clara"]{display:block}

/* Whole-form failure message, appended under the submit button. */
.form-error{margin:0;font-size:13px;line-height:1.6;color:var(--k-color-violet)}

[hidden]{display:none !important}


/* ===========================================================================
   How it works
   ========================================================================= */
.how__heading{
  margin:0 0 clamp(28px,3vw,48px);
  padding-bottom:var(--k-space-8);
  border-bottom:1px solid var(--k-border-strong);
}
/* Full-bleed: the clip breaks out of the section's gutters to the window
   edges. The aspect-ratio is set from JS, because it changes with the cut. */
.how__video{
  display:block;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  height:auto;
  background:var(--k-color-paper);
}


/* ===========================================================================
   Reviews
   ========================================================================= */
.reviews__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--k-space-6);
  padding-bottom:var(--k-space-8);
  border-bottom:1px solid var(--k-border-strong);
}
.reviews__head-title{flex:1 1 420px}
.reviews__aggregate{margin:0;font-size:var(--k-type-body-sm);color:var(--k-text-muted)}
.reviews__aggregate a{
  color:var(--k-color-violet);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.reviews__aggregate a:hover{color:var(--k-color-ink)}

.reviews__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--k-grid-gap);
}
.review{padding-top:var(--k-space-6);border-top:1px solid var(--k-border-hairline)}
.review__head{display:flex;align-items:center;gap:var(--k-space-4)}
.review__avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:50%;
  background:var(--k-color-steel);
  color:var(--k-color-ink);
  font-size:16px;
  font-weight:var(--k-weight-medium);
}
.review__name{margin:0;font-size:var(--k-type-body-sm);font-weight:var(--k-weight-medium)}
.review__meta{display:flex;align-items:center;gap:var(--k-space-3);margin-top:4px}
.review__stars{display:flex;gap:3px}
/* A five-pointed star drawn with a clip-path, so no icon font is needed. */
.review__star{
  width:13px;
  height:13px;
  background:var(--k-color-violet);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.review__source{
  font-size:var(--k-type-label);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
  color:var(--k-text-muted);
}
.review__quote{
  margin:var(--k-space-5) 0 0;
  max-width:46ch;
  font-size:var(--k-type-body-sm);
  line-height:1.6;
  text-wrap:pretty;
}
/* A long quote is cut to three lines until "Read more" is pressed. */
.review__quote--clamped{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.review__toggle{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-top:var(--k-space-2);
  padding:0;
  background:none;
  border:0;
  color:var(--k-color-violet);
  font-family:inherit;
  font-size:var(--k-type-body-sm);
  font-weight:var(--k-weight-medium);
  text-decoration:underline;
  text-underline-offset:5px;
  cursor:pointer;
}
.review__toggle:hover{color:var(--k-color-ink)}


/* ===========================================================================
   Problem / appraisal packet
   ========================================================================= */
.deliverables__intro{max-width:56ch}
.deliverables__title{margin:0}
.deliverables__subhead{margin:var(--k-space-6) 0 0;color:var(--k-text-accent)}
.deliverables__description{
  margin:var(--k-space-4) 0 0;
  max-width:var(--k-measure-copy);
  color:var(--k-text-muted);
}

.deliverables{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--k-grid-gap);
  margin-top:clamp(48px,6vw,88px);
}
.deliverable{padding-top:var(--k-space-6);border-top:1px solid var(--k-border-hairline)}
.deliverable h3{
  margin:0;
  font-size:var(--k-type-h4,1.25rem);
  font-weight:var(--k-weight-regular);
  color:var(--k-color-ink);
}
.deliverable p{
  margin:var(--k-space-4) 0 0;
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}

.deliverables__caveat{
  margin:clamp(40px,4vw,64px) 0 0;
  padding-top:var(--k-space-6);
  border-top:1px solid var(--k-border-hairline);
  max-width:var(--k-measure-copy);
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}

@media (max-width:767px){
  .deliverables{grid-template-columns:1fr;gap:var(--k-space-6)}
}


/* ===========================================================================
   Fast, accurate, and definitive
   ========================================================================= */
#fast-accurate-definitive{padding-top:clamp(2.5rem,4vw,4rem)}
.fdd__heading{margin-bottom:0}
.fdd__subheading{
  margin:var(--k-space-4) 0 0;
  max-width:var(--k-measure-copy);
  font-size:var(--k-type-body-lg);
  color:var(--k-text-muted);
}
.fdd{margin-top:clamp(32px,4vw,56px)}

.fdd{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(28px,4vw,64px)}

.fdd__media{
  position:relative;
  flex:3 1 420px;
  background:var(--k-color-ink);
}
.fdd__video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}

.fdd__progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:rgb(255 255 255 / 24%);
}
.fdd__progress span{
  display:block;
  height:100%;
  width:0%;
  background:var(--k-color-lavender);
  transition:width .1s linear;
}

.fdd__playpause{
  position:absolute;
  right:var(--k-space-4);
  bottom:var(--k-space-4);
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:var(--k-color-lavender);
  color:var(--k-color-violet);
  cursor:pointer;
}
.fdd__playpause:hover{background:var(--k-color-white)}

.fdd__list{
  list-style:none;
  margin:0;
  padding:0;
  flex:2 1 320px;
  display:flex;
  flex-direction:column;
}
.fdd__item{
  padding:var(--k-space-5) 0;
  border-top:1px solid var(--k-border-hairline);
  cursor:pointer;
}
.fdd__item:last-child{border-bottom:1px solid var(--k-border-hairline)}
.fdd__item h3{
  position:relative;
  margin:0;
  padding-left:var(--k-space-6);
  font-size:var(--k-type-h4,1.25rem);
  font-weight:var(--k-weight-regular);
  color:var(--k-text-muted);
}
.fdd__item h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:8px;
  height:8px;
  border-radius:50%;
  border:1.5px solid var(--k-text-muted);
  background:transparent;
}
.fdd__item p{
  margin:var(--k-space-3) 0 0;
  padding-left:var(--k-space-6);
  max-width:48ch;
  font-size:var(--k-type-body-sm);
  line-height:1.6;
  color:transparent;
  max-height:0;
  overflow:hidden;
  transition:color .15s ease;
}
.fdd__item.is-active h3{color:var(--k-color-violet)}
.fdd__item.is-active h3::before{border-color:var(--k-color-violet);background:var(--k-color-violet)}
.fdd__item.is-active p{color:var(--k-text-muted);max-height:none;overflow:visible}

/* Tablet only: the floating .cta-rail button (see "Sticky calls to action"
   below) is fixed to the right edge of the viewport and can end up
   vertically centered over this section while scrolling. At tablet widths
   the two-column media/list layout leaves the list column reaching the
   same right-hand edge, so it collides with the rail. Reserving extra
   right-hand space keeps the section's content clear of the rail's
   horizontal footprint and, as a side effect, forces the layout to wrap to
   a single column here -- the same safe layout already used on phones. */
@media (min-width:768px) and (max-width:1023.98px){
  #fast-accurate-definitive .k-section__inner{padding-right:240px}
}


/* ===========================================================================
   FAQ accordion
   ========================================================================= */
/* Built from <details>/<summary>, so it opens and closes with no JavaScript
   at all and still works if app.js fails to load. The `name` attribute makes
   the group behave as an accordion — opening one closes the rest. */
.faq{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,96px)}
.faq__title{flex:1 1 300px;max-width:34rem}
.faq__items{flex:2 1 440px}

.faq__item{border-top:1px solid var(--k-border-hairline)}
.faq__question{
  width:100%;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--k-space-6);
  padding:var(--k-space-5) 0;
  background:transparent;
  border:0;
  color:inherit;
  font-size:var(--k-type-h4);
  font-weight:var(--k-weight-medium);
  line-height:var(--k-leading-h4);
  text-align:left;
  cursor:pointer;
  /* Suppress the default disclosure triangle in every engine. */
  list-style:none;
}
.faq__question::-webkit-details-marker{display:none}
.faq__question::marker{content:""}
.faq__question:hover{color:var(--k-text-accent)}

/* A plus that loses its upright stroke when the item opens, becoming a minus. */
.faq__icon{
  position:relative;
  flex:0 0 auto;
  width:var(--k-touch-min);
  height:var(--k-touch-min);
}
.faq__icon i{position:absolute;background:currentcolor}
.faq__icon i:first-child{left:11px;top:21px;width:22px;height:1px}
.faq__icon i:last-child{
  left:21px;
  top:11px;
  width:1px;
  height:22px;
  transform:none;
  transition:transform var(--k-duration-fast) var(--k-ease-standard);
}
.faq__item[open] .faq__icon i:last-child{transform:scaleY(0)}

.faq__answer{padding:0 0 var(--k-space-10);max-width:var(--k-measure-copy)}
.faq__answer p{margin:0}


/* ===========================================================================
   Final CTA
   ========================================================================= */
.final{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,96px)}
.final__lead{flex:1 1 380px}
.final__lead h2{
  margin:0;
  color:var(--k-color-lavender);
  font-size:var(--k-type-h1);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h1);
  letter-spacing:var(--k-tracking-display);
}
.final__lead p{
  margin:var(--k-space-8) 0 0;
  max-width:48ch;
  font-size:var(--k-type-body-lg);
  line-height:var(--k-leading-body-lg);
}
.final__aside{flex:1 1 340px;align-self:end}
.final__note{
  margin:var(--k-space-6) 0 0;
  max-width:44ch;
  font-size:var(--k-type-body-sm);
  color:var(--k-color-steel);
}
.final__locations{
  display:grid;
  gap:var(--k-space-5);
  margin-top:var(--k-space-8);
  padding-top:var(--k-space-6);
  border-top:1px solid var(--k-border-hairline);
}
.final__location-city{
  margin:0;
  color:var(--k-color-lavender);
  font-size:var(--k-type-label);
  font-weight:var(--k-weight-semibold);
  letter-spacing:var(--k-tracking-label);
  text-transform:uppercase;
}
.final__location-address{
  margin:var(--k-space-2) 0 0;
  font-size:var(--k-type-body-sm);
  line-height:1.6;
  color:var(--k-color-steel);
}
.final__location-link{margin:var(--k-space-2) 0 0}
.final__location-link a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  font-size:var(--k-type-body-sm);
  font-weight:var(--k-weight-medium);
  color:var(--k-color-lavender);
  text-decoration:none;
}
.final__location-link a:hover{color:var(--k-color-paper);text-decoration:underline}

.final__contact-line{
  margin:var(--k-space-5) 0 0;
  font-size:var(--k-type-body-sm);
  color:var(--k-color-steel);
}
.final__contact-line a{color:var(--k-color-lavender);text-decoration:none}
.final__contact-line a:hover{color:var(--k-color-paper);text-decoration:underline}

.final__phone{margin:var(--k-space-5) 0 0;font-size:var(--k-type-body-sm)}
.final__phone a{color:var(--k-color-lavender)}


/* ===========================================================================
   Footer and disclosures
   ========================================================================= */
.site-footer{
  padding:clamp(96px,8vw,120px) var(--k-page-gutter) var(--k-space-8);
  border-top:1px solid var(--k-color-ink);
  background:var(--k-color-paper);
  color:var(--k-color-ink);
}
.site-footer__inner{max-width:var(--k-container-max);margin:0 auto}
.site-footer__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--k-grid-gap)}
.site-footer__brand{grid-column:1 / span 3}
.site-footer__contact{margin:var(--k-space-6) 0 0;font-size:var(--k-type-body-sm)}
.site-footer__group{grid-column:span 2}
.site-footer__group .k-label{margin:0 0 var(--k-space-5);color:var(--k-text-muted);font-family:var(--k-font-sans)}
.site-footer__group ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--k-space-3)}
.site-footer__group a{color:var(--k-color-ink);font-size:var(--k-type-body-sm);text-decoration:none}
.site-footer__group a:hover{color:var(--k-color-violet);text-decoration:underline}
.site-footer__closing{
  margin:clamp(64px,7vw,112px) 0 0;
  max-width:22ch;
  color:var(--k-color-violet);
  font-size:var(--k-type-h2);
  font-weight:var(--k-weight-light);
  line-height:var(--k-leading-h2);
  letter-spacing:var(--k-tracking-display);
}
.site-footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:var(--k-space-6);
  margin-top:var(--k-space-18);
  padding-top:var(--k-space-6);
  border-top:1px solid var(--k-border-hairline);
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}
.site-footer__legal a{color:var(--k-text-muted);text-decoration:none}
.site-footer__legal a:hover{color:var(--k-color-ink);text-decoration:underline}

/* Three columns on a tablet, one on a phone. The extra bottom padding on a
   phone clears the sticky CTA bar pinned over the foot of the page. */
@media (min-width:768px) and (max-width:1023px){
  .site-footer__grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:48px}
  .site-footer__grid > *{grid-column:span 3}
}
@media (max-width:767px){
  .site-footer{padding-bottom:96px}
  .site-footer__grid{grid-template-columns:1fr;gap:40px}
  .site-footer__grid > *{grid-column:auto}
}

.disclosures{
  padding:var(--k-space-8) var(--k-page-gutter) var(--k-space-12);
  background:var(--k-color-paper);
  border-top:1px solid var(--k-border-hairline);
}
.disclosures p{
  max-width:var(--k-container-max);
  margin:0 auto;
  font-size:var(--k-type-body-sm);
  color:var(--k-text-muted);
}


/* ===========================================================================
   Sticky calls to action
   ========================================================================= */
/* Phone: a bar across the foot of the screen that slides up out of the way.
   Both it and the rail below are driven by data-visible from app.js. */
.cta-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  padding:12px var(--k-page-gutter) calc(12px + env(safe-area-inset-bottom));
  background:rgb(241 241 235 / 96%);
  border-top:1px solid var(--k-border-hairline);
  transform:translateY(110%);
  transition:transform var(--k-duration-base) var(--k-ease-standard);
}
.cta-bar[data-visible="true"]{transform:none}
@media (min-width:768px){.cta-bar{display:none}}

/* Tablet and up: a single button parked against the right edge instead. */
.cta-rail__button{display:inline-flex;align-items:center;gap:var(--k-space-3)}
.cta-rail__divider{width:1px;align-self:stretch;background:rgb(255 255 255 / 40%)}
.cta-rail__price{font-weight:var(--k-weight-bold, 700)}

.cta-rail{
  display:none;
  position:fixed;
  right:20px;
  top:50%;
  transform:translate(24px,-50%);
  opacity:0;
  pointer-events:none;
  z-index:50;
  transition:transform var(--k-duration-base) var(--k-ease-standard),
             opacity var(--k-duration-base) var(--k-ease-standard);
}
.cta-rail[data-visible="true"]{transform:translate(0,-50%);opacity:1;pointer-events:auto}
@media (min-width:768px){.cta-rail{display:block}}


/* ===========================================================================
   In-page anchors
   ========================================================================= */
/* The header is not sticky, but a fragment jump on a long page still reads
   better with a little air above the heading it lands on. The original page
   did this with a hand-rolled scrollTo(-80px); scroll-margin is the same
   thing without the JavaScript. */
:target,
main > section,
.site-footer{scroll-margin-top:80px}