/* ============================================================
   ESM Ad Studio — / and /analysis
   Built to design-handoff/spec/design-spec.md. Self-contained: these
   pages do not load styles.css, so the sixteen pages being retired
   keep their own stylesheet and cannot be broken from here.
   ============================================================ */

/* ---- Tokens ---------------------------------------------------- */
:root{
  --red:#EF0914;
  --red-hover:#E10813;      /* darken 6%  */
  --red-press:#DC0812;      /* 92% bright */
  --black:#050607;          /* the one black section, both themes */
  --ink:#111111;
  --surface:#FFFFFF;
  --paper:#F7F7F7;
  --line:#DDDDDD;
  --muted:#666666;

  --gutter:64px;
  --maxw:1312px;
  --header-h:80px;
  --sec-pt:88px;
  --sec-pb:80px;   /* the band cancels this to sit flush */

  color-scheme:light;
}
:root[data-theme=dark]{
  --ink:#F5F5F5;
  --surface:#171819;
  --paper:#101112;
  --line:#323335;
  --muted:#A6A6A6;
  color-scheme:dark;
}

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 14;
  font-size:17px;
  line-height:1.57;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}

/* ---- Type scale ------------------------------------------------ */
.t-display{font-size:68px;font-weight:750;line-height:1.13;letter-spacing:-1.6px;margin:0}
.t-section{font-size:48px;font-weight:700;line-height:1.17;letter-spacing:-1.1px;margin:0}
.t-form{font-size:30px;font-weight:700;line-height:1.25;letter-spacing:-.4px;margin:0}
.t-card{font-size:20px;font-weight:670;line-height:1.3;letter-spacing:-.2px;margin:0}
.t-lead{font-size:25px;font-weight:600;line-height:1.44;letter-spacing:-.25px}
.t-small{font-size:15px;font-weight:450;line-height:1.5}
.eyebrow{
  font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.7px;
  text-transform:uppercase;color:var(--red);margin:0;
}
.caption{font-size:12px;font-weight:400;line-height:1.5;color:var(--muted)}

