@import url("tokens.css");

[hidden]{display:none!important}

/* ---------- layout helpers ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--space-4);padding-right:var(--space-4)}
.two-col{display:grid;grid-template-columns:var(--l,1fr) var(--r,1fr);align-items:center}
/* Grid and flex children floor at min-width:auto, so a form control — whose
   intrinsic minimum is its default character width — can hold a column open
   wider than the screen. Nothing here needs that floor. */
.two-col>*,.grid>*{min-width:0}
/* minmax(0,1fr) rather than 1fr: a plain 1fr floors each column at its
   min-content width, so one long word in a heading makes that column wider
   than its neighbour. Equal columns must be able to shrink. */
.grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(var(--cols-tab,2),minmax(0,1fr))}
}
/* Phones keep two columns by default — a single column of icon/title/blurb
   cards turns a five-card section into a five-screen scroll. Grids whose
   cards genuinely need the full width opt out with --cols-mob:1. */
@media (max-width:640px){
  .grid{grid-template-columns:repeat(var(--cols-mob,2),minmax(0,1fr))}
  .container{padding-left:var(--space-3);padding-right:var(--space-3)}
}

/* ---------- header / nav ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface-inverse);border-bottom:1px solid var(--border-inverse)}
.site-header .container{padding-top:var(--space-2);padding-bottom:var(--space-2);min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:nowrap;
  transition:min-height var(--dur-base) var(--ease-standard)}
.site-header.is-condensed .container{min-height:64px}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;flex:0 1 auto;min-width:0}
.brand-mark{display:block;width:46px;height:46px;overflow:hidden;position:relative;flex:0 0 auto;
  transform-origin:left center;transition:transform var(--dur-base) var(--ease-standard)}
.site-header.is-condensed .brand-mark{transform:scale(var(--mark-condensed,.7826))}
.brand-mark img{position:absolute;left:-48px;top:-35px;width:141px;max-width:none}
.brand-word{display:flex;flex-direction:column;gap:3px;line-height:1;min-width:0}
.brand-name{font-family:var(--font-serif-display);font-size:21px;color:var(--cream-50);white-space:nowrap}
.brand-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-500);white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:var(--space-4);flex:0 1 auto;min-width:0;justify-content:flex-end}
.site-nav__links{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.navlink{color:var(--text-on-inverse-muted);text-decoration:none;font-size:var(--text-sm);white-space:nowrap;position:relative}
.navlink:hover{color:var(--text-on-inverse-muted)}
.navlink.is-active{color:var(--gold-500)}
.navlink.is-active:hover{color:var(--gold-500)}
.nav-toggle{display:none;width:44px;height:44px;flex:0 0 auto;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-inverse);border-radius:var(--radius-sm);
  color:var(--cream-50);cursor:pointer;padding:0;
  transition:background var(--dur-fast) var(--ease-standard)}
.nav-toggle:hover{background:var(--cream-a10)}
.nav-toggle .ik-icon{width:22px;height:22px;--i:url('https://unpkg.com/lucide-static@0.408.0/icons/menu.svg')}
.nav-toggle[aria-expanded="true"] .ik-icon{--i:url('https://unpkg.com/lucide-static@0.408.0/icons/x.svg')}

/* Below this width the three section links plus the page CTA can no longer
   share a row without wrapping the header onto three lines, so the links move
   into a panel and the CTA — the one thing a visitor is here to press — stays
   out on the bar. */
@media (max-width:860px){
  .site-header{position:sticky}
  .site-header .container{min-height:64px;gap:var(--space-2)}
  .site-header.is-condensed .container{min-height:58px}
  .brand-mark{width:38px;height:38px;--mark-condensed:1}
  .brand-mark img{left:-40px;top:-29px;width:117px}
  .brand-name{font-size:17px}
  .brand-tag{font-size:9px}
  .site-nav{gap:var(--space-2)}
  .nav-toggle{display:inline-flex}
  .site-nav__links{position:absolute;left:0;right:0;top:100%;z-index:19;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface-inverse);border-bottom:1px solid var(--border-inverse);
    box-shadow:var(--shadow-lg);
    padding:var(--space-1) var(--space-3) var(--space-2);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base)}
  .site-nav__links.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .site-nav__links .navlink{font-size:var(--text-body);padding:15px 4px;border-bottom:1px solid var(--border-inverse)}
  .site-nav__links .navlink:last-child{border-bottom:none}
}
@media (max-width:340px){
  .brand-word{display:none}
}

