/* ===========================================================================
   ELEVATE PUBLISHERS — lead magnet layer
   Loaded AFTER css/style.css on every free resource page. style.css owns the
   tokens, the type, the buttons, the header and the footer; this file only
   adds what a tool page needs on top of them, in the same visual language.

   1  page + header          6  fields
   2  hero                   7  repeatable rows (tables)
   3  the orbit diagram      8  finish: persona card + downloads
   4  method section         9  toast, flags, small parts
   5  worksheet + step bar  11  email form + confirmation pages
                            10  responsive
   =========================================================================== */

/* ---------- 1. page + header ------------------------------------------- */
/* IN-PAGE JUMPS — same rule as the homepage (style.css, "IN-PAGE JUMPS").
   scroll-padding-top clears the fixed header (74px) plus the sticky step bar
   (54px + its 1px rule). The negative scroll-margin on each target cancels
   that target's own top padding, so a step-bar link, "Start the worksheet",
   "How it works" or Start over lands with the first thing of the section —
   "Step 05", and the reference panel beside it — exactly --land (30px)
   under the step bar, with no empty band. Any new section that can be
   jumped to needs the same treatment: margin = --land minus its top padding. */
html.lm-html{
  --lm-steps-h:55px;
  --lm-step-pad:clamp(72px,8.6vw,132px);
  scroll-padding-top:calc(74px + var(--lm-steps-h));
}
.lm-step{ scroll-margin-top:calc(var(--land) - var(--lm-step-pad)); }
.lm-finish{ scroll-margin-top:calc(var(--land) - var(--sec-pad)); }
/* the method sits above the worksheet, where the step bar isn't showing yet,
   so it lands under the header alone */
.lm-method{ scroll-margin-top:calc(var(--land) - var(--sec-pad) - var(--lm-steps-h)); }

/* The lead magnet header is the site header with the nav and the burger
   taken out: brand on the left, one button on the right, at every width.
   style.css hides `.hdr-in .btn` below 1024px for the homepage burger —
   this brings it back. */
.hdr--lm .hdr-in .btn{ display:inline-flex; }

/* one soft ember bloom, same ten-stop falloff as `.seam::before` */
.lm-glow{
  position:absolute; z-index:0; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,109,41,0.1400) 0%,
    rgba(255,109,41,0.1232) 11%,
    rgba(255,109,41,0.1022) 22%,
    rgba(255,109,41,0.0812) 33%,
    rgba(255,109,41,0.0602) 44%,
    rgba(255,109,41,0.0420) 55%,
    rgba(255,109,41,0.0266) 66%,
    rgba(255,109,41,0.0154) 77%,
    rgba(255,109,41,0.0063) 88%,
    rgba(255,109,41,0.0000) 100%);
}

/* ---- titles never run past two lines ----------------------------------
   Every display title is two phrases, one per <span>, and each phrase must
   stay on a single line. Sizing a title by the viewport (vw) is not enough:
   the hero and the step heads sit in columns, and at some widths a phrase
   came out wider than its column and broke into a third line. So each
   phrase is locked to one line, and the size is capped by the width of the
   box the title actually sits in (container query units, cqi). Each cap is
   100 ÷ the widest phrase in that box, measured in Geist Pixel ems:
     hero      "Buyer Persona"      7.7em  -> 12.4cqi
     step head "emotional drivers"  9.7em  ->  9.8cqi
     sections  "Turn this persona" 10.1em  ->  9.4cqi
   A new title with a longer phrase needs a smaller cap, or shorter words. */
.lm .display span{ white-space:nowrap; }
.lm-hero-copy, .lm-step-head, .lm .section-head{ container-type:inline-size; }

/* hairline between two blocks, fading at both ends like the footer rule */
.lm-rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07) 16%, rgba(255,255,255,.07) 84%, transparent);
}

/* ---------- 2. hero ------------------------------------------------------ */
.lm-hero{
  position:relative; overflow:hidden;
  padding:calc(74px + clamp(40px,6.4vw,96px)) 0 clamp(72px,8.4vw,128px);
}
/* The glow's box stays inside the hero from top to bottom. The hero clips
   its overflow, so a glow taller than the section is cut off flat at the
   section's edge and shows as a hard horizontal line (it did: a 1200px
   circle in an ~850px hero). The ellipse fills its own box and reaches zero
   exactly at the box edge, so nothing is left for the clip to cut. Only the
   right side may run past, because there the edge is the edge of the screen. */