/* ---- Header ---------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;gap:24px;
  padding:0 var(--gutter);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.brand{
  font-size:26px;font-weight:900;letter-spacing:-.075em;
  text-decoration:none;color:var(--ink);line-height:1;
}
.brand span{color:var(--red)}
.hdr nav{display:flex;gap:32px;margin-left:48px}
.hdr nav a{
  font-size:13px;font-weight:620;line-height:1.4;
  text-decoration:none;color:var(--ink);
}
.hdr nav a:hover{color:var(--red)}
.hdr nav .nav-cta{display:none}
.hdr-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.hdr-book{font-size:13px;font-weight:620;text-decoration:none;color:var(--ink);white-space:nowrap}
.hdr-book:hover{color:var(--red)}
.theme-button,.menu-button{
  height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:4px;
  color:var(--ink);font:inherit;font-size:13px;font-weight:620;
  cursor:pointer;
}
.theme-button:hover,.menu-button:hover{background:var(--paper)}
.menu-button{display:none;padding:0 14px}

/* ---- Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:52px;padding:0 20px;border-radius:4px;
  font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-.15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
}
.btn b{font-weight:400;font-size:17px}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-hover)}
.btn-primary:active{background:var(--red-press)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{background:var(--paper)}
.btn-onred{background:#fff;color:var(--ink)}
.btn-onred:hover{background:#f2f2f2}
.btn:focus-visible,.theme-button:focus-visible,.menu-button:focus-visible,
.f-field:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn-primary:focus-visible{outline-color:var(--ink)}
.btn:disabled,.btn[aria-disabled=true]{
  background:var(--line);color:var(--muted);border-color:var(--line);cursor:not-allowed;
}

/* ---- Section frame --------------------------------------------- */
.sec{padding:var(--sec-pt) var(--gutter) var(--sec-pb)}
.sec-inner{max-width:var(--maxw);margin:0 auto}
.sec-paper{background:var(--paper)}
.sec-dark{background:var(--black);color:#fff}
.sec-dark .eyebrow{color:var(--red)}
.sec-dark .sec-sub{color:#B4B4B8}

/* The eyebrow hangs in a narrow left column and the heading is indented
   beside it. That indent is the design's main organising device, so the
   prose that belongs to a heading is indented to match. */
.sec-head{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:start}
.sec-head .eyebrow{grid-column:1;padding-top:10px}
.sec-head h2{grid-column:2}
.sec-head .sec-sub{grid-column:2;margin:12px 0 0;font-size:17px;color:var(--muted);max-width:800px}
.sec-body{margin:48px 0 0}
.sec-prose{margin-left:100px;max-width:800px}
.sec-prose p{margin:0 0 20px;font-size:17px;line-height:1.57;color:var(--muted)}
.sec-prose p:last-child{margin-bottom:0}
.sec-prose p.t-lead{
  font-size:25px;font-weight:600;line-height:1.44;letter-spacing:-.25px;
  color:var(--ink);margin-bottom:28px;
}
.sec-prose p.eyebrow{
  font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.7px;
  text-transform:uppercase;color:var(--red);margin:0;
}
.sec-prose b{color:var(--ink);font-weight:650}

/* ---- Hero ------------------------------------------------------ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--black);color:#fff;
  padding:112px var(--gutter) 120px;
  min-height:520px;display:flex;align-items:center;
}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#000000f0,#000000c4 38%,#00000059 62%,#00000026);
}
.hero-inner{max-width:var(--maxw);margin:0 auto;width:100%}
.hero h1{max-width:12ch;margin:24px 0 0}
.hero p{margin:20px 0 0;max-width:58ch;font-size:17px;line-height:1.57;color:#E6E6E8}
.hero-buttons{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap}

/* ---- 01 Markets ------------------------------------------------ */
.markets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:0;padding:0;list-style:none}
.markets li{border-top:1px solid var(--line);padding:16px 0 24px}
.markets .city{display:block;font-size:20px;font-weight:670;letter-spacing:-.2px;line-height:1.3}
.markets .region{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.markets .count{display:block;margin-top:8px;font-size:13px;font-weight:650;color:var(--red)}
.markets-note{
  margin:24px 0 0;font-size:12px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--muted);
}

/* ---- 03 Steps -------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;padding:0;list-style:none}
.steps b{display:block;font-size:12px;font-weight:700;letter-spacing:.7px;color:var(--red);margin-bottom:12px}
.steps h3{border-top:1px solid var(--line);margin:0;padding-top:16px;font-size:20px;font-weight:670;letter-spacing:-.2px;line-height:1.3}
.steps p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---- 04 What we analyse ---------------------------------------- */
.method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:32px;padding:0;list-style:none}
.method li{border-top:1px solid var(--line);padding-top:16px}
.method b{display:block;font-size:20px;font-weight:670;letter-spacing:-.2px;line-height:1.3}
.method span{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---- 05 The study ---------------------------------------------- */
.sec-dark .sec-head h2{color:#fff}
/* The hairlines and secondary text in a grid are tuned for paper. On the
   black section --line (#DDD in light mode) is far too bright. */
.sec-dark .method li{border-top-color:#2A2B2F}
.sec-dark .method b{color:#fff}
.sec-dark .method span{color:#B4B4B8}
.study-head{max-width:900px}
.study-head h2{margin:20px 0 0}
.study-head .sec-sub{margin:16px 0 0;font-size:17px;color:#B4B4B8;max-width:820px}
.study{margin:32px 0 0;padding:0;list-style:none}
.study li{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-bottom:1px solid #2A2B2F;padding:16px 0;
}
.study .cat{font-size:15px;font-weight:620}
.study .val{font-size:13px;color:#B4B4B8;text-align:right;white-space:nowrap}
.study .val em{font-style:normal;color:var(--red);font-size:17px}
.study-note{display:block;margin-top:20px;max-width:900px;font-size:12px;line-height:1.5;color:#8B8C91}

/* ---- Pricing --------------------------------------------------- */
.price{margin:48px 0 0}
.price-row{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin:16px 0 0}
.price-main{font-size:36px;font-weight:750;letter-spacing:-1px;line-height:1.1}
.price-alt{font-size:20px;font-weight:600;color:var(--muted)}
.sec-prose p.price-note{margin:20px 0 0;max-width:680px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---- Red banner ------------------------------------------------ */
.banner{background:var(--red);color:#fff;padding:88px var(--gutter) 80px}
.banner .eyebrow{color:#fff;opacity:.85}
.banner h2{margin:24px 0 0;max-width:22ch}
.banner .btn{margin-top:32px}

/* ---- Footer ---------------------------------------------------- */
.ftr{background:var(--black);color:#fff;padding:64px var(--gutter) 32px}
.ftr-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.ftr .brand{color:#fff}
.ftr-tag{margin:12px 0 0;font-size:14px;color:#B4B4B8;max-width:36ch}
.ftr-col b{display:block;font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#8B8C91;margin-bottom:16px}
.ftr-col a{display:block;margin-bottom:12px;font-size:14px;text-decoration:none;color:#E6E6E8}
.ftr-col a:hover{color:#fff}
.ftr-base{
  max-width:var(--maxw);margin:48px auto 0;padding-top:24px;
  border-top:1px solid #2A2B2F;
  display:flex;justify-content:space-between;gap:24px;
  font-size:12px;color:#8B8C91;
}
.ftr-base a{text-decoration:none;color:#8B8C91}
.ftr-base a:hover{color:#fff}

/* ---- Analysis hero --------------------------------------------- */
/* The analysis hero carries the same footage as the home hero, behind a
   near-opaque scrim: the copy runs the full width here, so the picture is
   texture rather than a subject. */
.a-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--black);color:#fff;padding:88px var(--gutter) 64px;
}
.a-hero-media{position:absolute;inset:0;z-index:-2}
.a-hero-media img,.a-hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.a-hero-media video{position:absolute;inset:0}
.a-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Two layers rather than one flat wash: the horizontal pass protects the
     headline on the left, the vertical pass darkens the foot of the section
     where the four small captions sit. Everything between stays light enough
     to actually read the footage. */
  background:
    linear-gradient(180deg,#00000026,#00000073 70%,#0000009e),
    linear-gradient(90deg,#000000d9,#00000099 48%,#00000040);
}
@media (prefers-reduced-motion: reduce){ .a-hero-media video{display:none} }
.a-hero-inner{max-width:var(--maxw);margin:0 auto}
.a-hero h1{margin:24px 0 0;font-size:48px;font-weight:700;line-height:1.17;letter-spacing:-1.1px;max-width:20ch}
.a-hero p{margin:20px 0 0;max-width:62ch;font-size:17px;line-height:1.57;color:#D2D3D6}
.a-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;margin:48px 0 0;padding:0;list-style:none}
.a-points li{border-top:1px solid #4A4B50;padding-top:16px}
.a-points b{display:block;font-size:15px;font-weight:650}
.a-points span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#BDBEC2}

/* ---- Form ------------------------------------------------------ */
.f-sec{background:var(--paper);padding:88px var(--gutter) 96px}
.f-inner{max-width:var(--maxw);margin:0 auto}
.f-head{margin-left:64px;max-width:760px}
.f-head h2{margin:24px 0 0}
.f-head p{margin:10px 0 0;font-size:17px;color:var(--muted)}
.f-form{margin:40px 0 0 64px;max-width:760px}
.f-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:18px}
.f-wide{grid-column:1/-1}
.f-label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:620;line-height:1.4}
.f-cap{display:flex;align-items:baseline;gap:6px;width:100%}
.f-label .opt{margin-left:auto;font-weight:450;color:var(--muted)}
.f-req{color:var(--red)}
.f-field{
  height:52px;padding:0 14px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:4px;
  font:inherit;font-size:15px;
  width:100%;
}
textarea.f-field{height:94px;padding:14px;line-height:1.5;resize:vertical}
.f-field::placeholder{color:var(--muted)}
.f-field:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.f-field:user-invalid{border:2px solid var(--red)}
select.f-field{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.f-submit{margin-top:32px}
.f-fine{margin:16px 0 0;max-width:680px;font-size:12px;line-height:1.5;color:var(--muted)}
.f-hp{position:absolute;left:-9999px}

/* ---- Prose page (privacy, acknowledgement) --------------------- */
.doc{padding:88px var(--gutter) 96px;background:var(--surface)}
.doc-inner{max-width:760px;margin:0 auto}
.doc h1{margin:24px 0 0;font-size:48px;font-weight:700;line-height:1.17;letter-spacing:-1.1px}
.doc h2{margin:48px 0 0;font-size:20px;font-weight:670;letter-spacing:-.2px}
.doc p{margin:16px 0 0;font-size:17px;line-height:1.57;color:var(--muted)}
.doc ul{margin:16px 0 0;padding-left:20px}
.doc li{margin-bottom:8px;font-size:17px;line-height:1.57;color:var(--muted)}
.doc a{color:var(--ink)}
.doc-date{margin:24px 0 0;font-size:13px;color:var(--muted)}

/* ============================================================
   Responsive
   ============================================================ */
@media (width <= 1080px){
  .markets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .a-points{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .method{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-display{font-size:56px;letter-spacing:-1.2px}
}

@media (width <= 760px){
  :root{--gutter:24px;--header-h:68px}

  .t-display{font-size:48px;font-weight:750;line-height:1.13;letter-spacing:-.7px}
  .t-section{font-size:32px;letter-spacing:-.45px}
  .t-form{font-size:23px}
  .t-card{font-size:19px}
  .t-lead{font-size:20px}
  body{font-size:16px;line-height:1.59}

  .hdr nav{
    display:none;
    position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;gap:0;margin:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 16px;
  }
  .hdr nav.open{display:flex}
  .hdr nav a{display:flex;align-items:center;min-height:48px;font-size:14px;border-bottom:1px solid var(--line)}
  .hdr nav .nav-cta{display:flex;color:var(--red);border-bottom:0}
  .hdr-book{display:none}
  .menu-button{display:inline-flex}
  .hdr .btn{display:none}

  :root{--sec-pt:56px;--sec-pb:48px}
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .sec-head .eyebrow{grid-column:1;padding-top:0;margin-bottom:20px}
  .sec-head h2{grid-column:1}
  .sec-head .sec-sub{grid-column:1;font-size:16px;margin-top:10px}
  .sec-prose{margin-left:0}
  .sec-body{margin-top:24px}

  .hero{padding:72px var(--gutter) 64px;min-height:0}
  .hero p{max-width:none}
  .hero-buttons{flex-direction:column;align-items:stretch;gap:12px}
  .hero-buttons .btn{width:100%}

  .markets{grid-template-columns:minmax(0,1fr)}
  .markets li{padding:14px 0}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .method{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .a-points{grid-template-columns:minmax(0,1fr);row-gap:16px}

  .study li{flex-direction:column;align-items:flex-start;gap:6px}
  .study .val{text-align:left}

  .banner{padding:56px var(--gutter) 48px}
  .banner .btn{width:100%}

  .a-hero{padding:56px var(--gutter) 48px}

  /* Both heroes carry their copy across the full width here, and object-fit
     crops the 16:9 footage to its centre — which is its brightest part. The
     horizontal scrim protects nothing in that case, so both switch to an
     even top-to-bottom wash. */
  .hero::after{background:linear-gradient(180deg,#0000009e,#000000c2)}
  .a-hero::after{background:linear-gradient(180deg,#0000009e,#000000cc)}
  .a-hero h1{font-size:32px;letter-spacing:-.45px;max-width:none}
  .a-hero p{max-width:none;font-size:16px}

  .f-sec{padding:56px var(--gutter) 64px}
  .f-head,.f-form{margin-left:0}
  .f-rows{grid-template-columns:minmax(0,1fr);row-gap:16px}
  textarea.f-field{height:105px}
  .f-submit{width:100%}

  .doc{padding:56px var(--gutter) 64px}
  .doc h1{font-size:32px;letter-spacing:-.45px}

  .ftr{padding:48px var(--gutter) 24px}
  .ftr-inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .ftr-base{flex-direction:column;gap:8px;margin-top:32px}
}

@media (prefers-reduced-motion: reduce){
  .hero-media video{display:none}
}

/* ============================================================
   Media
   ============================================================ */

/* A plate is a still with its clip layered over it. The <img> paints first
   and is what remains when the clip is suppressed, so a plate never renders
   as an empty box. Each clip's first frame is its still, so the swap is
   invisible. */
.plate{position:relative;margin:0;overflow:hidden;background:var(--black);isolation:isolate}
.plate picture{display:contents}
.plate img,.plate video{display:block;width:100%;height:100%;object-fit:cover}
.plate video{position:absolute;inset:0;z-index:1}
@media (prefers-reduced-motion: reduce){ .plate video{display:none} }

/* Bands break the section gutter and run edge to edge. They punctuate a
   section rather than sitting in it, which is why they are capped short —
   a tall one competes with the copy above it. */
.band{margin:64px calc(-1 * var(--gutter)) calc(-1 * var(--sec-pb))}
/* A fixed height, not aspect-ratio + max-height: that pair keeps the ratio
   by shrinking the WIDTH, so the band stopped short of the right edge. */
.band-wide{height:400px}
.band-street{height:420px}

/* A split section keeps its copy in the main column and stands the plate
   beside it, in the space the layout already leaves empty. */
.sec-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  column-gap:56px;align-items:start}
.plate-side{border-radius:4px}
.plate-tall{aspect-ratio:8/9}
.plate-4x3{aspect-ratio:4/3}

/* ---- Rotating hero --------------------------------------------- */
/* Five trades, one at a time. Scenes stack in the same box and cross-fade;
   only the visible one's clip is allowed to play. */
.hero-scene{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.1s ease;
  pointer-events:none;
}
.hero-scene.is-on{opacity:1}
.hero-scene img,.hero-scene video{width:100%;height:100%;object-fit:cover;display:block}
.hero-scene video{position:absolute;inset:0}
@media (prefers-reduced-motion: reduce){
  .hero-scene{transition:none}
  .hero-scene video{display:none}
}

@media (width <= 1080px){
  .sec-split{grid-template-columns:minmax(0,1fr) minmax(0,280px);column-gap:40px}
}
@media (width <= 760px){
  .band{margin:40px calc(-1 * var(--gutter)) calc(-1 * var(--sec-pb))}
  .band-wide{height:240px}
  .band-street{height:260px}
  .sec-split{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .plate-tall{aspect-ratio:4/3}
}

/* ---- Short dark hero (book a call, help) ----------------------- */
/* Same band as the analysis hero, without footage behind it, so these
   two utility pages sit in the same system without competing. */
.a-hero-short{padding:72px var(--gutter) 64px}
.a-hero-short h1{max-width:18ch}
.a-hero-short p{max-width:58ch}

/* ---- Cal.com scheduler ---------------------------------------- */
.cal-frame{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:8px;min-height:560px;overflow:hidden;
}
#cal-inline{width:100%;min-height:544px}
.cal-fallback{margin:24px;font-size:15px;line-height:1.6;color:var(--muted)}

/* ---- Billing card --------------------------------------------- */
.help-card{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:32px;max-width:720px;margin-left:100px;
}
.help-card h3{margin:0;font-size:20px;font-weight:670;letter-spacing:-.2px}
.help-card p{margin:12px 0 24px;font-size:15px;line-height:1.6;color:var(--muted)}
.help-card small{display:block;margin-top:20px;font-size:12px;line-height:1.5;color:var(--muted)}

/* ---- FAQ ------------------------------------------------------- */
.faq{max-width:900px;margin-left:100px}
.faq details{border-bottom:1px solid #2A2B2F}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-size:17px;font-weight:620;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:var(--red);font-size:20px;font-weight:400;line-height:1}
.faq details[open] summary span{transform:rotate(45deg)}
.faq summary:hover{color:var(--red)}
.faq p{margin:0 0 24px;max-width:70ch;font-size:15px;line-height:1.7;color:#B4B4B8}

@media (width <= 760px){
  .a-hero-short{padding:48px var(--gutter) 40px}
  .a-hero-short h1{max-width:none}
  .help-card{margin-left:0;padding:24px}
  .faq{margin-left:0}
  .faq summary{font-size:16px;gap:16px}
  .cal-frame{padding:4px;min-height:620px}
  #cal-inline{min-height:612px}
}