/* ==========================================================================
   Dropwebs Design System v6 - single stylesheet.
   Authored from DROPWEBS-DESIGN.md. Tokens, components, and app surfaces all
   follow the same language: confident, quiet, one coral accent, deep whitespace.
   ========================================================================== */

:root{
  /* surfaces - matched to dropwebs.com */
  --dark:#202020; --dark-2:#2A2A2A; --dark-3:#333333;
  --grey:#F1F1F1; --grey-2:#E8E8E8; --grey-3:#202020; --white:#FFFFFF;
  /* accent */
  --coral:#E0512B; --coral-lo:#F4794F; --coral-hi:#A8360F;
  --coral-btn:#B93E19; --coral-wash:rgba(224,81,43,.12);
  /* text - full-strength on both grounds, never washed-out grey */
  --fg:#202020; --fg-mute:#202020; --fg-soft:#202020;
  --inv:#F4EFEA; --inv-m:#F4EFEA; --inv-s:#F4EFEA;
  /* lines */
  --line:rgba(32,32,32,.08); --line-2:rgba(32,32,32,.14);
  --line-inv:rgba(255,255,255,.12); --line-inv-2:rgba(255,255,255,.2);
  /* card surfaces (remapped on dark) */
  --card:#FFFFFF; --card-line:var(--line); --card-well:rgba(32,32,32,.04);
  /* gradient duos */
  --d1a:#E0512B; --d1b:#6B1D0B; --d2a:#C98A2E; --d2b:#5A3609;
  --d3a:#B94A32; --d3b:#4A1409; --d4a:#A96048; --d4b:#3F1A11;
  --d5a:#D4713F; --d5b:#5C2812; --d6a:#8E5340; --d6b:#33150C;
  /* type */
  --display:'Nata Sans','Albert Sans',Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Albert Sans',Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --tr-hero:-.02em; --tr-h:-.015em; --tr-h3:-.008em;
  --tr-body:.004em; --tr-caps:.12em; --tr-brand:.07em;
  /* shape */
  --r-sm:.7rem; --r-md:1.1rem; --r-lg:1.6rem; --r-xl:2.2rem; --r-pill:999px;
  /* elevation */
  --sh-1:0 0 0 1px rgba(32,32,32,.05),0 8px 24px rgba(32,32,32,.07);
  --sh-2:0 0 0 1px rgba(32,32,32,.05),0 14px 32px rgba(32,32,32,.09);
  --sh-3:0 0 0 1px rgba(32,32,32,.06),0 18px 40px rgba(32,32,32,.11);
  --sh-hover:0 0 0 1px rgba(32,32,32,.08),0 16px 36px rgba(32,32,32,.13);
  --sh-coral:0 10px 28px rgba(224,81,43,.22);
  /* motion */
  --e:cubic-bezier(.22,1,.36,1); --e-s:cubic-bezier(.4,0,.2,1);
  --t1:200ms; --t2:420ms; --t3:760ms; --t4:1150ms;
  /* layout */
  --gutter:clamp(1.25rem,4vw,3rem); --maxw:80rem;
}

/* -- reset -- */
*,*::before,*::after{ box-sizing:border-box }
*{ margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:var(--body); font-size:1rem; line-height:1.62; letter-spacing:var(--tr-body);
  color:var(--fg); background:var(--white); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit }
input,select,textarea{ font:inherit; color:inherit }
ul{ list-style:none; padding:0 }

/* -- headings -- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; text-wrap:balance }
h1{ font-size:clamp(2.5rem,5.6vw,5rem); line-height:1.04; letter-spacing:var(--tr-hero) }
h2{ font-size:clamp(1.95rem,3.9vw,3.4rem); line-height:1.08; letter-spacing:var(--tr-h) }
h3{ font-size:clamp(1.2rem,1.7vw,1.6rem); line-height:1.24; letter-spacing:var(--tr-h3) }
h4{ font-size:clamp(1rem,1.15vw,1.2rem); line-height:1.3; letter-spacing:var(--tr-h3) }
.t-xl{ font-family:var(--display); font-weight:800; font-size:clamp(2.3rem,5vw,4.4rem);
       line-height:1.05; letter-spacing:var(--tr-hero) }
.lede{ font-size:clamp(1.0625rem,1.2vw,1.1875rem); line-height:1.64; text-wrap:pretty;
       color:var(--fg-mute) }
.eyebrow{ display:inline-flex; align-items:center; padding:.34rem .78rem; margin-bottom:.85rem;
  border:1px solid rgba(224,81,43,.4); border-radius:var(--r-pill); background:transparent;
  font-family:var(--body); font-weight:700; font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral-hi); line-height:1.2; width:max-content }
h1,h2,h3,h4{ overflow-wrap:break-word }
h1{ padding-bottom:.1em } h2{ padding-bottom:.08em }

/* -- layout -- */
.wrap{ width:min(100% - (var(--gutter)*2),var(--maxw)); margin-inline:auto }
.sec{ padding-top:5.25rem; padding-bottom:5.25rem; position:relative; isolation:isolate }
.sec--tight{ padding-top:3.75rem; padding-bottom:3.75rem }
#main > .sec:first-child{
  padding-top:clamp(7.75rem, 12vh, 9.5rem);
  padding-bottom:5.5rem;
}
.bg-white{ background:var(--white); color:var(--fg) }
.bg-grey{ background:var(--grey); color:var(--fg) }
.bg-grey-2{ background:var(--grey-2); color:var(--fg) }
.bg-dark{ background:var(--dark); color:var(--inv) }
.bg-dark-2{ background:var(--dark-2); color:var(--inv) }
/* --------------------------------------------------------------------------
   Contrast model (matches dropwebs.com): dark surfaces REMAP the text tokens
   rather than force `color` on every descendant. That keeps nested light cards
   readable inside a dark section instead of inheriting white-on-white.
   -------------------------------------------------------------------------- */