.lm-hero .lm-glow{ top:0; bottom:0; right:-8%; width:min(1240px,80%); }
.lm-hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(40px,6vw,96px); align-items:center;
}
.lm-hero h1{
  margin-top:clamp(22px,2.4vw,30px);
  font-size:clamp(38px,5.6vw,84px);
  line-height:.98; letter-spacing:-.02em;
}
.lm-hero .lede{ margin-top:clamp(18px,2vw,26px); max-width:34ch; text-wrap:pretty; }
.lm-meta{
  margin-top:clamp(24px,2.6vw,32px);
  display:flex; flex-wrap:wrap; gap:10px 22px;
}
.lm-meta li{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.lm-meta li::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 8px 1px rgba(255,109,41,.7);
}
.lm-hero-cta{ margin-top:clamp(30px,3.2vw,42px); display:flex; flex-wrap:wrap; gap:12px; }

/* "welcome back" line, only shown when this browser holds answers */
.lm-resume{
  margin-top:22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-size:14px; color:var(--muted);
}
.lm-resume b{ color:var(--white); font-weight:500; }
.lm-resume a{
  color:var(--orange-soft);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,139,79,.4);
  transition:text-decoration-color .3s var(--ease);
}
.lm-resume a:hover{ text-decoration-color:var(--orange-soft); }

/* ---------- 3. the orbit diagram ---------------------------------------- *
 * The three circles double as the progress meter: each ring's orange arc is
 * the share of that circle's questions answered. Pure SVG, no image.       */
.lm-orbit{ position:relative; width:100%; max-width:560px; margin-inline:auto; }
.lm-orbit svg{ width:100%; height:auto; overflow:visible; }
.lm-orbit .ring-base{ fill:none; stroke:rgba(255,255,255,.13); stroke-width:1.2; }
.lm-orbit .ring-tint{ stroke:none; }
/* dash length and offset are set by js/lead-magnet.js from each ring's radius */
.lm-orbit .ring-fill{
  fill:none; stroke:var(--orange); stroke-width:2.2; stroke-linecap:round;
  transition:stroke-dashoffset 1.2s var(--ease-out), opacity .4s var(--ease);
}
.lm-orbit .ring-fill.is-empty{ opacity:0; }
.lm-orbit .ring-label{
  font-family:var(--ff-mono); font-size:15px; font-weight:500;
  letter-spacing:.16em; fill:var(--faint);
}
.lm-orbit .ring-label.mid{ fill:var(--muted); }
.lm-orbit .ring-label.core{ fill:var(--orange); }
.lm-orbit .ring-label tspan.ct{ fill:var(--white); }
.lm-orbit .buyer{ fill:none; stroke:var(--orange); stroke-width:2.6; stroke-linecap:round; }
.lm-orbit .buyer-label{
  font-family:var(--ff-mono); font-size:13.5px; font-weight:500;
  letter-spacing:.22em; fill:var(--white);
}
.lm-orbit .orb{
  transform-box:view-box; transform-origin:50% 50%;
  animation:lm-spin var(--dur,40s) linear infinite;
}
.lm-orbit .orb circle{ fill:var(--orange-pale); }
@keyframes lm-spin{ to{ transform:rotate(360deg); } }

/* ---------- 4. method section ------------------------------------------ */
.lm-method{ position:relative; overflow:hidden; }
.lm-method > .wrap{ position:relative; z-index:1; }

.lm-circles{
  margin-top:clamp(40px,5vw,68px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);
}
.lm-ccard{
  position:relative;
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
  padding:clamp(22px,2.2vw,32px);
  transition:border-color .4s var(--ease), transform .5s var(--ease-out);
}
.lm-ccard:hover{ border-color:rgba(255,109,41,.32); transform:translateY(-3px); }
.lm-ccard.is-core{
  border-color:rgba(255,109,41,.3);
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,109,41,.1), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
}
.lm-ccard svg{ width:44px; height:44px; color:var(--orange); }
.lm-ccard .kicker{ display:block; margin-top:22px; }
.lm-ccard h3{
  margin-top:10px;
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(19px,1.7vw,24px); line-height:1.05; letter-spacing:-.005em;
}
.lm-ccard p{ margin-top:12px; font-size:14.5px; line-height:1.62; color:var(--muted); text-wrap:pretty; }
.lm-ccard p b{ color:var(--white); font-weight:500; }

