/* ==========================================================================
   Five Point — design system for 5 Stars Garage Doors
   Every colour used anywhere on the site is declared in :root below.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
ul[class],ol[class]{list-style:none;padding:0;}
img,svg{max-width:100%;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;}

:root{
  /* --- surfaces ---------------------------------------------------------- */
  --ink:#20272A;          /* warm charcoal, sampled from the logo roofline   */
  --ink-900:#1A2023;
  --ink-800:#272F33;      /* raised panel on dark                            */
  --ink-700:#333D42;
  --slate-500:#5C696F;
  --slate-400:#7C8A91;
  --slate-300:#A8B4BA;
  --slate-200:#CDD5D9;
  --bone:#F7F5F0;         /* warm light ground — Arizona sun-bleached        */
  --bone-2:#EFEBE3;
  --white:#FFFFFF;

  /* --- brand ------------------------------------------------------------- */
  --gold:#F7BE18;         /* logo gold — FILLS ONLY, never text on light     */
  --gold-dk:#DFA400;
  --gold-lt:#FFD556;
  --alert:#D93A2B;        /* emergency badge only                            */
  --ok:#1C8C5A;

  /* --- text -------------------------------------------------------------- */
  --text:#20272A;
  --text-soft:#525F65;
  --text-invert:#FFFFFF;
  --text-invert-soft:#B3BEC4;

  /* --- lines ------------------------------------------------------------- */
  --line:#E0DAD0;
  --line-dark:#374247;

  /* --- shape ------------------------------------------------------------- */
  --r-sm:6px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(32,39,42,.06),0 2px 8px rgba(32,39,42,.06);
  --shadow-2:0 4px 14px rgba(32,39,42,.10),0 14px 34px rgba(32,39,42,.10);
  --shadow-3:0 20px 54px rgba(32,39,42,.20);

  --wrap:1160px;
  --gut:20px;
  --bar-h:0px;            /* raised on mobile to clear the sticky action bar */

  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body{
  font-family:var(--body);font-size:17px;line-height:1.65;
  color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--bar-h);
}
h1,h2,h3{
  font-family:var(--display);font-weight:800;line-height:1.06;
  letter-spacing:-.02em;color:var(--text);
}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);}
h2{font-size:clamp(1.65rem,3.6vw,2.5rem);}
h3{font-size:clamp(1.16rem,2vw,1.4rem);letter-spacing:-.01em;}
h4{font-size:1.05rem;font-family:var(--body);font-weight:700;letter-spacing:0;line-height:1.4;}
p{margin:0 0 1.05rem;}
p:last-child{margin-bottom:0;}
a{color:inherit;text-decoration-color:rgba(32,39,42,.28);text-underline-offset:3px;}
a:hover{text-decoration-color:currentColor;}

.eyebrow{
  font-family:var(--display);font-weight:700;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-500);
  display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;
}
.on-dark .eyebrow{color:var(--gold);}

/* The five-star rule — the signature section marker, straight off the logo. */
.stars{display:inline-flex;gap:2px;flex:none;}
.stars svg{width:14px;height:14px;fill:var(--gold);}

.lede{font-size:1.12rem;color:var(--text-soft);max-width:64ch;}
.on-dark .lede{color:var(--text-invert-soft);}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap{width:min(var(--wrap),100% - (var(--gut) * 2));margin-inline:auto;}
.sec{padding:clamp(3rem,7vw,5.5rem) 0;}
.sec-tight{padding:clamp(2.2rem,4vw,3.2rem) 0;}
.on-dark{background:var(--ink);color:var(--text-invert);}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--text-invert);}
.on-bone{background:var(--bone);}
.sec-head{max-width:70ch;margin-bottom:2.4rem;}

.grid{display:grid;gap:1.1rem;}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.g-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.g-4{grid-template-columns:repeat(auto-fit,minmax(214px,1fr));}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--text-invert);padding:.8rem 1.2rem;
  border-radius:0 0 var(--r-md) 0;font-weight:700;
}
.skip:focus{left:0;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;}