/* ---------- eyebrow ---------- */
.eyebrow{display:inline-block}
.eyebrow--muted{color:var(--text-muted)}
.eyebrow--gold{color:var(--gold-500)}
.eyebrow--inverse{color:var(--text-on-inverse-muted)}
.eyebrow--strong{color:var(--text-heading)}

/* ---------- icon (Lucide, mask-based, matches Icon.jsx) ---------- */
.ik-icon{display:inline-block;flex:0 0 auto;background-color:currentColor;
  -webkit-mask-image:var(--i);mask-image:var(--i);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-medium);line-height:1;text-decoration:none;
  border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled]{cursor:not-allowed;opacity:.45}
.btn--full{display:flex;width:100%}
.btn--sm{padding:6px 14px;font-size:var(--text-sm);min-height:34px}
.btn--md{padding:10px 20px;font-size:var(--text-body);min-height:44px}
.btn--lg{padding:14px 28px;font-size:var(--text-lead);min-height:54px}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-bg-hover)}
.btn--primary:active{background:var(--action-primary-bg-active)}
.btn--accent{background:var(--action-accent-bg);color:var(--action-accent-fg)}
.btn--accent:hover{background:var(--action-accent-bg-hover)}
.btn--accent:active{background:var(--action-accent-bg-active)}
.btn--secondary{background:transparent;color:var(--text-heading);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--surface-sunken)}
.btn--ghost{background:transparent;color:var(--action-ghost-fg)}
.btn--ghost:hover{background:var(--action-ghost-bg-hover)}
.btn--inverse{background:var(--cream-a10);color:var(--text-on-inverse);border-color:var(--border-inverse)}
.btn--inverse:hover{background:var(--cream-a20)}

/* A pair of CTAs that belongs on one line. On phones the two share the row
   equally rather than wrapping the second button underneath the first —
   padding and label size give way before the line does. */
.btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
@media (max-width:640px){
  .btn-row{flex-wrap:nowrap}
  .btn-row>.btn{flex:1 1 0;min-width:0;padding-left:var(--space-2);padding-right:var(--space-2);
    /* A long label wraps inside its half rather than being clipped — the row
       is what has to stay on one line, not every label. */
    white-space:normal;text-align:center;line-height:1.25}
  .btn-row>.btn--lg{font-size:var(--text-body);min-height:50px;padding-top:10px;padding-bottom:10px}
}
@media (max-width:400px){
  .btn-row>.btn--lg{font-size:15px}
}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px 8px;border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-caption);line-height:1.4}
.badge--success{background:var(--feedback-success-bg);color:var(--feedback-success-fg);border:1px solid transparent}
.badge--neutral{background:var(--surface-sunken);color:var(--text-muted);border:1px solid var(--border-default)}
.badge--attention{background:var(--gold-a12);color:var(--gold-600);border:1px solid var(--gold-a30)}

/* ---------- card ---------- */
.card{border-radius:var(--radius-lg);background:var(--surface-card);border:1px solid var(--border-default);
  color:var(--text-strong);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.card--sunken{background:var(--surface-sunken);border-color:var(--border-subtle)}
.card--inverse{background:var(--surface-inverse-alt);border-color:var(--border-inverse);color:var(--text-on-inverse)}
.card--interactive{cursor:pointer}
.card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* The icon / heading / blurb card that carries every feature grid. Two of
   these share a phone's width, so the padding steps down with the column. */
.feature-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}
@media (max-width:640px){
  .feature-card{padding:var(--space-3);gap:6px}
}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-heading)}
.field label .req{color:var(--feedback-error-fg)}
.field .hint{font-family:var(--font-sans);font-size:var(--text-caption);color:var(--text-muted)}
.control{width:100%;min-width:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:1.4;color:var(--text-strong);
  background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  padding:11px 14px;height:44px;outline:none;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.control:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
textarea.control{height:auto;resize:vertical}
select.control{appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A5C58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.checkbox{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-body);color:var(--text-strong)}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox .box{width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-card);
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);margin-top:1px}
.checkbox input:checked ~ .box{border-color:transparent;background:var(--surface-inverse)}
.checkbox .box .tick{width:14px;height:14px;background:var(--gold-500);opacity:0;
  -webkit-mask:url("https://unpkg.com/lucide-static@0.408.0/icons/check.svg") no-repeat center/contain;
  mask:url("https://unpkg.com/lucide-static@0.408.0/icons/check.svg") no-repeat center/contain}