.lm-ladder{
  margin-top:clamp(48px,6vw,80px);
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
}
.lm-ladder li{
  position:relative;
  padding:18px clamp(10px,1.2vw,18px) 0 0;
  border-top:1px solid var(--line);
}
.lm-ladder li::before{
  content:""; position:absolute; top:-3px; left:0;
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.3);
}
.lm-ladder .kicker{ display:block; }
.lm-ladder p{ margin-top:8px; font-size:15px; font-weight:500; line-height:1.35; }
.lm-ladder li:last-child{ border-top-color:rgba(255,109,41,.6); }
.lm-ladder li:last-child::before{ background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.85); }
.lm-ladder li:last-child .kicker,
.lm-ladder li:last-child p{ color:var(--orange); }

/* "Before you start" style note — the brand kit's flag */
.lm-flag{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 18px; align-items:start;
  padding:18px 22px;
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface);
  font-size:14.5px; line-height:1.65; color:var(--muted);
}
.lm-flag > i{
  font-style:normal; font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange); padding-top:3px;
  white-space:nowrap;
}
.lm-flag b{ color:var(--white); font-weight:500; }
.lm-flag--hot{
  border-color:rgba(255,109,41,.28);
  background:linear-gradient(90deg, rgba(255,109,41,.075), rgba(255,109,41,.012));
}
.lm-method .lm-flag{ max-width:860px; margin:clamp(40px,5vw,64px) auto 0; }

/* ---------- 5. worksheet + step bar ------------------------------------ */
.lm-work{ position:relative; }

.lm-steps{
  position:sticky; top:74px; z-index:50;
  background:rgba(10,9,8,.84);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.lm-steps-in{ display:flex; align-items:center; gap:18px; height:54px; }
.lm-steps-list{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:2px;
  overflow-x:auto; scrollbar-width:none;
}
/* fade the right edge only while there is more strip to scroll to */
.lm-steps-list.is-more{
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.lm-steps-list::-webkit-scrollbar{ display:none; }
.lm-steps-list a{
  flex:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--faint);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.lm-steps-list a:hover{ color:var(--white); }
.lm-steps-list a .c{ color:rgba(255,255,255,.34); letter-spacing:.06em; }
.lm-steps-list a.is-done .c{ color:var(--orange); }
.lm-steps-list a[aria-current="step"]{ color:var(--white); background:var(--surface-2); }
.lm-steps-list a[aria-current="step"]::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.85);
}
.lm-status{
  flex:none;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap;
}
.lm-status::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.3); transition:background-color .3s, box-shadow .3s;
}
.lm-status[data-state="saved"]::before{ background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.7); }
.lm-status[data-state="saving"]::before{ background:var(--orange-pale); }
.lm-status[data-state="error"]{ color:var(--orange-soft); }
.lm-status b{ color:var(--white); font-weight:500; }
.lm-bar{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--orange); box-shadow:0 0 12px rgba(255,109,41,.7);
  transform-origin:0 50%; transform:scaleX(var(--p,0));
  transition:transform .8s var(--ease-out);
}

.lm-step{ position:relative; padding-block:var(--lm-step-pad); }
.lm-step + .lm-step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07) 16%, rgba(255,255,255,.07) 84%, transparent);
}
.lm-step-grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,6.4vw,112px); align-items:start;
  max-width:1240px; margin-inline:auto;
}
/* sticks at the same height a step-bar jump lands it, so it doesn't shift */
.lm-step-head{ position:sticky; top:calc(74px + var(--lm-steps-h) + var(--land)); }
.lm-step-head .kicker{ display:block; }
.lm-step-head h2{
  margin-top:18px;
  font-size:clamp(28px,3.1vw,46px); line-height:1.02; letter-spacing:-.012em;
}
.lm-step-lede{
  margin-top:20px;
  font-weight:300; font-size:clamp(15px,1.2vw,17.5px); line-height:1.62;
  color:var(--muted); text-wrap:pretty; max-width:40ch;
}
.lm-step-head .lm-flag{ margin-top:24px; font-size:14px; }
.lm-step-count{
  margin-top:28px;
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.lm-step-count b{ color:var(--white); font-weight:500; }
.lm-step-count .trk{
  position:relative; width:88px; height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden;
}
.lm-step-count .trk i{
  position:absolute; inset:0; background:var(--orange);
  transform-origin:0 50%; transform:scaleX(var(--p,0));
  transition:transform .8s var(--ease-out);
}

/* 3 Circles → Pain points → Content → Hooks */
.lm-chain{
  margin-top:24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.lm-chain i{ font-style:normal; color:var(--orange); }
.lm-chain b{ font-weight:500; color:var(--orange); text-shadow:0 0 16px rgba(255,109,41,.6); }

/* ---------- 6. fields -------------------------------------------------- */
.lm-fields{ display:grid; }
.lm-field{ padding:30px 0; border-top:1px solid var(--line-soft); }
.lm-field:first-child{ padding-top:4px; border-top:0; }
.lm-field:last-child{ padding-bottom:0; }
.lm-field-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:26px; }
.lm-num{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; color:var(--faint);
  transition:color .3s var(--ease);
}
.lm-num::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.8);
  opacity:0; transform:scale(.4); transition:opacity .3s var(--ease), transform .4s var(--ease-out);
}
.lm-field.is-filled .lm-num{ color:var(--orange); }
.lm-field.is-filled .lm-num::after{ opacity:1; transform:none; }

