/* Approved pricing mockup, scoped to the public homepage. */
body { --public-gutter:clamp(24px,4vw,80px); }
#screen-landing { --display:var(--font-display); --body:var(--font-body); --muted:#9a9aa6; --faint:#9393a0; --border:#24242c; --border-hi:#454552; --card:#101014; --cyan:#7dd8ff; --good:#77d89a; width:calc(100% - 2 * var(--public-gutter)); max-width:none; padding:0; isolation:isolate; }
#screen-landing a { color:inherit; text-decoration:none; }
#screen-landing .hp-hero { text-align:left; }
#screen-landing .hp-hero::before { max-width:calc(100% + 240px); }
#screen-landing .hp-pricing-section::before { max-width:100vw; }
#screen-landing section[id] { scroll-margin-top:110px; }
body:not(.returning) .topbar { gap:24px; padding:12px var(--public-gutter); }
body:not(.returning) .brand-tag { display:none; }
.brand-logo { width:148px; }
.auth-logo { width:232px; }
.brand { min-width:0; }
.landing-links { display:flex; align-items:center; gap:28px; margin-left:auto; }
.landing-links a { color:#a6a6b2; font-size:13px; text-decoration:none; white-space:nowrap; }
.landing-links a:hover { color:var(--text); }
body[data-screen]:not([data-screen="landing"]) .landing-links { display:none; }
@media(max-width:1100px) { body:not(.returning) .brand-tag { display:none; } .landing-links { gap:20px; } }
@media(max-width:720px) { body:not(.returning) .topbar { flex-wrap:wrap; gap:8px 12px; padding:11px 16px; } .landing-links { order:3; flex:0 0 100%; margin-left:0; padding:5px 0 2px; gap:22px; overflow-x:auto; scrollbar-width:none; } .nav-public { margin-left:auto; gap:8px; } .nav-public button { padding:9px 12px; } .brand-logo { width:126px; } #screen-landing section[id] { scroll-margin-top:140px; } }
@media(max-width:380px) { body:not(.returning) .brand-logo { width:112px; } .nav-public button { font-size:12px; padding:8px 10px; } }
@media(max-width:430px) { .landing-links { gap:14px; } .landing-links a { font-size:12px; } }
@media(max-width:380px) { .landing-links { gap:10px; } }

/* Keep the signed-in workspace and logout controls inside narrow screens. */
@media(max-width:520px) {
  body[data-screen]:not([data-screen="landing"]) .topbar { flex-wrap:wrap; gap:8px; }
  body[data-screen]:not([data-screen="landing"]) .brand-logo { width:96px; }
  #screen-builder .hero-glow { animation:none; }
}

#screen-landing .hp-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 19px;
      border: 1px solid var(--border-hi);
      border-radius: 999px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font-weight: 600;
      font-size: 13px;
      transition: transform .18s, border-color .18s, background .18s;
    }
#screen-landing .hp-button:hover { transform: translateY(-1px); border-color: #737381; }
#screen-landing .hp-button.hp-primary { background: var(--text); border-color: var(--text); color: #09090c; }
#screen-landing .hp-button.hp-primary:hover { background: #fff; }
#screen-landing .hp-button.hp-block { width: 100%; }
#screen-landing .hp-eyebrow {
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
#screen-landing .hp-gradient-text {
      background: linear-gradient(100deg, var(--text) 4%, #d2baff 46%, #80dcff 76%, #ffa093 110%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
#screen-landing .hp-period { color: var(--accent); }
#screen-landing .hp-hero {
      position: relative;
      min-height: 650px;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      align-items: center;
      gap: clamp(40px, 7vw, 86px);
      padding: 72px 0 74px;
    }
#screen-landing .hp-hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 650px;
      height: 500px;
      left: -240px;
      top: 20px;
      background: radial-gradient(ellipse, rgba(127, 92, 255, .14), transparent 68%);
      filter: blur(10px);
    }
#screen-landing .hp-hero h1 {
      margin-top: 24px;
      max-width: 690px;
      font-family: var(--display);
      font-size: clamp(42px, 4.6vw, 76px);
      font-weight: 600;
      line-height: .98;
      letter-spacing: -.055em;
    }
#screen-landing .hp-pain-questions {
      display: grid;
      gap: 8px;
      margin-top: 22px;
      list-style: none;
      color: #d8d8df;
      font-family: var(--display);
      font-size: 14px;
      line-height: 1.45;
    }
#screen-landing .hp-pain-questions li { position: relative; padding-left: 20px; }
#screen-landing .hp-pain-questions li::before {
      content: "";
      position: absolute;
      left: 1px;
      top: .58em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--cyan));
      box-shadow: 0 0 0 4px rgba(177,140,255,.08);
    }
#screen-landing .hp-hero-support {
      max-width: 590px;
      margin-top: 24px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.72;
    }
#screen-landing .hp-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
#screen-landing .hp-hero-actions .hp-primary { min-width: 210px; }
#screen-landing .hp-hero-pricing-link {
      color: #d7d7df;
      font-size: 13px;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-color: rgba(177,140,255,.55);
      text-underline-offset: 5px;
    }
#screen-landing .hp-hero-pricing-link:hover { color: #fff; }
#screen-landing .hp-hero-visual {
      position: relative;
      min-height: 510px;
      overflow: hidden;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.1);
      background: #111116;
      box-shadow: 0 40px 110px rgba(0,0,0,.58), 0 12px 58px rgba(124,90,255,.14);
    }
#screen-landing .hp-hero-visual > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 64% center;
      filter: saturate(.88) contrast(1.04);
    }
#screen-landing .hp-hero-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 48%, rgba(5,5,8,.92));
    }