/* --------------------------------------------------------------------------
   Buttons — gold is a fill with ink text; never gold text on a light ground.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:800;font-size:1rem;
  padding:.92rem 1.5rem;border-radius:var(--r-pill);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,background .18s ease;
  line-height:1;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:var(--shadow-1);}
.btn-gold:hover{background:var(--gold-lt);box-shadow:var(--shadow-2);}
.btn-ink{background:var(--ink);color:var(--text-invert);}
.btn-ink:hover{background:var(--ink-700);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--slate-300);}
.btn-ghost:hover{border-color:var(--ink);background:var(--white);}
.on-dark .btn-ghost{color:var(--text-invert);border-color:var(--line-dark);}
.on-dark .btn-ghost:hover{border-color:var(--gold);background:rgba(247,190,24,.08);}
.btn-lg{font-size:1.06rem;padding:1.05rem 1.9rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem;}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:1.2rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none;}
.brand img{height:46px;width:auto;}
.nav{display:flex;align-items:center;gap:1.5rem;margin-left:auto;}
.nav a{
  font-family:var(--display);font-weight:700;font-size:1rem;
  text-decoration:none;color:var(--text);padding:.4rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--gold);transform:scaleX(0);transition:transform .16s ease;
  border-radius:2px;
}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1);}
.hdr-tel{
  font-family:var(--display);font-weight:900;font-size:1.2rem;
  text-decoration:none;display:flex;align-items:center;gap:.45rem;white-space:nowrap;
}
.hdr-actions{display:flex;align-items:center;gap:.85rem;margin-left:.4rem;}

.burger{
  display:none;background:none;border:0;padding:.5rem;cursor:pointer;
  margin-left:auto;
}
.burger span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;}
.burger span+span{margin-top:6px;}

/* Sub-navigation for the services dropdown */
.has-sub{position:relative;}
.sub{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);padding:.5rem;min-width:266px;
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.sub a{display:block;padding:.6rem .8rem;border-radius:var(--r-sm);font-size:.96rem;font-weight:600;}
.sub a::after{display:none;}
.sub a:hover{background:var(--bone);}

@media (max-width:980px){
  .nav,.hdr-actions .btn{display:none;}
  .burger{display:block;}
  .hdr-in{gap:.7rem;}
  .brand img{height:40px;}
  .hdr-tel{font-size:1.05rem;}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--text-invert);
  padding:1.4rem var(--gut) 2rem;overflow-y:auto;
  transform:translateX(100%);transition:transform .24s ease;
}
.drawer[data-open="true"]{transform:translateX(0);}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem;}
.drawer-close{background:none;border:0;color:var(--text-invert);font-size:2rem;line-height:1;cursor:pointer;padding:.2rem .6rem;}
.drawer nav a{
  display:block;padding:.85rem 0;border-bottom:1px solid var(--line-dark);
  font-family:var(--display);font-weight:700;font-size:1.12rem;text-decoration:none;
}
.drawer .btn{width:100%;margin-top:1.2rem;}
.drawer h4{color:var(--gold);margin:1.5rem 0 .3rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;}

/* --------------------------------------------------------------------------
   Hero — the gable angle on the lower edge is the signature device.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;background:var(--ink);color:var(--text-invert);
  padding:clamp(3rem,7vw,5.4rem) 0 clamp(4rem,8vw,6.4rem);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,4.4vw,58px);
  background:var(--white);
  clip-path:polygon(0 100%,50% 0,100% 100%);
}
.hero.on-bone-next::after{background:var(--bone);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;}
.hero h1{color:var(--text-invert);}
.hero .lede{margin-top:1.1rem;}
.hero-media{position:relative;}
.hero-media img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);aspect-ratio:4/3;
}
.badge-emergency{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--alert);
  color:var(--white);font-family:var(--display);font-weight:800;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.44rem .9rem;
  border-radius:var(--r-pill);margin-bottom:1rem;white-space:nowrap;
}
/* Without an explicit size the inline SVG inherits the flex row's height and
   inflates the whole pill. */