.lm-ex-btn{
  flex:none;
  display:inline-flex; align-items:center; gap:7px;
  min-height:30px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line);
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.lm-ex-btn:hover{ color:var(--white); border-color:rgba(255,255,255,.2); }
.lm-ex-btn[aria-expanded="true"]{ color:var(--orange); border-color:rgba(255,109,41,.4); background:rgba(255,109,41,.06); }
.lm-ex-btn svg{ width:9px; height:9px; transition:transform .35s var(--ease-out); }
.lm-ex-btn[aria-expanded="true"] svg{ transform:rotate(45deg); }

.lm-label{
  display:block; margin-top:10px;
  font-size:17.5px; font-weight:500; line-height:1.4; letter-spacing:-.008em; color:var(--white);
  text-wrap:pretty;
}
.lm-prompt{ margin-top:6px; font-size:14.5px; line-height:1.6; color:var(--muted); text-wrap:pretty; }

.lm-example{
  margin-top:14px; padding:14px 18px;
  border-left:2px solid var(--orange);
  border-radius:0 12px 12px 0;
  background:linear-gradient(90deg, rgba(255,109,41,.08), rgba(255,109,41,.012));
  font-size:14.5px; line-height:1.62; color:#e6e2de;
}
.lm-example .kicker{ display:block; margin-bottom:6px; color:var(--orange-soft); }
.lm-example p{ white-space:pre-line; }

.lm-chips{ margin-top:14px; display:flex; flex-wrap:wrap; gap:7px; }
.lm-chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:32px; padding:0 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:13px; color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.lm-chip::before{ content:"+"; font-family:var(--ff-mono); color:var(--faint); transition:color .3s var(--ease); }
.lm-chip:hover{ color:var(--white); border-color:rgba(255,109,41,.36); }
.lm-chip:hover::before{ color:var(--orange); }
.lm-chip.is-on{ color:var(--white); border-color:rgba(255,109,41,.45); background:rgba(255,109,41,.08); }
.lm-chip.is-on::before{ content:"✓"; color:var(--orange); }