#screen-landing .hp-live-card {
      position: absolute;
      z-index: 2;
      left: 22px;
      right: 22px;
      bottom: 22px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      background: rgba(9,9,12,.76);
      backdrop-filter: blur(16px);
    }
#screen-landing .hp-live-head { display: flex; align-items: center; gap: 10px; color: #d8d8df; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
#screen-landing .hp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,128,111,.13); }
#screen-landing .hp-live-head .hp-timer { margin-left: auto; color: var(--muted); }
#screen-landing .hp-live-card strong { display: block; margin-top: 13px; font-family: var(--display); font-size: 18px; }
#screen-landing .hp-wave { display: flex; align-items: center; gap: 4px; height: 24px; margin-top: 14px; }
#screen-landing .hp-wave i { width: 3px; border-radius: 3px; background: linear-gradient(var(--cyan), var(--accent)); }
#screen-landing .hp-wave i:nth-child(1), #screen-landing .hp-wave i:nth-child(9) { height: 7px; }
#screen-landing .hp-wave i:nth-child(2), #screen-landing .hp-wave i:nth-child(8) { height: 13px; }
#screen-landing .hp-wave i:nth-child(3), #screen-landing .hp-wave i:nth-child(7) { height: 20px; }
#screen-landing .hp-wave i:nth-child(4), #screen-landing .hp-wave i:nth-child(6) { height: 15px; }
#screen-landing .hp-wave i:nth-child(5) { height: 24px; background: linear-gradient(#ff8cd1, var(--accent)); }
#screen-landing .hp-trust-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
#screen-landing .hp-trust-strip div { padding: 22px 18px; text-align: center; color: var(--muted); font-size: 12px; }
#screen-landing .hp-trust-strip div + div { border-left: 1px solid var(--border); }
#screen-landing .hp-trust-strip strong { display: block; margin-bottom: 5px; color: var(--text); font-family: var(--display); font-size: 14px; font-weight: 600; }
#screen-landing .hp-section { padding-top: 112px; }
#screen-landing .hp-section-heading { max-width: 760px; }
#screen-landing .hp-section-heading.hp-center { margin: 0 auto; text-align: center; }
#screen-landing .hp-section-heading h2 {
      margin-top: 13px;
      font-family: var(--display);
      font-size: clamp(32px, 4.5vw, 52px);
      font-weight: 600;
      letter-spacing: -.045em;
      line-height: 1.04;
    }
#screen-landing .hp-section-heading p:not(.hp-eyebrow) { margin-top: 18px; color: var(--muted); line-height: 1.7; font-size: 15px; }
#screen-landing .hp-use-cases { padding-top: 112px; }
#screen-landing .hp-use-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 38px; }
#screen-landing .hp-use-case {
      min-height: 265px;
      padding: 32px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(17,17,22,.98), rgba(9,9,12,.98));
    }
#screen-landing .hp-use-case-label { color: var(--accent); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#screen-landing .hp-use-case h3 { max-width: 460px; margin-top: 20px; font-family: var(--display); font-size: 27px; line-height: 1.08; letter-spacing: -.035em; }
#screen-landing .hp-use-case p { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }
#screen-landing .hp-use-case p { max-width:70ch; }