.checkbox input:checked ~ .box .tick{opacity:1}

/* ---------- phone frame ---------- */
.phone{width:min(300px,80vw);aspect-ratio:9/19.5;border-radius:40px;background:#000;box-shadow:var(--shadow-lg);overflow:hidden;padding:10px;position:relative;
  margin-inline:auto;touch-action:pan-y}
.phone__screen{width:100%;height:100%;position:relative;border-radius:32px;overflow:hidden;background:var(--surface-page)}
.phone__statusbar{position:absolute;top:0;left:0;right:0;height:36px;z-index:3;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff;font-size:13px;font-weight:600;font-family:var(--font-sans)}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:70px;height:18px;background:#000;border-radius:9px}
.phone__status-icons{display:flex;align-items:center;gap:5px}
.phone__slide{position:absolute;top:36px;left:0;right:0;bottom:0;opacity:0;pointer-events:none;overflow:hidden;transition:opacity 400ms cubic-bezier(.2,.6,.3,1)}
.phone__slide.is-active{opacity:1;pointer-events:auto}
.phone__slide--fast{transition-duration:180ms}
/* Each screenshot carries the real phone's status bar in its top 141px, which
   would otherwise sit directly under the frame's own drawn one. Pull it up out
   of the slide. The 1.5% overscan covers the sub-pixel shortfall between the
   cropped screenshot's ratio and the frame's screen — without it a hairline of
   backdrop can appear along the bottom edge. */
.phone__slide img{display:block;width:100.6%;max-width:none;height:auto;
  margin-left:-.3%;margin-top:calc(-1 * var(--shot-crop))}

/* Carousel controls. Dots alone are a 7px target and say nothing about which
   way they move; arrows plus a swipe are what a thumb actually reaches for. */