.lm-input{
  display:block; width:100%; margin-top:16px;
  padding:15px 17px;
  font-family:var(--ff-body); font-size:16px; line-height:1.6; letter-spacing:-.005em;
  color:var(--white); caret-color:var(--orange);
  background:rgba(255,255,255,.028);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
textarea.lm-input{ min-height:98px; resize:none; overflow:hidden; }
.lm-input::placeholder{ color:rgba(255,255,255,.28); }
.lm-input:hover{ border-color:rgba(255,255,255,.15); }
.lm-input:focus,
.lm-input:focus-visible{
  outline:none;
  border-color:rgba(255,109,41,.6);
  background:rgba(255,255,255,.042);
  box-shadow:0 0 0 4px rgba(255,109,41,.12), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- 7. repeatable rows (tables) -------------------------------- */
.lm-ref{
  border:1px solid var(--line); border-radius:16px;
  background:var(--surface);
  margin-bottom:18px;
}
.lm-ref summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px;
  font-family:var(--ff-mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.lm-ref summary::-webkit-details-marker{ display:none; }
.lm-ref summary:hover{ color:var(--white); }
.lm-ref summary svg{ width:11px; height:11px; color:var(--orange); transition:transform .35s var(--ease-out); flex:none; }
.lm-ref[open] summary svg{ transform:rotate(45deg); }
.lm-ref-body{ padding:4px 20px 18px; display:grid; gap:14px; }
.lm-ref-body dt{
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange-soft);
}
.lm-ref-body dd{ margin:4px 0 0; font-size:14px; line-height:1.6; color:var(--muted); white-space:pre-line; }
.lm-ref-empty{ font-size:14px; color:var(--faint); }

.lm-rows-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.lm-rows{ display:grid; gap:14px; }
.lm-row{
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.01));
  padding:clamp(18px,2vw,26px);
}
.lm-row.is-new{ animation:lm-in .6s var(--ease-out); }
@keyframes lm-in{ from{ opacity:0; transform:translateY(10px); } }
.lm-row-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.lm-row-del{
  display:inline-flex; align-items:center; gap:7px;
  min-height:30px; padding:0 12px; border-radius:999px;
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.lm-row-del:hover{ color:var(--orange); background:rgba(255,109,41,.06); }
.lm-row-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; }
.lm-cell label{
  display:block;
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.lm-cell .hint{ display:block; margin-top:5px; font-size:12.5px; line-height:1.5; color:var(--faint); }
.lm-cell .lm-input{ margin-top:10px; min-height:92px; font-size:15px; padding:13px 15px; }
.lm-rows-actions{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.lm-rows-actions .btn{ min-height:48px; padding:0 22px; font-size:14px; }
.lm-rows-actions small{ font-size:12.5px; color:var(--faint); }
.lm-row-example{ margin-bottom:14px; }
.lm-row-example .lm-example{ margin-top:0; }
.lm-row-example dl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }
.lm-row-example dt{
  font-family:var(--ff-mono); font-size:9px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange-soft);
}
.lm-row-example dd{ margin:3px 0 0; }

/* ---------- 8. finish: persona card + downloads ------------------------ */
.lm-finish{ position:relative; overflow:hidden; }
.lm-finish .lm-glow{ left:50%; top:52%; transform:translate(-50%,-50%); width:min(1300px,96%); height:70%; }
.lm-finish > .wrap{ position:relative; z-index:1; }