#screen-landing .hp-about-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; }
#screen-landing .hp-about-story { max-width:70ch; color:var(--muted); font-size:16px; line-height:1.8; }
#screen-landing .hp-about-story p + p { margin-top:18px; }
#screen-landing .hp-founders { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:44px; }
#screen-landing .hp-founder { display:grid; grid-template-columns:clamp(140px,13vw,220px) minmax(0,1fr); gap:clamp(20px,2vw,32px); padding:clamp(22px,2.5vw,40px); border:1px solid var(--border); border-radius:22px; background:linear-gradient(135deg,#17141e,#101014); align-items:start; }
#screen-landing .hp-founder-photo { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:14px; }
#screen-landing .hp-founder-role { margin:0; color:#c5b0e7; font-size:12px; line-height:1.6; }
#screen-landing .hp-founder-role span { white-space:nowrap; color:var(--muted); }
#screen-landing .hp-founder h3 { margin:10px 0 16px; font:500 clamp(23px,2vw,30px)/1.15 var(--display); letter-spacing:-.035em; }
#screen-landing .hp-founder-copy > p:not(.hp-founder-role) { max-width:58ch; color:var(--muted); font-size:14px; line-height:1.75; }
#screen-landing .hp-founder a { display:inline-block; margin-top:22px; padding:4px 0; color:#d4c1ee; font-size:13px; text-decoration:underline; text-underline-offset:5px; }
#screen-landing .hp-founder a:hover { color:#fff; }
@media(max-width:1150px) { #screen-landing .hp-founder { grid-template-columns:1fr; } #screen-landing .hp-founder-photo { width:150px; } }
@media(max-width:720px) { #screen-landing .hp-about-intro, #screen-landing .hp-founders { grid-template-columns:1fr; } #screen-landing .hp-founder { grid-template-columns:112px minmax(0,1fr); gap:20px; } #screen-landing .hp-founder-photo { width:112px; } #screen-landing .hp-founder-copy > p:not(.hp-founder-role) { font-size:13px; } }
@media(max-width:430px) { #screen-landing .hp-founder { grid-template-columns:1fr; } #screen-landing .hp-founder-photo { width:144px; } }
/* Four-step product example. Motion is confined to this section. */
#screen-landing .hp-walkthrough { margin-top: 38px; border: 1px solid #32303d; border-radius: 24px; background: #0d0d12; overflow: hidden; }
#screen-landing .hp-walkthrough-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding: 14px 28px; border-bottom: 1px solid var(--border); }
#screen-landing .hp-walkthrough-top > span { display: flex; align-items: center; gap: 10px; color: #cecad8; font-size: 12px; }
#screen-landing .hp-demo-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #b18cff55; }
#screen-landing .hp-demo-toggle { min-height: 40px; padding: 8px 12px; border-color: #3e3b49; border-radius: 8px; background: transparent; color: #d6d2e0; font-size: 12px; font-weight: 500; white-space: nowrap; }
#screen-landing .hp-demo-toggle:hover { background: #ffffff08; border-color: #8c76ad; }
#screen-landing .hp-walkthrough-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
#screen-landing .hp-process-steps { display: flex; flex-direction: column; gap: 4px; padding: 24px; }
#screen-landing .hp-process-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 14px; width: 100%; padding: 22px 18px; border: 1px solid transparent; border-radius: 12px; text-align: left; background: transparent; color: #ceccd7; }
#screen-landing .hp-process-step:hover { background: #ffffff03; }
#screen-landing .hp-process-step:disabled { opacity: 1; cursor: default; }
#screen-landing .hp-process-step[aria-selected="true"] { background: linear-gradient(120deg, #b18cff11, #b18cff04); border-color: #b18cff42; color: #f2eefb; }
#screen-landing .hp-process-step:focus-visible, #screen-landing .hp-process-panel:focus-visible { border-radius: 12px; outline-offset: -3px; }
#screen-landing .hp-process-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid #393440; color: #aaa1bc; font: 500 12px var(--display); }
#screen-landing .hp-process-step[aria-selected="true"] .hp-process-number { color: #d9c4ff; background: #b18cff19; border-color: #b18cff5c; }
#screen-landing .hp-process-step strong { display: block; margin: 5px 0 9px; font: 500 18px/1.25 var(--display); letter-spacing: -.025em; }
#screen-landing .hp-process-description { display: block; color: #a4a0af; font-size: 13px; font-weight: 400; line-height: 1.65; }
#screen-landing .hp-process-stage { min-width: 0; padding: 24px 32px 28px; border-left: 1px solid var(--border); background: radial-gradient(ellipse at 90% 0%, #b18cff0c, transparent 65%), #101016; }
#screen-landing .hp-demo-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #a4a0af; font-size: 10px; letter-spacing: .06em; }
#screen-landing .hp-demo-caption span:last-child { color: #afa0c1; }
#screen-landing .hp-process-panel { padding-top: 29px; }
#screen-landing .hp-process-panel[hidden], #screen-landing .hp-walkthrough [hidden] { display: none; }
#screen-landing .hp-walkthrough.is-enhanced .hp-process-stage { display: grid; grid-template-rows: auto 1fr; }
#screen-landing .hp-walkthrough.is-enhanced .hp-process-panel { grid-area: 2 / 1; min-width: 0; }
/* Reserve the tallest example without exposing inactive panels to focus or assistive technology. */
#screen-landing .hp-walkthrough.is-enhanced .hp-process-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
#screen-landing .hp-walkthrough:not(.is-enhanced) .hp-process-panel + .hp-process-panel { margin-top: 30px; border-top: 1px solid var(--border); }
#screen-landing .hp-demo-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: #bba7d6; }
#screen-landing .hp-demo-heading h3 { margin: 10px 0 25px; font: 500 clamp(24px, 2.2vw, 31px)/1.13 var(--display); letter-spacing: -.035em; }
#screen-landing .hp-demo-label { display: block; margin-bottom: 9px; color: #b5a8c9; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
#screen-landing .hp-demo-brief { padding: 19px 21px; border: 1px solid #41344f; border-radius: 13px; background: linear-gradient(135deg, #b18cff0e, #b18cff02); }
#screen-landing .hp-demo-brief p { font-size: 13px; line-height: 1.7; color: #d3cfdd; }
#screen-landing .hp-demo-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
#screen-landing .hp-demo-tags span { padding: 5px 9px; border: 1px solid #ffffff14; border-radius: 5px; color: #b3adbf; font-size: 10px; }
#screen-landing .hp-demo-transform { display: flex; align-items: center; justify-content: center; gap: 12px; height: 40px; color: #bba5df; }
#screen-landing .hp-demo-transform span { width: 55px; height: 1px; background: linear-gradient(90deg, transparent, #b18cff55); }
#screen-landing .hp-demo-transform span:last-child { transform: rotate(180deg); }
#screen-landing .hp-demo-transform b { font-size: 18px; font-weight: 400; }
#screen-landing .hp-demo-buyers { display: grid; gap: 9px; }
#screen-landing .hp-demo-buyer { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid #34303e; border-radius: 11px; background: #17151e; }
#screen-landing .hp-demo-avatar { display: grid; place-items: center; width: 37px; height: 37px; flex-shrink: 0; border: 1px solid #b18cff33; border-radius: 11px; background: #b18cff12; color: #c8b0ee; font: 500 15px var(--display); }
#screen-landing .hp-demo-avatar-blue { background: #7dd8ff10; border-color: #7dd8ff30; color: #a4d4e8; }
#screen-landing .hp-demo-avatar-green { background: #77d89a10; border-color: #77d89a30; color: #a5d6b5; }
#screen-landing .hp-demo-buyer strong { display: block; font-size: 12px; font-weight: 500; }
#screen-landing .hp-demo-buyer small { margin-left: 5px; color: #a5a0af; font-size: 10px; font-weight: 400; }
#screen-landing .hp-demo-buyer p { margin-top: 5px; font-size: 11px; color: #b5afc0; line-height: 1.5; }
#screen-landing .hp-demo-check { margin-left: auto; color: #a18cbf; font-size: 12px; }
#screen-landing .hp-demo-call { padding: 22px; border: 1px solid #39333f; border-radius: 15px; background: #14121b; }
#screen-landing .hp-demo-call-person { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
#screen-landing .hp-demo-call-person strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; }
#screen-landing .hp-demo-call-person div > span { display: block; font-size: 10px; color: #aca5b8; }
#screen-landing .hp-demo-call-status { margin-left: auto; padding: 6px 8px; border: 1px solid #77d89a33; border-radius: 5px; color: #a4d6b4; font-size: 9px; }
#screen-landing .hp-demo-wave { display: flex; height: 95px; justify-content: center; align-items: center; gap: 5px; }
#screen-landing .hp-demo-wave i { height: 23px; width: 4px; border-radius: 4px; background: linear-gradient(#bda0ee, #7bb7d1); transform: scaleY(.4); }
#screen-landing .hp-demo-wave i:nth-child(3n) { height: 43px; }
#screen-landing .hp-demo-wave i:nth-child(3n + 1) { height: 33px; }
#screen-landing .hp-demo-wave i:nth-child(5n) { height: 53px; }
#screen-landing .hp-demo-message { width: 88%; padding: 14px 16px; border-radius: 12px 12px 12px 3px; background: #ffffff06; border: 1px solid #ffffff0d; }
#screen-landing .hp-demo-message > span { color: #afa5bf; font-size: 10px; }
#screen-landing .hp-demo-message p { margin-top: 7px; font-size: 13px; line-height: 1.65; }
#screen-landing .hp-demo-message-rep { margin-top: 14px; margin-left: auto; border-color: #b18cff33; border-radius: 12px 12px 3px 12px; background: #b18cff0e; }
#screen-landing .hp-demo-bottom-note { margin: 20px 15px 0; text-align: center; font-size: 11px; line-height: 1.7; color: #a59cb4; }
#screen-landing .hp-demo-feedback { margin-bottom: 14px; padding: 20px; border: 1px solid #36303e; border-radius: 12px; background: #17151c; }
#screen-landing .hp-demo-positive { color: #a4cfb2; }
#screen-landing .hp-demo-feedback p { font-size: 13px; line-height: 1.7; color: #d3cfdd; }
#screen-landing .hp-demo-feedback blockquote { margin: 16px 0 0; padding-left: 14px; border-left: 2px solid #77d89a66; color: #a9c1b1; font-size: 12px; line-height: 1.7; }
#screen-landing .hp-demo-drill { display: flex; gap: 16px; align-items: center; padding: 19px; background: #b18cff0b; border: 1px solid #b18cff38; border-radius: 12px; }
#screen-landing .hp-demo-drill-icon { display: grid; place-items: center; width: 33px; height: 33px; flex-shrink: 0; border-radius: 9px; background: #b18cff16; color: #c5b0e7; font-size: 20px; }
#screen-landing .hp-demo-drill strong { display: block; color: #dad0e9; font-size: 13px; font-weight: 500; line-height: 1.6; }
#screen-landing .hp-demo-team { padding: 0 16px; border: 1px solid #3b3247; border-radius: 12px; background: #16131c; }
#screen-landing .hp-demo-table-head, #screen-landing .hp-demo-team-row { display: grid; grid-template-columns: .65fr 1fr 1fr; align-items: center; gap: 16px; padding: 17px 0; }
#screen-landing .hp-demo-table-head { color: #ada1bf; font-size: 10px; }
#screen-landing .hp-demo-team-row { border-top: 1px solid #ffffff0c; font-size: 11px; }
#screen-landing .hp-demo-team-row > strong { font-weight: 500; }
#screen-landing .hp-demo-team-row > span { color: #b6acbf; }
#screen-landing .hp-demo-team-row small { display: block; margin-top: 6px; color: #a69ab6; font-size: 10px; }
#screen-landing .hp-demo-meter { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: #ffffff0d; }
#screen-landing .hp-demo-meter i { display: block; height: 100%; width: var(--completion); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #8b68c8, #b49ad8); }
#screen-landing .hp-demo-team-focus { margin-top: 18px; padding: 20px; border: 1px solid #7dd8ff26; border-radius: 12px; background: #7dd8ff04; }
#screen-landing .hp-demo-team-focus strong { display: block; font: 500 21px var(--display); color: #ccdce4; }
#screen-landing .hp-demo-team-focus p { margin-top: 9px; font-size: 12px; line-height: 1.7; color: #aeb3c1; }
#screen-landing .hp-demo-evidence { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #7dd8ff15; color: #adc5d1; font-size: 11px; line-height: 1.5; }
/* Step 04 shows the manager's coaching view: rep progress, one rep's call debrief and the
   team focus. The table rules above stay for the French and German pages until they adopt it. */
#screen-landing .hp-demo-reps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#screen-landing .hp-demo-rep { padding: 12px 14px; border: 1px solid #34303e; border-radius: 11px; background: #17151e; font-size: 10px; }
#screen-landing .hp-demo-rep strong { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 500; }
#screen-landing .hp-demo-rep small { display: block; margin: 6px 0 4px; color: #a69ab6; font-size: 10px; }
#screen-landing .hp-demo-rep-open { border-color: #b18cff5c; background: linear-gradient(135deg, #b18cff14, #b18cff04); }
#screen-landing .hp-demo-trend-up { color: #a4cfb2; }
#screen-landing .hp-demo-trend-down { color: #e8aaa1; }
#screen-landing .hp-demo-debrief { margin-top: 9px; padding: 14px 16px; border: 1px solid #b18cff38; border-radius: 12px; background: #b18cff0b; }
#screen-landing .hp-demo-debrief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#screen-landing .hp-demo-debrief-head .hp-demo-label { margin: 0; }
#screen-landing .hp-demo-debrief-score { color: #e6dcff; font: 500 18px var(--display); white-space: nowrap; }
#screen-landing .hp-demo-debrief-score small { margin-left: 1px; color: #a69ab6; font-size: 10px; }
#screen-landing .hp-demo-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 11px 0 12px; padding: 0; list-style: none; }
#screen-landing .hp-demo-skills li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 6px; color: #b6acbf; font-size: 10px; }
#screen-landing .hp-demo-skills b { color: #d3cfdd; font-weight: 500; }
#screen-landing .hp-demo-skills .hp-demo-meter { grid-column: 1 / -1; height: 3px; }
/* Same bands as the in-app debrief: 7 and above reads as strong, 3 and below as weak. */
#screen-landing .hp-demo-skill-high b { color: #a4cfb2; }
#screen-landing .hp-demo-skill-high .hp-demo-meter i { background: linear-gradient(90deg, #5f9c74, #a4cfb2); }
#screen-landing .hp-demo-skill-low b { color: #e8aaa1; }
#screen-landing .hp-demo-skill-low .hp-demo-meter i { background: linear-gradient(90deg, #b9776f, #e8aaa1); }
#screen-landing .hp-demo-debrief-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 11px; border-top: 1px solid #ffffff0c; }
#screen-landing .hp-demo-debrief-notes p { color: #d3cfdd; font-size: 11px; line-height: 1.55; }
#screen-landing .hp-demo-debrief-notes .hp-demo-label { margin-bottom: 4px; }
#screen-landing .hp-demo-debrief + .hp-demo-team-focus { margin-top: 9px; padding: 14px 16px; }
#screen-landing .hp-demo-debrief + .hp-demo-team-focus strong { font-size: 17px; }
#screen-landing .hp-demo-debrief + .hp-demo-team-focus p { margin-top: 5px; font-size: 11px; line-height: 1.55; }
#screen-landing .hp-walkthrough-footer { display: flex; align-items: center; gap: 15px; padding: 22px 28px; border-top: 1px solid var(--border); }
#screen-landing .hp-demo-loop { font-size: 27px; color: #bca6d9; }
#screen-landing .hp-walkthrough-footer p { color: #a59db1; font-size: 12px; line-height: 1.7; }
#screen-landing .hp-walkthrough-footer strong { color: #d9d0e4; font-weight: 500; }
#screen-landing .hp-demo-position { margin-left: auto; padding-left: 16px; color: #b5a6ca; font: 500 12px var(--display); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  #screen-landing .hp-walkthrough.is-playing .hp-process-step[aria-selected="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: linear-gradient(90deg, #b18cff, #7dd8ff); transform-origin: left; animation: hp-demo-fill 9s linear both; }
  #screen-landing .hp-walkthrough.is-playing .hp-process-panel:not([hidden]) .hp-demo-enter { animation-name: hp-demo-enter; animation-duration: .7s; animation-fill-mode: both; }
  #screen-landing .hp-demo-buyers .hp-demo-enter:nth-child(1) { animation-delay: .65s; }
  #screen-landing .hp-demo-buyers .hp-demo-enter:nth-child(2) { animation-delay: 1s; }
  #screen-landing .hp-demo-buyers .hp-demo-enter:nth-child(3) { animation-delay: 1.35s; }
  #screen-landing .hp-demo-message.hp-demo-enter { animation-delay: .7s; }
  #screen-landing .hp-demo-message-rep.hp-demo-enter { animation-delay: 1.65s; }
  #screen-landing .hp-demo-feedback + .hp-demo-feedback { animation-delay: .6s; }
  #screen-landing .hp-demo-drill.hp-demo-enter, #screen-landing .hp-demo-team-focus.hp-demo-enter { animation-delay: 1s; }
  #screen-landing .hp-walkthrough.is-playing .hp-process-panel:not([hidden]) .hp-demo-wave i { animation-name: hp-demo-voice; animation-duration: 1.1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
  #screen-landing .hp-demo-wave i:nth-child(2n) { animation-delay: -.4s; }
  #screen-landing .hp-demo-wave i:nth-child(3n) { animation-delay: -.7s; }
  #screen-landing .hp-demo-wave i:nth-child(5n) { animation-delay: -.2s; }
  #screen-landing .hp-walkthrough.is-playing .hp-process-panel:not([hidden]) .hp-demo-meter i { animation: hp-demo-fill 1.4s .3s both; }
  #screen-landing .hp-demo-debrief.hp-demo-enter { animation-delay: .5s; }
  #screen-landing .hp-walkthrough.is-playing .hp-process-panel:not([hidden]) .hp-demo-skills .hp-demo-meter i { animation-delay: .8s; }
}
@keyframes hp-demo-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hp-demo-voice { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes hp-demo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  #screen-landing .hp-walkthrough *, #screen-landing .hp-walkthrough *::before,
  #screen-landing .hp-walkthrough *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 940px) {
  #screen-landing .hp-process-steps { padding: 16px; }
  #screen-landing .hp-process-step { padding: 18px 12px; gap: 10px; grid-template-columns: 28px minmax(0,1fr); }
  #screen-landing .hp-process-number { width: 28px; height: 28px; }
  #screen-landing .hp-process-stage { padding: 24px 22px; }
  #screen-landing .hp-process-step strong { font-size: 16px; }
  #screen-landing .hp-process-description { font-size: 12px; }
}
@media (max-width: 720px) {
  #screen-landing .hp-walkthrough { border-radius: 18px; }
  #screen-landing .hp-walkthrough-top { padding: 12px 16px; gap: 8px; }
  #screen-landing .hp-walkthrough-top > span { max-width: 170px; font-size: 11px; line-height: 1.5; }
  #screen-landing .hp-demo-toggle { padding: 8px; font-size: 11px; }
  #screen-landing .hp-walkthrough-body { grid-template-columns: 1fr; }
  #screen-landing .hp-process-steps { padding: 12px; }
  #screen-landing .hp-process-step { padding: 12px; }
  #screen-landing .hp-process-step strong { margin-bottom: 4px; }
  #screen-landing .hp-walkthrough.is-enhanced .hp-process-step[aria-selected="false"] .hp-process-description { display: none; }
  #screen-landing .hp-walkthrough.is-enhanced .hp-process-step[aria-selected="true"] .hp-process-description { min-height: 8.25em; }
  #screen-landing .hp-process-stage { padding: 22px 20px 28px; border-left: 0; border-top: 1px solid var(--border); min-height: 590px; }
  #screen-landing .hp-demo-heading h3 { font-size: 26px; }
  #screen-landing .hp-demo-call { padding: 16px; }
  #screen-landing .hp-demo-call-status { margin-left: 48px; }
  #screen-landing .hp-demo-table-head, #screen-landing .hp-demo-team-row { gap: 10px; }
  #screen-landing .hp-demo-rep { padding: 10px; }
  #screen-landing .hp-demo-debrief { padding: 12px; }
  #screen-landing .hp-demo-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  #screen-landing .hp-demo-debrief-notes { grid-template-columns: 1fr; gap: 8px; }
  #screen-landing .hp-walkthrough-footer { padding: 18px; align-items: flex-start; }
  #screen-landing .hp-walkthrough-footer strong { display: block; }
  #screen-landing .hp-demo-position { display: none; }
}
@media (max-width: 380px) {
  #screen-landing .hp-process-stage { padding: 20px 14px; }
  #screen-landing .hp-demo-buyer small { display: block; margin: 4px 0 0; }
  #screen-landing .hp-demo-caption { font-size: 9px; }
  /* Give each skill label the full column so none wraps; its score moves beside the bar. */
  #screen-landing .hp-demo-skills li { grid-template-areas: "label label" "meter score"; align-items: center; gap: 4px 6px; }
  #screen-landing .hp-demo-skills li > span:first-child { grid-area: label; }
  #screen-landing .hp-demo-skills b { grid-area: score; }
  #screen-landing .hp-demo-skills .hp-demo-meter { grid-area: meter; }
}
#screen-landing .hp-pricing-section { position: relative; padding-top: 124px; }
#screen-landing .hp-pricing-section::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 840px;
      height: 560px;
      left: 50%;
      top: 45px;
      transform: translateX(-50%);
      background: radial-gradient(ellipse, rgba(177,140,255,.12), transparent 68%);
    }
#screen-landing .hp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 46px; align-items: stretch; }
#screen-landing .hp-currency-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin:32px 0 -14px; color:var(--muted); font-size:13px; }
#screen-landing .hp-currency-row select { width:auto; max-width:100%; min-height:44px; padding:10px 34px 10px 12px; font-size:13px; }
#screen-landing .hp-currency-row p { flex:0 0 100%; text-align:center; font-size:12px; line-height:1.5; }
#screen-landing .hp-currency-row p:empty { display:none; }
#screen-landing .hp-price b { font:inherit; }
#screen-landing .hp-price { white-space:nowrap; }
#screen-landing .hp-price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 500px;
      padding: 29px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(17,17,22,.98), rgba(11,11,15,.98));
      box-shadow: 0 28px 80px rgba(0,0,0,.25);
    }