.badge-emergency svg{width:16px;height:16px;flex:none;stroke:currentColor;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1;}
  .hero-media img{aspect-ratio:16/10;}
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.trust{background:var(--gold);color:var(--ink);}
.trust-in{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.4rem;
  padding:1rem 0;text-align:center;
}
.trust-item{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:800;font-size:.98rem;
}
.trust-item svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2.4;flex:none;}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease;
  text-decoration:none;height:100%;
}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--slate-200);}
.card h3{margin-bottom:.5rem;}
.card p{color:var(--text-soft);font-size:.99rem;}
.card .more{
  margin-top:auto;padding-top:1rem;font-family:var(--display);font-weight:800;
  font-size:.94rem;display:inline-flex;align-items:center;gap:.4rem;
}
a.card:hover .more{gap:.66rem;}
.card-ico{
  width:46px;height:46px;border-radius:var(--r-md);background:var(--gold);
  display:grid;place-items:center;margin-bottom:1rem;flex:none;
}
.card-ico svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2;}
.on-dark .card{background:var(--ink-800);border-color:var(--line-dark);}
.on-dark .card p{color:var(--text-invert-soft);}

/* Numbered process steps */
.step{position:relative;padding-left:3.5rem;}
.step-n{
  position:absolute;left:0;top:0;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--gold);color:var(--ink);display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:1.05rem;
}
.step h3{margin-bottom:.35rem;}
.step p{color:var(--text-soft);}
.on-dark .step p{color:var(--text-invert-soft);}

/* Stats */
.stat{text-align:center;}
.stat b{
  font-family:var(--display);font-weight:900;display:block;
  font-size:clamp(2.3rem,5vw,3.3rem);line-height:1;color:var(--gold);
}
.stat span{font-size:.94rem;color:var(--text-invert-soft);letter-spacing:.02em;}

/* --------------------------------------------------------------------------
   Prose — the migrated body copy
   -------------------------------------------------------------------------- */
.prose{max-width:74ch;}
.prose h2{margin:2.4rem 0 .9rem;}
.prose h3{margin:1.9rem 0 .6rem;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose p{color:var(--text-soft);}
.prose ul{margin:0 0 1.15rem;padding-left:1.3rem;list-style:none;}
.prose ul li{position:relative;margin-bottom:.55rem;color:var(--text-soft);}
.prose ul li::before{
  content:"";position:absolute;left:-1.3rem;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--gold);
}
.prose ol{margin:0 0 1.15rem;padding-left:1.4rem;}
.prose ol li{margin-bottom:.55rem;color:var(--text-soft);}
.prose a{font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;}
.prose strong,.prose b{color:var(--text);font-weight:700;}

.prose-wide{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(1.6rem,4vw,3.2rem);align-items:start;}
@media (max-width:960px){.prose-wide{grid-template-columns:1fr;}}

.aside-card{
  background:var(--ink);color:var(--text-invert);border-radius:var(--r-lg);
  padding:1.6rem;position:sticky;top:96px;
}
.aside-card h3{color:var(--text-invert);margin-bottom:.5rem;}
.aside-card p{color:var(--text-invert-soft);font-size:.97rem;}
.aside-card .btn{width:100%;margin-top:.9rem;}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.crumbs{padding:.9rem 0;font-size:.88rem;color:var(--text-soft);}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--slate-300);}
.crumbs li:last-child::after{display:none;}
.crumbs a{text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbs [aria-current=page]{color:var(--text);font-weight:600;}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{max-width:80ch;}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--white);margin-bottom:.7rem;overflow:hidden;
}
.faq details[open]{border-color:var(--slate-300);box-shadow:var(--shadow-1);}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem;
  font-family:var(--display);font-weight:700;font-size:1.04rem;position:relative;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:1.2rem;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--slate-500);border-bottom:2.5px solid var(--slate-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq .faq-body{padding:0 1.2rem 1.15rem;color:var(--text-soft);}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band{background:var(--gold);color:var(--ink);}
.cta-band .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem;padding:clamp(2rem,4vw,3rem) 0;
}
.cta-band h2{max-width:22ch;}
.cta-band p{color:rgba(32,39,42,.78);margin-top:.4rem;max-width:46ch;}
.cta-band .btn-row{margin-top:0;}

/* --------------------------------------------------------------------------
   Locations list
   -------------------------------------------------------------------------- */