.lm-persona{
  position:relative;
  max-width:960px; margin:clamp(40px,5vw,64px) auto 0;
  border:1px solid var(--line); border-radius:26px;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,109,41,.1), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085), 0 40px 90px -50px rgba(0,0,0,.9);
  backdrop-filter:blur(20px);
  overflow:hidden;
}
.lm-p-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(22px,3vw,40px);
  border-bottom:1px solid var(--line-soft);
}
.lm-p-top .brand img{ width:22px; height:22px; }
.lm-p-top .brand-txt{ font-size:11.5px; }
.lm-p-block{ padding:clamp(22px,3vw,36px) clamp(22px,3vw,40px); border-bottom:1px solid var(--line-soft); }
.lm-p-block:last-child{ border-bottom:0; }
.lm-p-block > .kicker{ display:block; margin-bottom:12px; }
.lm-p-title{
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.2vw,40px); line-height:1.04; letter-spacing:-.012em;
  text-wrap:balance; overflow-wrap:anywhere;
}
.lm-p-sub{ margin-top:10px; font-size:14.5px; color:var(--muted); }
.lm-p-quote{
  font-weight:300; font-size:clamp(17px,1.7vw,23px); line-height:1.5; letter-spacing:-.006em;
  color:var(--white); text-wrap:pretty; white-space:pre-line;
}
.lm-p-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.lm-p-two > .lm-p-block{ border-bottom:0; }
.lm-p-two > .lm-p-block + .lm-p-block{ border-left:1px solid var(--line-soft); }
.lm-p-two{ border-bottom:1px solid var(--line-soft); }
.lm-p-text{ font-size:15px; line-height:1.65; color:#e6e2de; white-space:pre-line; text-wrap:pretty; }
/* a pasted link with no spaces must wrap instead of widening the card */
.lm-p-quote, .lm-p-text, .lm-p-list, .lm-p-sub, .lm-ref-body dd, .lm-example p{ overflow-wrap:anywhere; }
.is-empty{ color:var(--faint) !important; font-style:normal; }
.lm-p-title.is-empty{ color:rgba(255,255,255,.28) !important; }

.lm-p-list{ display:grid; gap:0; counter-reset:pp; }
.lm-p-list li{
  counter-increment:pp;
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:4px 12px;
  padding:14px 0; border-top:1px solid var(--line-soft);
}
.lm-p-list li:first-child{ border-top:0; padding-top:2px; }
.lm-p-list li::before{
  content:counter(pp, decimal-leading-zero);
  grid-row:span 2;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; color:var(--orange); padding-top:4px;
}
.lm-p-list b{ font-weight:500; font-size:15px; line-height:1.5; }
.lm-p-list span{ font-size:14px; line-height:1.55; color:var(--muted); }

.lm-p-meters{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px clamp(18px,3vw,40px); }
.lm-meter .kicker{ display:flex; justify-content:space-between; gap:10px; }
.lm-meter .kicker b{ font-weight:500; color:var(--white); letter-spacing:.08em; }
.lm-meter .trk{ margin-top:10px; height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.lm-meter .trk i{
  display:block; height:100%; background:var(--orange);
  transform-origin:0 50%; transform:scaleX(var(--p,0)); transition:transform 1s var(--ease-out);
}

.lm-dl{ margin-top:clamp(34px,4vw,48px); display:grid; justify-items:center; text-align:center; }
.lm-dl-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.lm-dl-btns .btn[aria-busy="true"]{ pointer-events:none; filter:saturate(.7); }
.lm-dl .btn .dl{ transition:transform .45s var(--ease-out); }
.lm-dl .btn:hover .dl{ transform:translateY(2px); }
.lm-dl-alt{
  margin-top:18px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 18px;
  font-size:13px; color:var(--faint);
}
.lm-dl-alt button, .lm-dl-alt a{
  color:var(--muted);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.2);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.lm-dl-alt button:hover, .lm-dl-alt a:hover{ color:var(--orange-soft); text-decoration-color:currentColor; }
.lm-dl-note{
  margin-top:22px; max-width:72ch;
  font-family:var(--ff-mono); font-size:10px; font-weight:500; line-height:1.8;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.lm-dl-fallback{ margin-top:14px; font-size:13.5px; color:var(--muted); }
.lm-dl-fallback a{ color:var(--orange-soft); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 9. toast, flags, small parts ------------------------------- */
.lm-toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:90;
  transform:translate(-50%,16px);
  opacity:0; visibility:hidden;
  display:inline-flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px);
  padding:13px 20px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(16,14,12,.94);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  font-family:var(--ff-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--white);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out), visibility .35s;
}
.lm-toast::before{
  content:""; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 9px 1px rgba(255,109,41,.8);
}
.lm-toast.is-on{ opacity:1; visibility:visible; transform:translate(-50%,0); }

/* in-app browser warning (Instagram, TikTok, Facebook…) */
.lm-inapp{ margin-bottom:26px; max-width:620px; }

.lm-noscript{ padding:40px 0; text-align:center; color:var(--muted); }

/* ---------- 11. email form + confirmation pages ------------------------
   The flow in front of every resource (js/signup.js drives it):
     resources/<slug>/                   hero + .lm-signup form card
     resources/<slug>/check-your-email/  .lm-state page
     resources/<slug>/confirmed/         .lm-state page with the countdown ring
     resources/<slug>/access/            the resource itself
   These pages have no step bar, so html.lm-html--flow zeroes its height in
   the jump offsets, and the form card lands --land under the header.       */
html.lm-html--flow{ --lm-steps-h:0px; }

.lm-signup{
  position:relative; width:100%; max-width:520px; margin-inline:auto;
  scroll-margin-top:var(--land);
  border:1px solid var(--line); border-radius:26px;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,109,41,.1), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085), 0 40px 90px -50px rgba(0,0,0,.9);
  backdrop-filter:blur(20px);
  padding:clamp(24px,3vw,40px);
}
.lm-signup-h{
  margin-top:12px;
  font-family:var(--ff-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,2.5vw,34px); line-height:1.02; letter-spacing:-.005em;
}
.lm-signup-sub{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); text-wrap:pretty; }