#screen-landing .hp-price-card.hp-featured {
      border-color: rgba(177,140,255,.72);
      box-shadow: 0 28px 90px rgba(124,90,255,.14);
    }
#screen-landing .hp-popular {
      position: absolute;
      top: 18px;
      right: 18px;
      padding: 6px 10px;
      border-radius: 999px;
      color: #e6dcff;
      background: rgba(177,140,255,.14);
      border: 1px solid rgba(177,140,255,.35);
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
#screen-landing .hp-plan-name { color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
#screen-landing .hp-price { margin-top: 20px; font-family: var(--display); font-size: clamp(34px,3.5vw,48px); font-weight: 600; letter-spacing: -.05em; }
#screen-landing .hp-price sup { position: relative; top: -16px; margin-right: 3px; font-size: 19px; font-weight: 500; }
#screen-landing .hp-price span { margin-left: 5px; color: var(--muted); font-family: var(--body); font-size: 12px; font-weight: 400; letter-spacing: 0; }
#screen-landing .hp-capacity { margin-top: 17px; font-family: var(--display); font-size: 22px; font-weight: 600; }
#screen-landing .hp-plan-for { min-height: 68px; margin-top: 9px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
#screen-landing .hp-plan-divider { height: 1px; margin: 24px 0 22px; background: var(--border); }
#screen-landing .hp-plan-list { display: grid; gap: 13px; list-style: none; color: #d5d5dc; font-size: 13px; line-height: 1.45; }
#screen-landing .hp-plan-list li { position: relative; padding-left: 22px; }
#screen-landing .hp-plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--good); }
#screen-landing .hp-price-card .hp-button { margin-top: auto; }
#screen-landing .hp-included {
      margin-top: 24px;
      padding: 22px 24px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 24px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