.city-list{display:flex;flex-wrap:wrap;gap:.55rem;}
.city-list a,.city-list span{
  display:inline-block;padding:.5rem 1rem;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);font-size:.95rem;
  font-weight:600;text-decoration:none;
}
.city-list a:hover{border-color:var(--ink);}
.city-list span{color:var(--text-soft);background:transparent;border-style:dashed;}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ftr{background:var(--ink-900);color:var(--text-invert-soft);padding:3.4rem 0 1.6rem;}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;}
.ftr h4{
  font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);margin-bottom:.9rem;
}
.ftr a{text-decoration:none;}
.ftr a:hover{color:var(--gold);}
.ftr ul li{margin-bottom:.5rem;font-size:.96rem;}
.ftr img{height:48px;width:auto;margin-bottom:.9rem;}
.ftr-tel{
  font-family:var(--display);font-weight:900;font-size:1.32rem;color:var(--white);
  display:inline-block;margin:.2rem 0 .5rem;
}
.ftr-bot{
  border-top:1px solid var(--line-dark);margin-top:2.4rem;padding-top:1.3rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:.87rem;
}
@media (max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr;}}

/* --------------------------------------------------------------------------
   Sticky mobile action bar — the highest-converting element on a trade site.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  :root{--bar-h:64px;}
  .mobile-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;
    grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);
    box-shadow:0 -6px 20px rgba(32,39,42,.18);
  }
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:1.05rem .5rem;font-family:var(--display);font-weight:800;
    font-size:1.02rem;text-decoration:none;
  }
  .mobile-bar .mb-call{background:var(--ink);color:var(--text-invert);}
  .mobile-bar .mb-book{background:var(--gold);color:var(--ink);}
  .mobile-bar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;}
  .aside-card{position:static;}
}
@media (min-width:821px){.mobile-bar{display:none;}}

/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */
.figure{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);}
.figure img{width:100%;height:auto;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ==========================================================================
   Booking form
   ========================================================================== */
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start;}
@media (max-width:920px){.form-wrap{grid-template-columns:1fr;}}

.form-points{margin:1.4rem 0;display:grid;gap:.6rem;}
.form-points li{display:flex;align-items:center;gap:.6rem;font-weight:600;}
.form-points svg{width:20px;height:20px;flex:none;stroke:var(--ink);
  background:var(--gold);border-radius:50%;padding:3px;}
.form-callout{margin-top:1.2rem;font-size:1.02rem;color:var(--text-soft);}
.form-callout a{font-family:var(--display);font-weight:900;font-size:1.16rem;
  text-decoration:none;color:var(--text);}

.lead-form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--shadow-1);
}
.fld{margin-bottom:1rem;}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media (max-width:560px){.fld-row{grid-template-columns:1fr;}}

.lead-form label,.lead-form legend{
  display:block;font-weight:700;font-size:.93rem;margin-bottom:.35rem;
}
.req{color:var(--alert);}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;padding:.78rem .9rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:var(--white);font-size:1rem;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(247,190,24,.35);
}
.lead-form input[aria-invalid="true"]{border-color:var(--alert);}
.lead-form textarea{resize:vertical;}

.err{color:var(--alert);font-size:.85rem;margin:.3rem 0 0;min-height:0;}
.err:empty{display:none;}
.hint{color:var(--text-soft);font-size:.85rem;margin:.35rem 0 0;}
.hint:empty{display:none;}

.urgency{border:0;padding:0;margin-bottom:1rem;}
.radios{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
@media (max-width:560px){.radios{grid-template-columns:1fr;}}
.radio{position:relative;margin:0;}
.radio input{position:absolute;opacity:0;width:0;height:0;}
.radio span{
  display:block;padding:.7rem .8rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;font-weight:700;font-size:.95rem;
  transition:border-color .14s ease,background .14s ease;
}
.radio small{display:block;font-weight:500;font-size:.82rem;color:var(--text-soft);margin-top:.1rem;}
.radio input:checked+span{border-color:var(--ink);background:var(--gold);}
.radio input:checked+span small{color:rgba(32,39,42,.75);}
.radio input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px;}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.lf-submit{width:100%;margin-top:.4rem;}
.lf-submit[disabled]{opacity:.65;cursor:progress;}
.lf-status{margin:.9rem 0 0;font-weight:600;}
.lf-status:empty{display:none;}
.lf-status[data-state="ok"]{color:var(--ok);}
.lf-status[data-state="error"]{color:var(--alert);}
.lf-small{margin-top:.8rem;font-size:.84rem;color:var(--text-soft);}