.on-dark,.hero,.phero,.ftr,.e404,.side,.adminside,.admin-login,.sheet{
  --fg:var(--inv); --fg-mute:var(--inv-m); --fg-soft:var(--inv-s);
  --line:var(--line-inv); --line-2:var(--line-inv-2);
  --card:#2A2A2A; --card-line:rgba(255,255,255,.13); --card-well:rgba(0,0,0,.24);
  color:var(--inv);
}
.bg-dark-2,.bg-dark + .sec.bg-dark{ --card:#363636 }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,
.hero h1,.hero h2,.hero h3,.phero h1,.phero h2,.ftr h2{ color:#fff }
.on-dark .lede,.hero .lede,.phero .lede{ color:var(--inv-m) }
.on-dark .eyebrow,.hero .eyebrow,.phero .eyebrow,.ftr .eyebrow,.on-dark .pill{
  color:var(--coral-lo); border-color:rgba(244,121,79,.45);
}
/* --------------------------------------------------------------------------
   Islands inside a dark section.

   Two kinds exist and they must not be confused:

   a) GLASS islands (.card by default on dark) keep a translucent dark ground,
      so ALL their text - headings included - stays light.
   b) LIGHT islands (.price, .tool-grid a, .card--light) paint an
      opaque white ground, so their text flips to dark.

   Getting this backwards is what put near-black h4 headings on a dark card.
   -------------------------------------------------------------------------- */
.on-dark .price:not(.price--hot),
.on-dark .tool-grid a,
.on-dark .card--light,
.admin-login .admin-login__card{
  --fg:#202020; --fg-mute:#202020; --fg-soft:#202020;
  --line:rgba(32,32,32,.08); --line-2:rgba(32,32,32,.14);
  color:var(--fg);
}
.on-dark .price:not(.price--hot) h2,.on-dark .price:not(.price--hot) h3,
.on-dark .tool-grid b,
.on-dark .card--light h2,.on-dark .card--light h3,.on-dark .card--light h4,
.admin-login .admin-login__card b,
.admin-login .admin-login__card label span,
.admin-login .admin-login__card input{
  color:var(--dark);
}
/* Glass cards: every heading level stays light on the dark ground. */
.on-dark .card:not(.card--light) h2,
.on-dark .card:not(.card--light) h3,
.on-dark .card:not(.card--light) h4,
.on-dark .card:not(.card--light) h5,
.on-dark .card:not(.card--light) h6,
.on-dark .card:not(.card--light) b,
.on-dark .card:not(.card--light) strong{ color:#fff }
.bg-white,.bg-grey,.bg-grey-2{ color:var(--fg) }

.cols{ display:grid; gap:2rem }
.cols--2{ grid-template-columns:1fr 1fr }
.cols--40-60{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) }
.cols--60-40{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem }
.stack{ display:flex; flex-direction:column }
.gap-1{ gap:.5rem } .gap-2{ gap:1rem } .gap-3{ gap:1.5rem } .gap-4{ gap:2rem }
.flex{ display:flex } .items-center{ align-items:center } .justify-between{ justify-content:space-between }
.flex-wrap{ flex-wrap:wrap } .ml-auto{ margin-left:auto }
.mt-1{ margin-top:.5rem } .mt-2{ margin-top:1rem } .mt-3{ margin-top:1.5rem } .mt-4{ margin-top:2rem }
.mb-2{ margin-bottom:1rem } .mb-3{ margin-bottom:1.5rem }
.text-mute{ color:var(--fg-mute) } .text-soft{ color:var(--fg-soft) }

.head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
       gap:2rem; margin-bottom:clamp(2rem,4vw,3.5rem) }
.head__intro{ flex:1 1 30rem; max-width:48rem }

/* -- skip link -- */
.skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--dark); color:#fff;
       padding:.75rem 1.25rem; border-radius:0 0 var(--r-md) 0 }
.skip:focus{ left:0 }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px }

/* -- buttons -- */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:3.05rem;
  padding:.85rem 1.7rem; font-family:var(--body); font-weight:700; font-size:.9375rem;
  border-radius:var(--r-pill); white-space:nowrap; position:relative; overflow:hidden;
  transition:background var(--t1) var(--e-s),color var(--t1),transform var(--t2) var(--e),box-shadow var(--t2) }
.btn:active{ transform:scale(.985) }
.btn--sm{ min-height:2.55rem; padding:.55rem 1.15rem; font-size:.8125rem }
.btn--lg{ min-height:3.5rem; padding:1rem 2rem; font-size:1rem }
.btn--primary{ background:var(--coral-btn); color:#fff }
.btn--primary:hover{ background:#8E2A0B; box-shadow:var(--sh-coral); transform:translateY(-2px) }
.btn--primary::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.26),transparent 68%);
  transform:translateX(-130%); transition:transform var(--t3) var(--e) }