#screen-landing .hp-included strong { font-family: var(--display); font-size: 15px; }
#screen-landing .hp-included p { margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
#screen-landing .hp-included-tag { color: #d8cdf1; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
#screen-landing .hp-faq { max-width: 820px; margin: 0 auto; }
#screen-landing .hp-faq-list { margin-top: 36px; }
#screen-landing details { padding: 19px 2px; border-top: 1px solid var(--border); }
#screen-landing details:last-child { border-bottom: 1px solid var(--border); }
#screen-landing summary { position: relative; padding-right: 30px; cursor: pointer; list-style: none; font-family: var(--display); font-size: 16px; font-weight: 600; }
#screen-landing summary::-webkit-details-marker { display: none; }
#screen-landing summary::after { content: "+"; position: absolute; right: 4px; color: var(--accent); font-size: 20px; font-weight: 400; }
#screen-landing details[open] summary::after { content: "−"; }
#screen-landing details p { padding: 13px 34px 2px 0; color: var(--muted); font-size: 13.5px; line-height: 1.72; }
#screen-landing .hp-final-cta { position: relative; padding: 130px 20px 110px; text-align: center; overflow: hidden; }
#screen-landing .hp-final-cta::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 760px;
      height: 500px;
      left: 50%;
      bottom: -160px;
      transform: translateX(-50%);
      background: radial-gradient(ellipse, rgba(125,216,255,.13), rgba(177,140,255,.08), transparent 70%);
    }