.phone-nav{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.phone-arrow{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  color:var(--text-heading);cursor:pointer;padding:0;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.phone-arrow:hover{background:var(--surface-sunken);border-color:var(--stone-400)}
.phone-arrow .ik-icon{width:20px;height:20px}
.phone-arrow--prev .ik-icon{--i:url('https://unpkg.com/lucide-static@0.408.0/icons/chevron-left.svg')}
.phone-arrow--next .ik-icon{--i:url('https://unpkg.com/lucide-static@0.408.0/icons/chevron-right.svg')}
.phone-dots{display:flex;justify-content:center;align-items:center}
.phone-dots button{width:28px;height:44px;border:none;padding:0;cursor:pointer;background:transparent;position:relative}
.phone-dots button::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;
  background:var(--border-default);transform:translate(-50%,-50%);
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.phone-dots button.is-active::after{background:var(--gold-500);transform:translate(-50%,-50%) scale(1.25)}

/* control-panel tab buttons */
.panel-tabs{display:flex;flex-direction:column;gap:var(--space-2)}
.panel-tab{background:transparent;border:1px solid var(--border-default);
  display:flex;gap:var(--space-3);align-items:flex-start;text-align:left;cursor:pointer;
  padding:var(--space-4);border-radius:var(--radius-lg);font-family:var(--font-sans);
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.panel-tab.is-active{background:var(--surface-card);border-color:var(--gold-600)}
.panel-tab__icon{color:var(--green-700);display:flex;padding-top:2px}
.panel-tab__icon .ik-icon{width:20px;height:20px}
.panel-tab__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.panel-tab__title{font-family:var(--font-serif-display);font-size:var(--text-h4);color:var(--text-heading)}
.panel-tab__desc{font-size:var(--text-sm);color:var(--text-muted)}

/* Once the two columns stack, a full-height list of five cards pushes the
   screenshot they control a whole scroll away — you tap a card and nothing
   you can see changes. The five shed their descriptions and pack into a
   two-up grid, so the whole set, the caption and the phone share one view
   with nothing to scroll sideways for. */
@media (max-width:900px){
  .panel-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  .panel-tab{align-items:center;gap:var(--space-2);
    padding:10px var(--space-3);border-radius:var(--radius-sm);min-height:48px}
  /* An odd fifth chip takes the full row rather than sitting orphaned. */
  .panel-tab:last-child:nth-child(odd){grid-column:1 / -1}
  .panel-tab__desc{display:none}
  .panel-tab__title{font-family:var(--font-sans);font-size:var(--text-sm);
    font-weight:var(--weight-medium);color:var(--text-strong);line-height:1.3;
    /* "announcement" is one unbreakable 12-character word; on the narrowest
       phones it must give rather than run past the chip's border. */
    overflow-wrap:break-word}
  .panel-tab__icon{padding-top:0}
  .panel-tab__icon .ik-icon{width:17px;height:17px}
  /* The caption changes as you tap, so it belongs above the screenshot it
     describes — otherwise the thing that just changed is off-screen. */
  .panel-caption{order:-1}
}
/* Two chips to a row leaves ~140px on the narrowest handsets; the padding and
   type step down so the longest label still fits inside its border. */
@media (max-width:380px){
  .panel-tab{padding-left:10px;padding-right:10px;gap:6px}
  .panel-tab__title{font-size:13px}
}
/* Narrower still, and the icon is what costs "announcement" a whole line.
   The label is the thing being chosen, so the icon goes first. */
@media (max-width:345px){
  .panel-tab__icon{display:none}
}

/* ---------- businesses: sticky part navigation ---------- */
.partnav{position:sticky;top:var(--header-h);z-index:15;background:var(--surface-card);
  border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);box-shadow:var(--shadow-sm)}
.partnav__row{display:flex;gap:var(--space-5);padding-top:var(--space-3);padding-bottom:var(--space-3);font-size:var(--text-sm)}
.partnav__item{display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  color:var(--text-strong);font-weight:var(--weight-semibold)}
.partnav__item:hover{color:var(--text-strong)}
.partnav__num{flex:0 0 auto;background:var(--green-700);color:var(--cream-50);border-radius:var(--radius-sm);
  padding:2px 7px;font-size:12px;font-weight:var(--weight-semibold);
  transition:background var(--dur-fast) var(--ease-standard)}
.partnav__label{display:inline-block;white-space:nowrap}

/* On a phone all five labels take three lines and a third of the screen. Only
   the section you are actually in spells itself out; the rest hold their place
   as numerals, and tapping one expands it as it scrolls you there. */
@media (max-width:860px){
  .partnav__row{gap:var(--space-1);justify-content:space-between;align-items:center;
    padding-top:10px;padding-bottom:10px}
  .partnav__item{gap:0;min-height:36px;min-width:0}
  .partnav__item.is-current{gap:7px}
  .partnav__item.is-current .partnav__num{background:var(--green-900)}
  .partnav__label{max-width:0;opacity:0;overflow:hidden;
    transition:max-width var(--dur-slow) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
  .partnav__item.is-current .partnav__label{max-width:190px;opacity:1}
}

/* small phone frame (four-up "look inside" row) */
.phone-sm{width:100%;max-width:220px;aspect-ratio:9/19;border-radius:26px;background:#000;overflow:hidden;padding:8px;box-shadow:var(--shadow-sm)}
.phone-sm .phone__screen{border-radius:19px;background:var(--surface-page)}
.phone-sm .phone__statusbar{height:26px;padding:0 16px;font-size:10px}
.phone-sm .phone__notch{top:7px;width:44px;height:12px;border-radius:6px}
.phone-sm .phone__status-icons{gap:3px}
.phone-sm .phone__slide{top:26px}
.phone-dots--sm button{width:22px;height:34px}
.phone-dots--sm button::after{width:6px;height:6px}
.phone-nav--sm .phone-arrow{width:34px;height:34px}
.phone-nav--sm .phone-arrow .ik-icon{width:16px;height:16px}

/* ---------- misc ---------- */
/* Anchor jumps must clear whatever is stuck above them — the header, plus the
   part-nav on businesses.html. Both publish their live height. */
section[id]{scroll-margin-top:calc(var(--header-h) + var(--partnav-h,0px) + var(--space-2))}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.placeholder-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-sunken);color:var(--text-subtle);font-size:var(--text-caption);text-align:center;padding:var(--space-3)}

@media (max-width:640px){
  .phone{border-radius:32px}
}