.btn--primary:hover::after{ transform:translateX(130%) }
.btn--dark{ background:var(--dark); color:#fff }
.btn--dark:hover{ background:var(--dark-3); box-shadow:var(--sh-2); transform:translateY(-2px) }
.btn--light{ background:#fff; color:var(--dark); box-shadow:var(--sh-1) }
.btn--light:hover{ background:var(--coral-btn); color:#fff; transform:translateY(-2px) }
.btn--line{ border:1.5px solid var(--line-2); background:transparent; color:var(--dark) }
.btn--line:hover{ background:var(--dark); color:#fff; transform:translateY(-2px) }
.on-dark .btn--line,.hero .btn--line,.phero .btn--line,.ftr .btn--line{
  background:transparent; border-color:rgba(255,255,255,.32); color:#fff }
.on-dark .btn--line:hover,.hero .btn--line:hover,.phero .btn--line:hover,.ftr .btn--line:hover{
  background:var(--coral-btn); border-color:var(--coral-btn); color:#fff }
/* Only genuinely light islands keep the dark-on-light button. */
.on-dark .card--light .btn--line{ border-color:var(--line-2); color:var(--dark) }
.on-dark .card--light .btn--line:hover{ background:var(--dark); border-color:var(--dark); color:#fff }
.btn--primary{ background:var(--coral-btn); color:#fff; border-color:var(--coral-btn) }
.btn--primary:hover{ background:var(--coral-hi); border-color:var(--coral-hi); color:#fff;
  box-shadow:var(--sh-coral); transform:translateY(-2px) }
.btn--block{ width:100% }
.btn[disabled]{ opacity:.5; cursor:not-allowed }

.tlink{ position:relative; display:inline-block; font-weight:700; font-size:.9375rem; padding-bottom:.4rem }
.tlink::before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:currentColor; opacity:.18 }
.tlink::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--coral);
               transform:scaleX(0); transform-origin:left; transition:transform var(--t2) var(--e) }
.tlink:hover::after{ transform:scaleX(1) }

/* -- header (dropwebs.com pattern: floating pill over dark hero) -- */
.page-public{ overflow-x:hidden }
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:.65rem var(--gutter); pointer-events:none;
  background:transparent;
  transition:padding var(--t2) var(--e);
}
.hdr > *{ pointer-events:auto }
.hdr.is-stuck{ padding:.4rem var(--gutter) }
.hdr__bar{
  display:flex; align-items:center; gap:1rem;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:.5rem .5rem .5rem 1.45rem;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  box-shadow:var(--sh-1);
  transition:width var(--t3) var(--e), max-width var(--t3) var(--e), padding var(--t2) var(--e),
             background var(--t2), box-shadow var(--t2), border-color var(--t2);
}
.hdr.is-stuck .hdr__bar{
  width:min(100%,66rem); max-width:66rem;
  padding:.38rem .42rem .38rem 1.2rem;
  background:rgba(255,255,255,.96);
  border:1px solid var(--coral);
  box-shadow:var(--sh-2), 0 0 0 1px rgba(224,81,43,.12);
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800;
        font-size:1.05rem; letter-spacing:var(--tr-brand); color:var(--dark) }
.brand__mark{ width:1.35rem; height:1.35rem; border-radius:.42rem; object-fit:cover;
  background:linear-gradient(150deg,var(--coral),#6B1D0B) }
.hdr__nav{ display:flex; align-items:center; gap:.25rem; margin-left:auto }
.hdr__nav a.navitem,
.hdr__nav .nav__drop-btn{
  padding:.55rem .9rem; border-radius:var(--r-pill); font-weight:700; font-size:.9rem;
  color:var(--fg-mute); transition:background var(--t1),color var(--t1); background:transparent; border:0; cursor:pointer; font:inherit
}
.hdr__nav a.navitem:hover,
.hdr__nav .nav__drop-btn:hover{ background:var(--grey); color:var(--dark) }
.hdr__nav a.navitem.is-active{ color:var(--dark) }
.hdr__burger{
  display:none; width:2.8rem; height:2.8rem; border-radius:var(--r-pill); background:#202020;
  place-items:center; margin-left:auto; border:0; cursor:pointer; flex-shrink:0
}
.hdr__burger span{ display:block; width:18px; height:2px; background:#fff; position:relative; border-radius:1px }
.hdr__burger span::before,.hdr__burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; border-radius:1px }
.hdr__burger span::before{ top:-6px } .hdr__burger span::after{ top:6px }
.hdr__burger:hover{ background:#000 }

/* Tools dropdown */
.nav__drop{ position:relative }
.nav__panel{
  position:absolute; top:calc(100% + .75rem); right:0; width:min(92vw,40rem); padding:1.2rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3);
  display:grid; grid-template-columns:1fr 1fr; gap:.3rem; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-10px); transform-origin:top right;
  transition:opacity var(--t2) var(--e), transform var(--t2) var(--e), visibility 0s linear var(--t2);
}
.nav__drop:hover .nav__panel,
.nav__drop:focus-within .nav__panel,
.nav__drop.is-open .nav__panel{
  opacity:1; visibility:visible; transform:none; transition-delay:0s
}
.nav__panel a{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:.1rem .65rem;
  padding:.75rem .85rem; border-radius:var(--r-md); color:var(--fg); transition:background var(--t1)
}
.nav__panel a:hover{ background:var(--grey) }
.nav__panel a:hover .nav__panel-t{ color:var(--coral-hi) }
.nav__panel-n{ grid-row:1 / span 2; font-size:.7rem; font-weight:700; letter-spacing:var(--tr-caps);
  text-transform:uppercase; color:var(--coral-hi); padding-top:.2rem }
.nav__panel-t{ font-family:var(--display); font-weight:800; font-size:.95rem; letter-spacing:var(--tr-h3); color:var(--fg) }
.nav__panel-d{ font-size:.78rem; color:var(--fg-mute); line-height:1.4; grid-column:2 }

/* mobile sheet */
.sheet{ position:fixed; inset:0; z-index:70; background:var(--dark); color:#fff; padding:1.5rem var(--gutter) 2.5rem;
  transform:translateY(-105%); transition:transform var(--t3) var(--e); display:flex; flex-direction:column;
  overflow:auto; -webkit-overflow-scrolling:touch }
.sheet.is-open{ transform:none }
.sheet__nav{ display:flex; flex-direction:column; gap:.35rem; margin-top:2.5rem }
.sheet__nav a{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,6vw,2.2rem); padding:.45rem 0; color:#fff }
.sheet__close{ position:absolute; top:1.25rem; right:var(--gutter); width:2.8rem; height:2.8rem;
  border-radius:var(--r-pill); background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; font-size:1.5rem; border:0; cursor:pointer }
.sheet__tools{ margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line-inv); display:flex; flex-direction:column; gap:.35rem }
.sheet__tools a{ color:rgba(255,255,255,.82); font-weight:600; font-size:1rem; padding:.35rem 0 }
.sheet__tools a:hover{ color:#fff }

/* -- cards -- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
       padding:1.75rem; transition:transform var(--t2) var(--e),box-shadow var(--t2) }
.card--pad-lg{ padding:2.25rem }
.card:hover{ box-shadow:var(--sh-2) }
.card--lift:hover{ transform:translateY(-6px); box-shadow:var(--sh-3) }
.on-dark .card{ background:rgba(255,255,255,.06); border-color:var(--line-inv); color:#fff }
.on-dark .card .lede,.on-dark .card p{ color:var(--inv-m) }

.stat{ position:relative; overflow:hidden; min-height:13rem; border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:1.75rem; color:#fff; display:flex; flex-direction:column; justify-content:space-between }
.stat[data-duo="1"]{ background:linear-gradient(150deg,var(--d1a),var(--d1b)) }
.stat[data-duo="2"]{ background:linear-gradient(150deg,var(--d2a),var(--d2b)) }
.stat[data-duo="3"]{ background:linear-gradient(150deg,var(--d3a),var(--d3b)) }
.stat[data-duo="4"]{ background:linear-gradient(150deg,var(--d4a),var(--d4b)) }
.stat[data-duo="5"]{ background:linear-gradient(150deg,var(--d5a),var(--d5b)) }
.stat[data-duo="6"]{ background:linear-gradient(150deg,var(--d6a),var(--d6b)) }
.stat::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 15% 0%,rgba(255,255,255,.24),transparent 55%),
            radial-gradient(circle at 32% 30%,rgba(255,255,255,.28),rgba(255,255,255,.03) 52%,transparent 72%) }
.stat>*{ position:relative; z-index:1 }
.stat__client{ font-size:.8rem; font-weight:700; letter-spacing:var(--tr-caps); text-transform:uppercase; color:rgba(255,255,255,.8) }
.stat__num{ font-family:var(--display); font-weight:800; font-size:clamp(3rem,4.8vw,4.2rem); line-height:1 }
.stat__num sup{ font-size:.46em; top:-.7em; margin-left:.05em }
.stat__label{ font-size:.9375rem; color:rgba(255,255,255,.92) }

.reason{ position:relative; min-height:14rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:1.75rem;
  color:var(--fg);
  transition:transform var(--t2) var(--e),box-shadow var(--t2),border-color var(--t2) }
.reason:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:rgba(185,62,25,.35) }
.reason__n{ font-family:var(--display); font-weight:800; font-size:3.5rem; line-height:1;
  color:var(--coral-hi); opacity:.22;
  transition:color var(--t2),opacity var(--t2),transform var(--t2) var(--e) }
.reason:hover .reason__n{ color:var(--coral-btn); opacity:.9; transform:scale(1.04) }
.reason h3{ margin-top:.5rem; color:var(--fg) }
.reason p{ color:var(--fg-mute); font-size:.9375rem; margin-top:.5rem }
.reason:hover h3{ color:var(--coral-hi) }

/* -- badges / pills -- */
.badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:.26rem .6rem; border-radius:var(--r-sm);
  line-height:1.35; white-space:nowrap;
  /* Fixed colours, never inherited: a badge must read the same on any ground. */
  background:#EDEDEA; color:#3A3A38; border:1px solid rgba(32,32,32,.09) }
.badge--coral{ background:#FCEDE7; color:#96300F; border-color:rgba(150,48,15,.18) }
.badge--ok{ background:#E4F4EA; color:#166534; border-color:rgba(22,101,52,.18) }
.badge--warn{ background:#FDF0DC; color:#7C4A03; border-color:rgba(124,74,3,.2) }
.badge--danger{ background:#FCE7E2; color:#8C2410; border-color:rgba(140,36,16,.18) }
.badge--dot::before{ content:""; width:.4rem; height:.4rem; flex-shrink:0; border-radius:50%;
  background:currentColor; opacity:.9 }
.badge--rating{ background:var(--dark); color:#fff; border-color:var(--dark) }
/* On a dark ground the badges gain a subtle light backing so they stay legible. */
.on-dark .badge,.ftr .badge{ background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.3) }
.on-dark .badge--rating{ background:#fff; color:var(--dark) }

.chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1rem; border-radius:var(--r-pill);
  background:var(--grey); font-weight:700; font-size:.85rem; color:var(--fg-mute) }
.chip--dot::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--coral) }

/* -- forms -- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; padding:2rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-3) }
.form--single{ grid-template-columns:1fr }
.form--wide,.form label.wide{ grid-column:1/-1 }
.form label{ display:flex; flex-direction:column; gap:.4rem }
.form label>span{ font-size:.72rem; font-weight:700; letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--fg-mute) }
.form input,.form select,.form textarea{ min-height:3.15rem; padding:.85rem 1rem; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:var(--grey); color:var(--dark); font:inherit; width:100%;
  transition:border-color var(--t1),background var(--t1),box-shadow var(--t1) }
.form textarea{ min-height:6rem; resize:vertical; line-height:1.55 }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--coral);
  background:#fff; box-shadow:0 0 0 3px rgba(224,81,43,.14) }
.field-hint{ font-size:.8rem; color:var(--fg-soft) }
.pw-field{ position:relative; display:block }
.pw-field input{ width:100%; padding-right:3rem !important }
.pw-toggle{
  position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  width:2.35rem; height:2.35rem; border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--fg-mute); cursor:pointer;
  display:grid; place-items:center; padding:0;
}
.pw-toggle:hover,.pw-toggle.is-on{ color:var(--dark); background:var(--grey) }
.pw-toggle svg{ width:1.15rem; height:1.15rem; display:block }
.pw-toggle .eye-off{ display:none }
.pw-toggle.is-on .eye-on{ display:none }
.pw-toggle.is-on .eye-off{ display:block }
label.wide .pw-field{ margin-top:0 }
label.wide > .pw-field{ width:100% }


/* -- flash -- */
.flashwrap{ position:fixed; top:5.5rem; right:var(--gutter); z-index:70; display:flex; flex-direction:column;
  gap:.6rem; max-width:min(92vw,26rem) }
.flash{ display:flex; align-items:flex-start; gap:.75rem; padding:.9rem 1.1rem; border-radius:var(--r-md);
  background:#fff; box-shadow:var(--sh-3); border:1px solid var(--line); font-size:.92rem; animation:flashIn var(--t2) var(--e) both }
.flash--ok{ border-left:4px solid #1E6B3A }
.flash--error{ border-left:4px solid var(--coral-btn) }
.flash__x{ margin-left:auto; color:var(--fg-soft); font-size:1.1rem; line-height:1 }
@keyframes flashIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* -- tables / lists -- */
.table{ width:100%; border-collapse:collapse; font-size:.9rem }
.table th{ text-align:left; font-size:.72rem; font-weight:700; letter-spacing:var(--tr-caps);
  text-transform:uppercase; color:var(--fg-soft); padding:.75rem 1rem; border-bottom:1px solid var(--line) }
.table td{ padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle }
.table tr:last-child td{ border-bottom:none }
.table-wrap{ overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1) }

/* -- stars -- */
.stars{ display:inline-flex; gap:2px; color:var(--coral); font-size:.95rem; letter-spacing:1px }
.stars .off{ color:var(--grey-3) }

/* -- review card -- */
.review{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:1.5rem; display:flex; flex-direction:column; gap:1rem }
.review__head{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap }
.review__who{ font-family:var(--display); font-weight:800; font-size:1.05rem }
.review__meta{ font-size:.8rem; color:var(--fg-soft) }
.review__body{ color:var(--fg-mute); font-size:.95rem; line-height:1.6 }
.review__reply{ background:var(--grey); border-radius:var(--r-md); padding:1.1rem 1.2rem; border-left:3px solid var(--coral) }
.review__reply .label{ font-size:.7rem; font-weight:700; letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--coral-hi); margin-bottom:.4rem }
.review__actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }

/* -- auth / centered panel -- */
.authshell{ min-height:100vh; display:grid; place-items:center; padding:2rem var(--gutter);
  background:var(--grey) }
.authcard{ width:min(100%,26rem); background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:2.25rem }

/* -- footer -- */
.ftr{ background:var(--dark); color:var(--inv) }
.ftr__word{ width:100%; height:auto; margin-bottom:2rem }
.ftr__word text{ font-family:var(--display); font-weight:800; fill:url(#dwGrad) }
.ftr__row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center;
  border-top:1px solid var(--line-inv); padding-top:1.5rem; color:var(--inv-s); font-size:.85rem }

/* -- hero (app landing, dropwebs.com stage) -- */
.hero{
  position:relative; overflow:hidden; background:var(--dark); color:#fff;
  min-height:100svh; min-height:100vh;
  height:100svh; height:100vh;
  padding:0;
  display:flex; flex-direction:column; justify-content:center;
  box-sizing:border-box;
}
.hero__in{
  position:relative; z-index:1;
  padding-top:clamp(7.75rem,14vh,9.5rem);
  padding-bottom:clamp(2rem,5vh,3.5rem);
  flex:1; display:flex; flex-direction:column; justify-content:center;
}
.hero .lede,.hero p,.hero__lede{ color:#FFFFFF !important }
.hero h1,.hero__title{ color:#fff }
.hero__aura{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0; pointer-events:none }
.hero__aura--1{ width:38rem; height:38rem; background:var(--coral); top:18%; right:-8rem; animation:drift1 28s var(--e-s) infinite alternate }
.hero__aura--2{ width:30rem; height:30rem; background:#C98A2E; bottom:-14rem; left:-6rem; animation:drift2 34s var(--e-s) infinite alternate }
.hero__grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size:3px 3px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.hero__in{ position:relative; z-index:1 } /* superseded by fullscreen hero__in rules above */
.hero__open{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.1rem;
  font-size:.82rem; color:rgba(255,255,255,.82); font-weight:600
}
.hero__open b{ font-weight:800; letter-spacing:var(--tr-caps); text-transform:uppercase; color:#fff; font-size:.72rem }
.hero__open-dot{
  width:.55rem; height:.55rem; border-radius:50%; background:#3DDC97;
  box-shadow:0 0 0 4px rgba(61,220,151,.18); animation:pulseDot 2.2s var(--e-s) infinite
}
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 3px rgba(61,220,151,.15) } 50%{ box-shadow:0 0 0 7px rgba(61,220,151,.08) } }
.hero__tag{ display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .5rem .5rem 1rem;
  border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid var(--line-inv-2);
  font-size:.85rem; font-weight:700; color:rgba(255,255,255,.9); margin-bottom:1.25rem; backdrop-filter:blur(12px) }
.hero__tag b{ background:var(--coral-btn); color:#fff; padding:.2rem .7rem; border-radius:var(--r-pill); font-size:.72rem }
.hero__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,7.4vw,6.75rem); line-height:1.05; letter-spacing:var(--tr-hero);
  max-width:16ch;
}
.hero__title span{ display:block; overflow:hidden }
.hero__title i{
  display:inline-block; font-style:normal;
  transform:translateY(108%); opacity:0;
  animation:riseIn .95s var(--e) forwards
}
.hero__title span:nth-child(1) i{ animation-delay:.1s }
.hero__title span:nth-child(2) i{ animation-delay:.2s }
.hero__title span:nth-child(3) i{ animation-delay:.3s }
@keyframes riseIn{ to{ transform:none; opacity:1 } }
.hero__title em,.hero em{ color:var(--coral-lo); font-style:normal }
.hero__lede{
  margin-top:1.35rem; max-width:40rem;
  opacity:0; animation:fadeUp .8s var(--e) .55s forwards
}
.hero__ctas{
  margin-top:1.75rem;
  opacity:0; animation:fadeUp .8s var(--e) .7s forwards
}
.hero__ghost{ color:#fff !important; border-color:var(--line-inv-2) !important }
.hero__ghost:hover{ background:#fff !important; color:var(--dark) !important }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.hero__ticker{
  position:relative; z-index:1; margin-top:auto;
  opacity:0; animation:fadeUp .8s var(--e) .9s forwards;
  border-top:1px solid var(--line-inv); padding:1rem 0 1.25rem;
  flex-shrink:0;
}
.marq{ overflow:hidden; mask-image:linear-gradient(90deg,transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent, #000 8%, #000 92%, transparent) }
.marq__track{
  display:flex; gap:2.5rem; width:max-content;
  animation:marq 42s linear infinite; color:rgba(255,255,255,.55);
  font-weight:700; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase
}
.marq__track span{ white-space:nowrap }
@keyframes marq{ to{ transform:translateX(-50%) } }
@keyframes drift1{ to{ transform:translate(-3rem,2rem) scale(1.1) } }
@keyframes drift2{ to{ transform:translate(3rem,-2rem) scale(1.08) } }
@media (prefers-reduced-motion:reduce){
  .hero__title i,.hero__lede,.hero__ctas,.hero__ticker{ animation:none !important; opacity:1 !important; transform:none !important }
  .marq__track{ animation:none }
}

/* -- meters / progress -- */
.meter{ height:.5rem; border-radius:var(--r-pill); background:var(--grey-2); overflow:hidden }
.meter__fill{ height:100%; background:linear-gradient(90deg,var(--coral),var(--coral-btn)); border-radius:var(--r-pill) }

/* -- reveal --
   Content is NEVER hidden: opacity stays 1 and only the transform animates, so
   a failed/slow observer can never leave a blank section. Matches dropwebs.com. */
[data-rv]{ opacity:1; transform:translate3d(0,48px,0) scale(.952); transform-origin:50% 100%;
  transition:transform .88s cubic-bezier(.16,1,.3,1) }
[data-rv="up"],[data-rv="zoom"],[data-rv="blur"]{ transform:translate3d(0,48px,0) scale(.952) }
[data-rv].is-in{ transform:none; filter:none }
[data-rv-stack]>*{ opacity:1; transform:translate3d(0,34px,0) scale(.965); transform-origin:50% 100%;
  transition:transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 64ms) }
[data-rv-stack].is-in>*{ transform:none }
/* Reveal arrives from the edge you are travelling toward. */
[data-scroll="up"] [data-rv]:not(.is-in){ transform:translate3d(0,-40px,0) scale(.958); transform-origin:50% 0 }
[data-scroll="up"] [data-rv-stack]:not(.is-in)>*{ transform:translate3d(0,-28px,0) scale(.97); transform-origin:50% 0 }

/* -- pricing -- */
.plan__price{ font-family:var(--display); font-weight:800; font-size:clamp(2.2rem,3.5vw,3rem); line-height:1 }
.plan__price small{ font-family:var(--body); font-weight:700; font-size:.9rem; color:var(--fg-soft) }
.plan{ display:flex; flex-direction:column; gap:1rem; height:100%; color:var(--fg) }
.plan h3{ color:var(--fg) }
.plan .price{ color:var(--fg) }
.plan__feats{ display:flex; flex-direction:column; gap:.6rem; margin-top:.5rem }
.plan__feats li{ position:relative; padding-left:1.4rem; font-size:.9rem; color:var(--fg-mute); line-height:1.45 }
.plan__feats li::before{ content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem; border-radius:50%; background:var(--coral) }
.plan.is-featured{ outline:2px solid var(--coral); outline-offset:-2px }
.plan:hover{ transform:translateY(-4px); transition:transform var(--t2) var(--e) }

/* -- misc -- */
.divider{ height:1px; background:var(--line); margin-block:1.5rem }
.tabs{ display:inline-flex; gap:.25rem; background:var(--grey); padding:.3rem; border-radius:var(--r-pill) }
.tabs a{ padding:.5rem 1.1rem; border-radius:var(--r-pill); font-weight:700; font-size:.85rem; color:var(--fg-mute) }
.tabs a.is-active{ background:#fff; color:var(--dark); box-shadow:var(--sh-1) }
.kpi{ font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1 }
.kpi--coral{ color:var(--coral-hi) }
.muted-num{ color:var(--fg-soft) }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem }

/* -- responsive -- */
@media(max-width:1100px){
  .nav__panel{ width:min(92vw,34rem) }
}
@media(max-width:960px){
  .hdr__nav{ display:none }
  .hdr__burger{ display:grid }
  .hdr__bar{ padding:.45rem .45rem .45rem 1.1rem }
}
@media(max-width:900px){
  .cols--2,.cols--40-60,.cols--60-40{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr 1fr }
  .nav__panel{ grid-template-columns:1fr }
}
@media(max-width:800px){
  .grid-2{ grid-template-columns:1fr }
}
@media(max-width:700px){
  .grid-3{ grid-template-columns:1fr }
  .hero{
    min-height:100svh; min-height:100vh;
    height:100svh; height:100vh;
  }
  .hero__title{ font-size:clamp(2.2rem,10vw,3.2rem); max-width:none }
  .hero__in{ padding-top:7.25rem; padding-bottom:1.75rem }
  .sec{ padding-top:4.25rem; padding-bottom:4.25rem }
  #main > .sec:first-child{ padding-top:7.25rem; padding-bottom:4.5rem }
}
@media(max-width:640px){
  .form{ grid-template-columns:1fr } .form--wide,.form label.wide{ grid-column:auto }
  .flashwrap{ left:var(--gutter); right:var(--gutter); max-width:none }
  .nav__panel{ grid-template-columns:1fr }
}
@media(max-width:480px){
  .btn{ width:100% } .review__actions .btn{ width:auto }
  .hero__ctas .btn{ width:auto }
  .hero__ctas{ flex-direction:column; align-items:flex-start }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
  [data-rv]{ opacity:1 !important; transform:none !important; filter:none !important }
  [data-rv-stack]>*{ opacity:1 !important; transform:none !important }
}

/* ==========================================================================
   DROPWEBS PARITY LAYER
   Components extracted from the live dropwebs.com design system so the SaaS
   reads as the same product family: page hero, zig-zag chapters, product-shot
   frames, feature rows, accordion FAQ, step lists, footer grid, auth modal.
   ========================================================================== */

/* -- page hero (every non-home public page starts dark) -- */
.phero{ position:relative; padding:clamp(7.75rem,13vh,9.5rem) var(--gutter) 5rem;
  background:var(--dark); color:#fff; overflow:hidden }
.phero__aura{ position:absolute; top:-25%; right:-8%; width:50vmax; height:50vmax; border-radius:50%;
  filter:blur(85px); background:radial-gradient(circle,rgba(224,81,43,.36),transparent 62%);
  z-index:0; pointer-events:none }
.phero > .wrap{ position:relative; z-index:1 }
.phero h1{ margin:1.15rem 0 0; max-width:20ch; color:#fff; line-height:1.12; text-wrap:balance }
.phero h1 span{ display:block; padding-bottom:.05em }
.phero__lede{ margin-top:1rem; max-width:52ch; color:var(--inv-m);
  font-size:clamp(1.0625rem,1.3vw,1.2rem); line-height:1.62 }
.phero__cta{ margin-top:1.5rem; display:flex; gap:.75rem; flex-wrap:wrap }
.phero__facts{ margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--line-inv);
  display:flex; flex-wrap:wrap; gap:2.5rem }
.phero__facts div{ display:grid; gap:.15rem }
.phero__facts b{ font-family:var(--display); font-weight:800; font-size:1.65rem; color:var(--coral-lo); line-height:1 }
.phero__facts span{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--inv-m) }

/* -- breadcrumbs -- */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.4rem;
  font-size:.78rem; font-weight:700; color:var(--inv-m) }
.crumbs a{ color:var(--inv-m); transition:color var(--t1) }
.crumbs a:hover{ color:var(--coral-lo) }
.crumbs span[aria-hidden]{ opacity:.45 }
.bg-white .crumbs,.bg-grey .crumbs{ color:var(--fg-mute) }
.bg-white .crumbs a,.bg-grey .crumbs a{ color:var(--fg-mute) }
.bg-white .crumbs a:hover,.bg-grey .crumbs a:hover{ color:var(--coral-hi) }

/* -- section head -- */
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-bottom:1.75rem }
.head__intro{ flex:1 1 30rem; max-width:48rem }
.head__intro .eyebrow{ margin-bottom:1.15rem }
.head__intro h2{ margin-bottom:1rem }
.copy-h--lg{ margin:1.25rem 0 1.1rem }
.sec__more{ display:flex; justify-content:center; margin-top:1.75rem }
@media (max-width:768px){ .head{ align-items:flex-start } .head > .btn{ width:100% } }

/* -- product screenshot frame (browser chrome) -- */
.shot{ position:relative; display:block; border-radius:.9rem; overflow:hidden; background:#fff;
  border:1px solid rgba(32,32,32,.1); box-shadow:0 20px 44px rgba(32,32,32,.16);
  transition:box-shadow var(--t3) var(--e),transform var(--t3) var(--e) }
.shot__bar{ display:flex; align-items:center; gap:.36rem; height:1.7rem; padding-inline:.75rem;
  background:#ECECEC; border-bottom:1px solid rgba(32,32,32,.08) }
.shot__bar i{ width:.44rem; height:.44rem; border-radius:50%; background:rgba(32,32,32,.2) }
.shot__bar i:first-child{ background:var(--coral) }
.shot__img{ display:block; width:100%; height:auto; aspect-ratio:16/9.4; object-fit:cover;
  object-position:center top; transition:transform 1.2s var(--e); background:var(--grey) }
.on-dark .shot{ border-color:rgba(255,255,255,.16); box-shadow:0 22px 50px rgba(0,0,0,.5) }
.on-dark .shot__bar{ background:#171717; border-bottom-color:rgba(255,255,255,.1) }
.on-dark .shot__bar i{ background:rgba(255,255,255,.2) }
.on-dark .shot__bar i:first-child{ background:var(--coral-lo) }

/* -- feature row (image | copy, alternating) -- */
.feat-list{ display:grid; gap:1.25rem }
.feat{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr); gap:1.75rem;
  align-items:center; padding:1.15rem; border-radius:var(--r-lg);
  background:var(--card,rgba(255,255,255,.05)); border:1px solid var(--card-line,var(--line-inv));
  color:inherit; transition:background var(--t2),border-color var(--t2),transform var(--t3) var(--e) }
.feat:hover{ border-color:var(--coral); transform:translateY(-3px) }
.feat:hover .shot{ transform:translateY(-2px); box-shadow:0 26px 54px rgba(32,32,32,.22) }
.feat:hover .shot__img{ transform:scale(1.04) }
.on-dark .feat:hover .shot{ box-shadow:0 28px 60px rgba(0,0,0,.55) }
.feat--flip .feat__media{ order:2 }
.feat__media{ display:block; min-width:0 }
.feat__body{ display:grid; gap:.7rem; align-content:center; padding:.4rem .4rem .4rem 0 }
.feat__body .feat__cat{ margin:0; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral-lo) }
.feat__body h3{ color:#fff; font-size:clamp(1.45rem,2.4vw,2.05rem); line-height:1.14 }
.feat__body > p{ font-size:1.02rem; line-height:1.6; color:var(--inv-m); max-width:46ch }
.feat__go{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.35rem;
  font-weight:800; font-size:.9rem; color:#fff }
.feat__go::after{ content:""; width:1.05rem; height:1.05rem; flex-shrink:0; background:currentColor;
  transition:transform var(--t2) var(--e);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat }
.feat:hover .feat__go::after{ transform:translateX(4px) }
.feat:hover .feat__go{ color:var(--coral-lo) }
.feat__metric{ display:flex; align-items:baseline; gap:.8rem; margin-top:.45rem; padding-top:1.15rem;
  border-top:1px solid var(--line) }
.feat__metric b{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.2vw,2.7rem);
  line-height:1; letter-spacing:-.03em; color:var(--coral-lo) }
.feat__metric span{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  line-height:1.4; max-width:19ch; color:var(--fg-mute) }
/* light-ground variant */
.bg-grey .feat,.bg-white .feat{ background:#fff; border-color:var(--line); box-shadow:var(--sh-1) }
.bg-grey .feat:hover,.bg-white .feat:hover{ border-color:var(--coral) }
.bg-grey .feat__body .feat__cat,.bg-white .feat__body .feat__cat{ color:var(--coral-hi) }
.bg-grey .feat__body h3,.bg-white .feat__body h3{ color:var(--dark) }
.bg-grey .feat__body > p,.bg-white .feat__body > p{ color:var(--fg-mute) }
.bg-grey .feat__go,.bg-white .feat__go{ color:var(--dark) }
.bg-grey .feat:hover .feat__go,.bg-white .feat:hover .feat__go{ color:var(--coral-hi) }
.bg-grey .feat__metric b,.bg-white .feat__metric b{ color:var(--coral-hi) }
@media (max-width:800px){ .feat{ grid-template-columns:1fr } .feat--flip .feat__media{ order:0 } }
@media (max-width:640px){ .feat{ padding:.9rem } .feat__body{ padding:.2rem .4rem .5rem } }

/* -- chapter (gradient art | copy) -- */
.chap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:2rem;
  align-items:center; padding-block:2rem; border-top:1px solid var(--line) }
.chap:last-child{ border-bottom:1px solid var(--line) }
.chap--flip > .chap__art{ order:2 }
.chap__art{ position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; padding:1.9rem;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
  background:linear-gradient(150deg,var(--_a,var(--d1a)),var(--_b,var(--d1b))); box-shadow:var(--sh-3) }
.chap__art::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(110% 80% at 20% 0%,rgba(255,255,255,.22),transparent 55%) }
.chap__art::after{ content:""; position:absolute; right:-18%; bottom:-32%; width:70%; aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.24),transparent 68%) }
.chap__art > *{ position:relative; z-index:1 }
.chap__art small{ display:inline-flex; align-items:center; padding:.22rem .5rem;
  border:1px solid rgba(255,255,255,.4); border-radius:2px; margin-bottom:auto; width:max-content;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; color:#fff }
.chap__art b{ display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.16; letter-spacing:var(--tr-h);
  margin-top:.4rem; max-width:14ch; color:#fff; padding-bottom:.08em }
.chap__art[data-duo="1"]{ --_a:var(--d1a); --_b:var(--d1b) }
.chap__art[data-duo="2"]{ --_a:var(--d2a); --_b:var(--d2b) }
.chap__art[data-duo="3"]{ --_a:var(--d3a); --_b:var(--d3b) }
.chap__art[data-duo="4"]{ --_a:var(--d4a); --_b:var(--d4b) }
.chap__art[data-duo="5"]{ --_a:var(--d5a); --_b:var(--d5b) }
.chap__art[data-duo="6"]{ --_a:var(--d6a); --_b:var(--d6b) }
.chap__body{ display:grid; gap:1rem; align-content:start }
.chap__list{ list-style:none; padding:0; margin:.4rem 0 1rem; display:grid }
.chap__list li{ display:flex; gap:.75rem; padding:.7rem 0; border-bottom:1px solid var(--line);
  font-size:.9375rem; color:var(--fg-mute); line-height:1.55 }
.chap__list li::before{ content:""; flex-shrink:0; width:.4rem; height:.4rem; border-radius:50%;
  background:var(--coral); margin-top:.6rem }
.chap__body > .btn{ justify-self:start }
@media (max-width:900px){ .chap{ grid-template-columns:1fr } .chap--flip > .chap__art{ order:0 } }
@media (max-width:768px){ .chap__art{ aspect-ratio:16/11 } }

/* -- numbered steps -- */
.steps{ display:grid; border-top:1px solid var(--line) }
.steps article{ display:grid; grid-template-columns:3.25rem minmax(0,1fr); gap:1.25rem;
  padding:1.1rem 0; border-bottom:1px solid var(--line); align-items:start }
.steps small{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--coral-hi) }
.on-dark .steps small{ color:var(--coral-lo) }
.steps h3{ margin-bottom:.4rem; color:var(--dark) }
.on-dark .steps h3{ color:#fff }
.steps p{ font-size:.9375rem; line-height:1.62; color:var(--fg-mute); max-width:62ch }
@media (max-width:560px){ .steps article{ grid-template-columns:1fr; gap:.5rem } }

/* -- accordion / FAQ -- */
.acc{ display:grid; gap:.85rem }
.acc details{ border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(#fff 0%,#F6F6F6 62%,#EAEAEA 100%); border:1px solid rgba(32,32,32,.07);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 10px 26px rgba(32,32,32,.07);
  transition:box-shadow var(--t3) var(--e),background var(--t3) var(--e-s),border-color var(--t2) }
.acc details:hover{ box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 16px 38px rgba(32,32,32,.11);
  background:linear-gradient(#fff 0%,#F2F2F2 62%,#E4E4E4 100%); border-color:rgba(224,81,43,.4) }
.acc details[open]{ background:#fff; border-color:rgba(32,32,32,.05); box-shadow:0 18px 46px rgba(32,32,32,.11) }
.acc summary{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 1.85rem; cursor:pointer; list-style:none }
.acc summary::-webkit-details-marker{ display:none }
.acc__q{ flex:1 1 0; min-width:0; font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem,1.4vw,1.28rem); line-height:1.35; letter-spacing:var(--tr-h3); color:var(--dark) }
.acc details:hover .acc__q,.acc details[open] .acc__q{ color:var(--coral-hi) }
.acc__ic{ flex-shrink:0; width:1.5rem; height:1.5rem; display:grid; place-items:center;
  color:var(--coral-hi); transition:transform var(--t3) var(--e) }
.acc__ic svg{ width:.95rem }
.acc details[open] .acc__ic{ transform:rotate(180deg) }
.acc__body{ padding:0 1.85rem 1.7rem }
.acc__body p{ max-width:66ch; font-size:.9375rem; line-height:1.7; color:var(--fg-mute) }
.acc__body p + p{ margin-top:.75rem }
.on-dark .acc details{ background:linear-gradient(#3C3C3C 0%,#2E2E2E 62%,#252525 100%);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.34) }
.on-dark .acc details:hover{ background:linear-gradient(#474747 0%,#373737 62%,#2C2C2C 100%);
  border-color:rgba(224,81,43,.5) }
.on-dark .acc details[open]{ background:linear-gradient(#3E3E3E 0%,#2F2F2F 100%);
  border-color:rgba(224,81,43,.42) }
.on-dark .acc__q{ color:#fff }
.on-dark .acc details:hover .acc__q,.on-dark .acc details[open] .acc__q{ color:var(--coral-lo) }
.on-dark .acc__ic{ color:var(--coral-lo) }
.on-dark .acc__body p{ color:var(--inv-m) }
@media (max-width:560px){ .acc summary{ padding:1.2rem 1.3rem } .acc__body{ padding:0 1.3rem 1.35rem } }

/* -- tool grid (related tools) -- */
.tool-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.tool-grid a{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
  padding:1.15rem 1.2rem; border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  transition:background var(--t1),transform var(--t1),border-color var(--t1),box-shadow var(--t1) }
.tool-grid a:hover{ transform:translateY(-1px); border-color:var(--coral); box-shadow:var(--sh-1) }
.tool-grid b{ font-family:var(--display); font-weight:800; font-size:1rem; color:var(--dark);
  letter-spacing:var(--tr-h3) }
.tool-grid a:hover b{ color:var(--coral-hi) }
.tool-grid em{ font-style:normal; font-size:.85rem; line-height:1.5; color:var(--fg-mute) }
@media (max-width:700px){ .tool-grid{ grid-template-columns:1fr } }

/* -- closing CTA section -- */
.cta{ position:relative; overflow:hidden }
.cta__aura{ position:absolute; top:-32%; right:-8%; width:46vmax; height:46vmax; border-radius:50%;
  filter:blur(95px); background:radial-gradient(circle,rgba(224,81,43,.16),transparent 62%);
  pointer-events:none; z-index:0 }
.cta > .wrap{ position:relative; z-index:1 }
.cta__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:2rem; align-items:start }
.cta h2{ margin:1.15rem 0 1rem }
.cta__chips{ list-style:none; padding:1.75rem 0 0; margin:2rem 0 0; border-top:1px solid var(--line);
  display:grid; gap:1.15rem }
.cta__chips li{ display:grid; gap:.25rem }
.cta__chips small{ font-size:.68rem; font-weight:700; letter-spacing:var(--tr-caps);
  text-transform:uppercase; color:var(--coral-hi) }
.cta__chips a,.cta__chips > li > span{ font-family:var(--display); font-weight:800; font-size:1.0625rem;
  color:var(--dark) }
.cta__chips a:hover{ color:var(--coral-hi) }
.on-dark .cta__chips small{ color:var(--coral-lo) }
.on-dark .cta__chips a,.on-dark .cta__chips > li > span{ color:#fff }
.on-dark .cta__chips a:hover{ color:var(--coral-lo) }
@media (max-width:900px){ .cta__grid{ grid-template-columns:1fr } }

/* -- footer grid (dropwebs.com structure) -- */
.ftr{ border-top:2px solid var(--coral); padding:2.75rem var(--gutter) 1.5rem }
.ftr .wrap{ container:ftr / inline-size }
.ftr__word{ --ftr-g1:#E0512B; --ftr-g2:#F4794F; --ftr-g3:#F9B08F;
  display:block; width:100%; margin:0 0 1.25rem; line-height:1; overflow:visible }
.ftr__word span{ display:block; width:max-content; max-width:100%; margin-inline:auto; text-align:center;
  white-space:nowrap; font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,12cqi,12.5rem); letter-spacing:.06em; line-height:1.08; padding:.08em 0 .12em;
  background-image:linear-gradient(90deg,var(--ftr-g1) 0%,var(--ftr-g2) 25%,var(--ftr-g3) 50%,var(--ftr-g2) 75%,var(--ftr-g1) 100%);
  background-size:300% 100%; background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:ftrShift 8s linear infinite }
@keyframes ftrShift{ to{ background-position:300% 50% } }
.ftr__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(11rem,1fr));
  gap:2rem; padding:1.75rem 0 1.75rem; border-top:1px solid var(--line-inv) }
.ftr__cta .eyebrow{ color:var(--coral-lo) }
.ftr__cta h2{ color:#fff; font-size:clamp(1.6rem,2.6vw,2.35rem); margin:.9rem 0 1rem }
.ftr__cta p{ color:var(--inv-m); max-width:30ch; margin-bottom:1.75rem; font-size:.9375rem; line-height:1.62 }
.ftr__col > b{ display:block; font-family:var(--body); font-size:.68rem; font-weight:700;
  letter-spacing:var(--tr-caps); text-transform:uppercase; color:var(--coral-lo); margin-bottom:1.1rem }
.ftr__col a{ display:block; padding:.35rem 0; font-size:.9375rem; color:var(--inv-m);
  transition:color var(--t1),transform var(--t1) var(--e) }
.ftr__col a:hover{ color:var(--coral-lo); transform:translateX(3px) }
.ftr__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.25rem;
  border-top:1px solid var(--line-inv); font-size:.8375rem; color:var(--inv-s) }
.ftr__base a{ margin-left:1.35rem; transition:color var(--t1) }
.ftr__base a:hover{ color:var(--coral-lo) }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:1fr } .ftr__base{ flex-direction:column }
  .ftr__base a{ margin-left:0 } }

/* -- auth as a real modal: sits above header, blurs the page behind it -- */
.authshell{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  min-height:100dvh; padding:max(5.5rem,12vh) var(--gutter) 2.5rem; overflow-y:auto;
  background:rgba(32,32,32,.55); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2) }
.authcard{ position:relative; width:min(100%,27rem); margin:auto; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:clamp(1.6rem,4vw,2.4rem); max-height:none }
.authcard h2{ font-size:clamp(1.5rem,3vw,1.95rem) }
.authcard__x{ position:absolute; top:.85rem; right:.85rem; width:2.2rem; height:2.2rem;
  display:grid; place-items:center; border-radius:var(--r-pill); color:var(--fg-mute);
  background:var(--grey); transition:background var(--t1),color var(--t1) }
.authcard__x:hover{ background:var(--dark); color:#fff }
.authcard__x svg{ width:.85rem }
body.has-modal{ overflow:hidden }
@media (max-width:560px){
  .authshell{ padding:max(4.75rem,9vh) 1rem 1.5rem; align-items:start }
  .authcard{ padding:1.4rem 1.15rem }
}

/* -- burger + mobile sheet -- */
.burger{ display:none; width:2.8rem; height:2.8rem; border-radius:var(--r-pill); background:var(--dark);
  color:#fff; border:1.5px solid var(--dark); align-items:center; justify-content:center; flex-shrink:0;
  transition:background var(--t1),border-color var(--t1),color var(--t1) }
.burger:hover{ background:var(--coral-btn); border-color:var(--coral-btn) }
.burger svg{ width:1.15rem }
@media (max-width:960px){ .burger{ display:inline-flex } }
@media (max-width:420px){ .burger{ width:2.55rem; height:2.55rem } }
body[data-lock="true"]{ overflow:hidden }

/* -- reduced motion additions -- */
@media (prefers-reduced-motion:reduce){
  .ftr__word span{ animation:none; background-position:40% 50%;
    -webkit-text-fill-color:var(--ftr-g2); color:var(--ftr-g2) }
  .feat:hover,.chap__art,.tool-grid a:hover{ transform:none }
}

/* Screenshot placeholder - used only until a captured .webp exists. */
.shot__img--ph{ display:block; width:100%; aspect-ratio:16/9.4;
  background:
    linear-gradient(115deg,rgba(255,255,255,.5) 0 22%,transparent 22.5%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(0deg,rgba(32,32,32,.05) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(32,32,32,.05) 0 1px,transparent 1px 44px),
    linear-gradient(160deg,var(--grey) 0%,var(--grey-2) 100%) }
.on-dark .shot__img--ph{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 44px),
    linear-gradient(160deg,#2E2E2E 0%,#232323 100%) }

/* -- pricing cards (dropwebs.com .price component) -- */
.price-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem;
  align-items:stretch; padding-top:1rem }
.price{ position:relative; display:flex; flex-direction:column; gap:.65rem;
  padding:1.85rem 1.5rem 1.5rem; background:#fff; border:2px solid rgba(32,32,32,.08);
  border-radius:var(--r-lg); box-shadow:0 8px 24px rgba(32,32,32,.06); color:inherit;
  min-height:100%; overflow:visible;
  transition:border-color var(--t2),box-shadow var(--t2),transform var(--t3) var(--e),background var(--t2) }
.price:hover{ border-color:var(--coral); transform:translateY(-4px); z-index:2;
  box-shadow:0 0 0 1px var(--coral),0 0 32px rgba(32,32,32,.16),0 12px 28px rgba(224,81,43,.12) }
.price--hot{ background:#FFF8F5; border-color:var(--coral);
  box-shadow:0 0 0 1px rgba(224,81,43,.18),0 10px 28px rgba(224,81,43,.12) }
.price--hot:hover{ border-color:var(--coral-btn);
  box-shadow:0 0 0 1px var(--coral),0 0 36px rgba(32,32,32,.16),0 14px 32px rgba(224,81,43,.18) }
.price .mark{ position:absolute; top:0; left:50%; z-index:3; margin:0; align-self:auto;
  transform:translate(-50%,-50%); padding:.38rem .9rem; border:0; border-radius:var(--r-pill);
  background:var(--coral-btn); color:#fff; font-size:.625rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.2; box-shadow:0 8px 18px rgba(185,62,25,.28); white-space:nowrap }
.price h2{ font-size:clamp(1.35rem,1.8vw,1.7rem); line-height:1.1; color:var(--dark); margin:0 }
.price:hover h2{ color:var(--coral-hi) }
.price__for{ font-size:.72rem; font-weight:800; letter-spacing:var(--tr-caps);
  text-transform:uppercase; color:var(--coral-hi) }
.price__label{ color:var(--fg); font-size:.92rem; line-height:1.45; max-width:24ch }
.price__num{ display:flex; align-items:baseline; gap:.35rem; padding:.35rem 0 .1rem }
.price__num strong{ font-family:var(--display); font-weight:800;
  font-size:clamp(1.85rem,2.6vw,2.4rem); letter-spacing:var(--tr-h); line-height:1.05; color:var(--dark) }
.price__num small{ font-family:var(--body); font-size:.8rem; font-weight:700; color:var(--fg) }
.price ul{ list-style:none; padding:1rem 0 1.1rem; margin:.15rem 0 0; border-top:1px solid var(--line);
  display:grid; gap:.55rem; flex:1 1 0 }
.price li{ padding-left:1.15rem; position:relative; font-size:.9rem; line-height:1.45; color:var(--fg) }
.price li::before{ content:""; position:absolute; left:0; top:.55em; width:.42rem; height:.42rem;
  border-radius:50%; background:var(--coral) }
.price li b{ font-weight:800 }
.price .btn{ margin-top:auto; width:100% }
.price-note{ margin:1.75rem 0 0; color:var(--fg); font-size:.9rem; max-width:76ch; line-height:1.6 }
@media (max-width:1100px){ .price-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:700px){ .price-grid{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){ .price:hover,.price--hot:hover{ transform:none } }

/* -- booking slot picker -- */
.bookgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr)); gap:.5rem }
.bookslot{ position:relative; display:block }
.bookslot input{ position:absolute; opacity:0; width:0; height:0 }
.bookslot span{
  display:block; padding:.6rem .4rem; text-align:center; cursor:pointer;
  font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums;
  background:#fff; color:var(--fg); border:1.5px solid var(--line-2);
  border-radius:var(--r-sm); transition:border-color var(--t1),background var(--t1),color var(--t1);
}
.bookslot span:hover{ border-color:var(--coral); color:var(--coral-hi) }
.bookslot input:checked + span{
  background:var(--coral-btn); border-color:var(--coral-btn); color:#fff;
}
.bookslot input:focus-visible + span{ outline:2px solid var(--coral); outline-offset:2px }
@media (max-width:420px){ .bookgrid{ grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr)) } }