#screen-landing .hp-final-cta h2 { font-family: var(--display); font-size: clamp(34px, 5vw, 54px); font-weight: 600; letter-spacing: -.045em; }
#screen-landing .hp-final-cta p { max-width: 570px; margin: 17px auto 27px; color: var(--muted); line-height: 1.7; }
#screen-landing footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 16px;
      padding: 28px 0 40px;
      border-top: 1px solid var(--border);
      color: var(--faint);
      font-size: 11px;
    }
#screen-landing footer img { width: 148px; }
@media (max-width: 940px)  {
      .hp-brand span { display: none; }
#screen-landing .hp-nav-links { gap: 20px; }
#screen-landing .hp-hero { grid-template-columns: 1fr; padding-top: 58px; }
#screen-landing .hp-hero-visual { min-height: 470px; }
#screen-landing .hp-use-case-grid { grid-template-columns: 1fr; }
#screen-landing .hp-pricing-grid { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; }
#screen-landing .hp-price-card { min-height: auto; }
#screen-landing .hp-price-card .hp-button { margin-top: 30px; }
    }
@media (max-width: 720px)  {
      #screen-landing { width: min(100% - 28px, 1160px); }
#screen-landing .hp-topbar { flex-wrap: wrap; gap: 10px 16px; padding: 11px 16px; }
#screen-landing .hp-nav-links {
        order: 3;
        width: 100%;
        margin-left: 0;
        padding: 5px 0 2px;
        gap: 22px;
        overflow-x: auto;
        scrollbar-width: none;
      }