.lm-form{ margin-top:clamp(20px,2.2vw,26px); display:grid; gap:16px; }
.lm-form-label{
  display:block;
  font-family:var(--ff-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.lm-form .lm-input{ margin-top:8px; padding:13px 16px; }
.lm-form .lm-input[aria-invalid="true"]{ border-color:rgba(255,139,79,.75); }
/* the trap field bots fill in — out of sight, out of the tab order */
.lm-hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* checkboxes: a real <input>, restyled, so keyboards and screen readers work */
.lm-check{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start;
  font-size:14px; line-height:1.55; color:var(--muted); cursor:pointer;
}
.lm-check input{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin:0;
  display:grid; place-content:center;
  border:1px solid rgba(255,255,255,.22); border-radius:7px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.lm-check input::after{
  content:""; width:10px; height:5px;
  border-left:2px solid #1b0900; border-bottom:2px solid #1b0900;
  transform:translateY(-1px) rotate(-45deg) scale(0);
  transition:transform .25s var(--ease-out);
}
.lm-check input:hover{ border-color:rgba(255,109,41,.5); }
.lm-check input:checked{ background:var(--orange); border-color:transparent; box-shadow:0 0 14px -2px rgba(255,109,41,.6); }
.lm-check input:checked::after{ transform:translateY(-1px) rotate(-45deg) scale(1); }
.lm-check input:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.lm-check input[aria-invalid="true"]{ border-color:rgba(255,139,79,.9); box-shadow:0 0 0 4px rgba(255,109,41,.12); }
.lm-check a{
  color:var(--white);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.3);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.lm-check a:hover{ color:var(--orange-soft); text-decoration-color:currentColor; }
.lm-check em{
  font-style:normal; white-space:nowrap; margin-left:4px;
  font-family:var(--ff-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.lm-form .btn{ width:100%; margin-top:6px; }
.lm-form .btn[aria-busy="true"]{ pointer-events:none; filter:saturate(.7); }
.lm-form-err{
  padding:12px 16px;
  border:1px solid rgba(255,109,41,.35); border-radius:12px;
  background:rgba(255,109,41,.07);
  font-size:14px; line-height:1.55; color:var(--white);
}
.lm-form-note{ font-size:12.5px; line-height:1.65; color:var(--faint); text-wrap:pretty; }
.lm-form-note a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.2); }
.lm-form-note a:hover{ color:var(--orange-soft); }

/* "check your email" and "confirmed": one centred message, full height */
.lm-state{
  position:relative; overflow:hidden;
  min-height:100svh; display:grid; align-items:center;
  padding:calc(74px + clamp(40px,6vw,96px)) 0 clamp(72px,8.4vw,128px);
  text-align:center;
}
/* the glow's box runs top to bottom inside the section; only its sides may
   pass the screen edge (rule 6 of the skill) */
.lm-state .lm-glow{ top:0; bottom:0; left:-6%; right:-6%; }
.lm-state-in{ position:relative; z-index:1; max-width:700px; margin-inline:auto; container-type:inline-size; }
.lm-state .display{
  margin-top:clamp(22px,2.4vw,30px);
  font-size:clamp(38px,6.2vw,84px); line-height:.98; letter-spacing:-.02em;
}
.lm-state .lede{ margin:clamp(18px,2vw,26px) auto 0; max-width:40ch; }
.lm-state .lede b{ color:var(--white); font-weight:500; overflow-wrap:anywhere; }
.lm-state-icon{ display:block; width:clamp(96px,10vw,124px); height:auto; margin:0 auto clamp(26px,3vw,36px); overflow:visible; }
.lm-state-btns{ margin-top:clamp(28px,3vw,40px); display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.lm-state-status{ margin-top:16px; min-height:1.6em; font-size:14px; color:var(--muted); }
.lm-state .lm-flag{ margin:clamp(34px,4vw,48px) auto 0; max-width:600px; text-align:left; }
.lm-state .lm-flag a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.3); }
.lm-state .lm-flag a:hover{ color:var(--orange-soft); }

/* the countdown ring on the confirmed page */
.lm-count{ position:relative; width:clamp(104px,11vw,132px); aspect-ratio:1; margin:0 auto clamp(26px,3vw,36px); }
.lm-count svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.lm-count .trk{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:3; }
.lm-count .arc{
  fill:none; stroke:var(--orange); stroke-width:3; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(255,109,41,.7));
  transition:stroke-dashoffset 1s linear;
}
.lm-count b{
  position:absolute; inset:0; display:grid; place-content:center;
  font-family:var(--ff-display); font-weight:400; font-size:clamp(34px,3.6vw,44px); color:var(--white);
}
/* while waiting for the server the ring turns slowly instead */
.lm-count.is-busy svg{ animation:lm-spin 1.4s linear infinite; }
.lm-count.is-busy .arc{ transition:none; }

/* ---------- 10. responsive --------------------------------------------- */
@media (max-width:1024px){
  .lm-hero-grid{ grid-template-columns:1fr; }
  /* stacked: the diagram is in the lower part, so is the light */
  .lm-hero .lm-glow{ top:30%; right:-10%; width:120%; }
  .lm-orbit{ max-width:480px; }
  .lm-step-grid{ grid-template-columns:1fr; gap:36px; max-width:720px; }
  .lm-step-head{ position:static; }
  .lm-step-lede{ max-width:52ch; }
  .lm-circles{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
  .lm-ccard{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 20px; }
  .lm-ccard svg{ grid-row:span 3; }
  .lm-ccard .kicker{ margin-top:2px; }
  .lm-ladder{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:28px; }
  .lm-status .w{ display:none; }
}
@media (max-width:760px){
  .lm-hero{ padding-top:calc(74px + 30px); }
  .lm-hero h1{ font-size:clamp(32px,10vw,56px); }
  .lm-hero-cta .btn{ flex:1 1 auto; }
  .lm-meta{ gap:10px 18px; }
  .lm-ladder{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lm-flag{ grid-template-columns:1fr; gap:6px; padding:16px 18px; }
  .lm-steps-in{ gap:10px; }
  .lm-status{ display:none; }
  .lm-step-head h2{ font-size:clamp(26px,8vw,40px); }
  .lm-label{ font-size:16.5px; }
  .lm-row-grid{ grid-template-columns:1fr; }
  .lm-cell .lm-input{ font-size:16px; }
  .lm-row-example dl{ grid-template-columns:1fr; }
  .lm-p-two{ grid-template-columns:1fr; }
  .lm-p-two > .lm-p-block + .lm-p-block{ border-left:0; border-top:1px solid var(--line-soft); }
  .lm-p-meters{ grid-template-columns:1fr; }
  .lm-dl-btns{ width:100%; }
  .lm-dl-btns .btn{ width:100%; }
}
/* small phones: the header still has to hold the wordmark and the button */
@media (max-width:520px){
  .hdr--lm .hdr-in{ gap:12px; }
  .hdr--lm .brand{ gap:9px; }
  .hdr--lm .brand img{ width:22px; height:22px; }
  .hdr--lm .brand-txt{ font-size:11px; letter-spacing:.07em; }
  .hdr--lm .hdr-in .btn{ min-height:38px; padding:0 15px; font-size:12.5px; gap:.5em; }
}
@media (max-width:389px){
  .hdr--lm .hdr-in .btn .arw{ display:none; }
  .hdr--lm .brand-txt{ font-size:10px; letter-spacing:.05em; }
  .hdr--lm .hdr-in .btn{ padding:0 13px; font-size:12px; }
}
@media (max-width:339px){
  .hdr--lm .brand-txt{ display:none; }
}

/* the two-line title caps (see "titles never run past two lines" at the
   top). Last in the file so they win over every breakpoint above; the vw
   values are the same ones used elsewhere, the cqi term only ever shrinks. */
@supports (font-size:1cqi){
  .lm-hero h1{ font-size:min(clamp(38px,7vw,84px), 12.4cqi); }
  .lm-step-head h2{ font-size:clamp(24px, 9.8cqi, 46px); }
  .lm .section-head h2{ font-size:min(clamp(33px,5.4vw,70px), 9.4cqi); }
  .lm .close .section-head h2{ font-size:min(clamp(34px,5.8vw,80px), 9.4cqi); }
  /* state pages: widest phrase "Something went" ≈ 8.6em */
  .lm-state .display{ font-size:min(clamp(38px,6.2vw,84px), 11.4cqi); }
  @media (max-width:760px){
    .lm-hero h1{ font-size:min(clamp(32px,10vw,56px), 12.4cqi); }
    .lm .section-head h2{ font-size:min(clamp(24px,7.4vw,44px), 9.4cqi); }
    .lm .close .section-head h2{ font-size:min(clamp(26px,8vw,46px), 9.4cqi); }
  }
}

@media (prefers-reduced-motion:reduce){
  .lm-orbit .orb{ animation:none; }
  .lm-ccard:hover{ transform:none; }
}

/* print: whoever hits Cmd-P still gets something sensible */
@media print{
  .hdr, .lm-steps, .lm-hero-cta, .lm-ex-btn, .lm-chips, .lm-row-del, .lm-rows-actions,
  .lm-dl, .lm-close, .ftr, .lm-toast, body::after{ display:none !important; }
  html, body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .lm-step-head{ position:static; }
  .lm-field, .lm-row{ break-inside:avoid; }
}