#screen-landing .hp-nav-links::-webkit-scrollbar { display: none; }
#screen-landing .hp-nav-links a { flex: 0 0 auto; }
#screen-landing .hp-nav-actions { margin-left: auto; }
#screen-landing .hp-nav-actions .hp-button:first-child { display: none; }
#screen-landing .hp-hero { min-height: 0; padding-bottom: 54px; }
#screen-landing .hp-hero h1 { font-size: clamp(39px, 12vw, 54px); }
#screen-landing .hp-hero-visual { min-height: 410px; }
#screen-landing .hp-trust-strip { grid-template-columns: 1fr 1fr; }
#screen-landing .hp-trust-strip div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
#screen-landing .hp-trust-strip div:nth-child(4) { border-top: 1px solid var(--border); }
#screen-landing .hp-section, #screen-landing .hp-pricing-section { padding-top: 88px; }
#screen-landing .hp-included { grid-template-columns: 1fr; }
#screen-landing .hp-included-tag { white-space: normal; }
#screen-landing .hp-signup-modal { padding: 27px 22px 24px; }
    }
@media (max-width: 430px)  {
      .hp-concept-bar { font-size: 9px; }
#screen-landing .hp-brand img { width: 94px; }
#screen-landing .hp-nav-links { gap: 18px; }
#screen-landing .hp-nav-links a { font-size: 11.5px; }
#screen-landing .hp-button { padding-left: 15px; padding-right: 15px; }
#screen-landing .hp-hero-visual { min-height: 355px; border-radius: 21px; }
#screen-landing .hp-live-card { left: 14px; right: 14px; bottom: 14px; }
#screen-landing .hp-price-card { padding: 24px 21px; }
#screen-landing .hp-price { font-size: 44px; }
#screen-landing .hp-final-cta { padding-left: 0; padding-right: 0; }
    }
  
#screen-landing .hp-eyebrow { font-size:12px; line-height:1.5; }
#screen-landing .hp-hero-pricing-link { color:#d7d7df; text-decoration:underline; text-underline-offset:5px; }
#screen-landing .hp-popular { font-size:10px; }
#screen-landing .hp-use-case-label { font-size:12px; }
#screen-landing .hp-plan-name { font-size:12px; }
#screen-landing .hp-plan-for { min-height:68px; }
#screen-landing .hp-price-card .hp-button { margin-top:auto; }
#screen-landing .hp-plan-list { margin-bottom:28px; }
#screen-landing footer img { width:148px; }
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
@media(max-width:720px) { body { --public-gutter:16px; } #screen-landing { width:calc(100% - 2 * var(--public-gutter)); } }

.auth-heading { margin:25px 0 14px; font-family:var(--font-display); font-size:clamp(29px,5vw,38px); line-height:1.12; letter-spacing:-.035em; }
.auth-identity { display:grid; gap:16px; margin-top:26px; }
.auth-identity { text-align:left; }
#nav-invite { display:inline-flex; }
.auth-identity label { display:grid; gap:8px; font-size:13px; color:var(--muted); }
.auth-identity .field-hint a { color:#b2a6c2; text-underline-offset:3px; }
.auth-plan-summary { margin:0; padding:15px; border:1px solid rgba(125,216,255,.2); border-radius:12px; background:rgba(125,216,255,.045); font-size:12px; line-height:1.7; color:var(--muted); }
.selected-plan-reminder { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; padding:18px 21px; border:1px solid var(--border); border-radius:14px; }
.selected-plan-reminder p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.selected-plan-reminder button { flex-shrink:0; }
.subscription-panel { margin:24px 0 40px; }
.subscription-panel h3 { font-family:var(--font-display); font-size:28px; letter-spacing:-.03em; margin:0 0 15px; }
.subscription-panel > .muted { font-size:13px; line-height:1.7; margin:16px 0; }
.subscription-current { padding:24px; margin:20px 0; border-radius:16px; border:1px solid rgba(125,216,255,.3); background:rgba(125,216,255,.04); }
.subscription-current > strong { font-size:18px; }
.subscription-current > p { margin:12px 0; font-size:13px; line-height:1.6; color:var(--muted); }
/* "Pay now": a plan payment that failed, or a first payment not completed. */
.payment-due { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:14px 0; padding:14px 16px; border:1px solid rgba(255,90,90,.35); border-radius:12px; background:rgba(255,90,90,.06); }
.payment-due p { flex:1 1 260px; margin:0; font-size:13.5px; line-height:1.6; color:#ffc2c2; }
.payment-due button { flex-shrink:0; }
.paywall-body > .payment-due { margin:18px 0 8px; }
/* An upgrade waiting for its payment is a next step, not a failure. */
.payment-due.upgrade-waiting { border-color:rgba(177,140,255,.35); background:rgba(177,140,255,.06); }
.payment-due.upgrade-waiting p { color:#e6dcff; }
.subscription-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.subscription-card { display:flex; flex-direction:column; padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--card); }
.subscription-card.selected { border-color:rgba(177,140,255,.6); }
.subscription-price { font-family:var(--font-display); font-size:28px; letter-spacing:-.035em; }
.subscription-card > p:not(.overline) { font-size:13px; color:var(--muted); line-height:1.7; margin:15px 0 24px; }
.subscription-card > p.plan-minutes { margin:12px 0 4px; color:var(--text); }
.subscription-card > p.plan-detail { margin:0 0 6px; font-size:12px; }
.subscription-card > p.plan-detail:last-of-type { margin-bottom:22px; }
.subscription-card .overline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.plan-badge { padding:3px 9px; border-radius:999px; border:1px solid rgba(177,140,255,.45); color:#d8cdf1; font-size:9.5px; letter-spacing:.12em; }
.subscription-card button { margin-top:auto; width:100%; font-size:12px; padding:12px; }
.subscription-error { margin-top:20px; }
.bundle-section { margin:8px 0 28px; }
#bundle-heading { margin-bottom:8px; }
#bundle-note { margin:0; font-size:13px; line-height:1.6; }
#paywall-dialog.paywall-dialog { width:min(880px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; overflow:auto; }
.paywall-body { padding:30px; }
#paywall-dialog h2 { margin-bottom:10px; }
.paywall-lead { margin:0 0 6px; color:var(--muted); font-size:14px; line-height:1.6; }
.paywall-grid { margin:20px 0 4px; }
.paywall-body > .subscription-card { max-width:420px; margin:20px 0 12px; }
.paywall-compare { margin:4px 0 16px; color:var(--muted); font-size:13px; line-height:1.6; }
.paywall-extra { display:block; margin-top:4px; }
.paywall-body a { color:var(--accent); font-size:13px; }
#pricing-topup-note { margin-top:10px; }
@media(max-width:720px) {
  .subscription-grid { grid-template-columns:1fr; }
  .paywall-body { padding:22px 18px; }
  .selected-plan-reminder { align-items:flex-start; flex-direction:column; gap:12px; }
}
@media(max-width:520px) {
  body.returning .brand-logo { width:126px; }
  body.returning .minutes-button, body.returning .logout-button { white-space:nowrap; }
}

/* Public contact form and billing currency controls. */
#screen-landing .hp-contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,6vw,90px); padding:80px 0; border-top:1px solid var(--border); }
#screen-landing .hp-contact .hp-section-heading { text-align:left; margin:0; }
#screen-landing .hp-contact a { text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.hp-contact-form { display:grid; gap:18px; min-width:0; }
.hp-contact-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.hp-contact-form label { display:grid; gap:8px; font-size:14px; font-weight:500; min-width:0; }
.hp-contact-form input, .hp-contact-form textarea { width:100%; min-width:0; }
.hp-contact-form textarea { resize:vertical; }
.hp-contact-form .hp-button { justify-self:start; }
#contact-status { min-height:1.5em; margin:0; font-size:14px; }
.hp-contact-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.hp-contact-alt { margin:0; font-size:14px; color:var(--muted); }
.contact-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.billing-currency-field { display:grid; gap:8px; max-width:360px; margin:20px 0; }
.billing-currency-field small { color:var(--muted); }
.billing-currency-field small a { color:var(--accent); text-underline-offset:3px; overflow-wrap:anywhere; }
/* Out of the grid while empty, so no stray gap; still in the tree, so role=status announces the error path. */
#billing-currency-note:empty { position:absolute; }
@media(max-width:720px) {
  #screen-landing .hp-contact { grid-template-columns:minmax(0,1fr); padding:52px 0; }
  .hp-contact-row { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:380px) { .nav-public { gap:6px; } }
@media(max-width:1100px) {
  body:not(.returning) .topbar { flex-wrap:wrap; }
  .landing-links { order:3; flex:0 0 100%; margin-left:0; overflow-x:auto; scrollbar-width:none; }
  .nav-public { margin-left:auto; }
}