/* A1 "Quiet Survey" components (2026-10-22). Tokens, fonts and the base elements now live site-wide in brand.css (design/a1-rollout);
   this file holds the A1 pieces: the home hero, the climb, the score head, the founder section. Loaded on every page. */
.a1 :focus-visible{outline-offset:3px;border-radius:6px}
.a1 h1,.a1 h2,.a1 h3{letter-spacing:-.025em}
.a1 input[type=text],.a1 input:not([type]){border-color:var(--a1-line)}
.a1 .mini summary,.a1-score .cat .t .more,.a1 .fix .why-l{color:var(--a1-charcoal);text-decoration:underline;text-decoration-color:var(--a1-line);text-underline-offset:3px}
.a1 .mini summary:hover,.a1-score .cat summary:hover .more,.a1 .fix summary:hover .why-l{text-decoration-color:currentColor}
.site-h .hcta{border-width:1.5px;transition:background .15s ease-out,color .15s ease-out}

/* ---------- home hero ---------- */
.a1-hero{position:relative;overflow:hidden;background:var(--a1-snow);padding:56px 0 0}
.a1-hero .topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.a1-hero .wrap{position:relative;max-width:1200px;padding:0 24px}
.a1-hero .copy{max-width:900px}
.a1-hero h1 .h-a,.a1-hero h1 .h-b{display:block}.a1-hero h1 .h-b{color:var(--a1-orange-ink)}
.a1-hero h1{font-size:44px;line-height:1.04;margin:0 0 20px;color:var(--a1-charcoal)}
.a1-hero .lead{font-size:18px;line-height:1.6;color:var(--a1-slate);max-width:560px;margin:0 0 28px}
.a1-hero .score-form{max-width:620px;gap:8px}
.a1-hero .score-form input{min-height:58px;background:var(--a1-paper);border-radius:14px;padding:12px 18px}
.a1-hero .score-form .cta{min-height:58px;font-size:17px;padding:0 24px}
.a1-hero .help{font-size:14px;line-height:21px;color:var(--a1-slate);margin-top:14px}
.a1-hero .climb{margin:56px 0 0;padding-bottom:40px}
@media (min-width:860px){.a1-hero{padding:104px 0 0;min-height:calc(100vh - 60px)}.a1-hero h1{font-size:72px;line-height:1.02;margin-bottom:28px}.a1-hero .lead{font-size:19px;margin-bottom:36px}.a1-hero .climb{margin-top:88px;padding-bottom:56px}
  .a1-hero .score-form{grid-template-columns:1fr auto;background:var(--a1-paper);border:1px solid var(--a1-line);border-radius:16px;padding:7px}
  .a1-hero .score-form input{border:0;min-height:56px;outline-offset:-3px}.a1-hero .score-form input:focus{outline:3px solid var(--a1-orange);outline-offset:-1px}.a1-hero .score-form .cta{min-height:56px}}

/* desktop: copy left, the climb on the right, rising to the top; below 1100px the climb sits under the form */
/* the climb takes the whole right column (wider hero wrap) so it can rise at ~37 degrees instead of a near-vertical wall */
@media (min-width:1100px){.a1-hero .wrap{display:grid;grid-template-columns:minmax(0,580px) minmax(0,1fr);column-gap:56px;align-items:end;max-width:1240px}
  .a1-hero{min-height:0;padding-bottom:64px}.a1-hero .copy{max-width:none}.a1-hero h1{font-size:56px}
  .a1-hero .art .climb{margin:0;padding:0 0 6px}}
/* ---------- climb ---------- */
.climb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:20px;align-items:stretch;color:var(--a1-charcoal)}
.cl-end{display:flex;flex-direction:column;justify-content:flex-end;white-space:nowrap}
.cl-b{justify-content:flex-start;padding-top:0;text-align:right}
.cl-l{font:700 13px/18px var(--a1-body);color:var(--a1-slate)}
.cl-n{font:800 56px/1 var(--a1-display);letter-spacing:-.03em}
.cl-b .cl-n{color:var(--a1-orange-ink)}
.cl-s{font:600 13px/18px var(--a1-body);color:var(--a1-slate);margin-top:4px}
.cl-track{position:relative;aspect-ratio:var(--ar,2);height:auto;margin-top:0} /* the same aspect ridge() draws for, so the angles hold */
.cl-track>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cl-track>svg path{fill:none;stroke:var(--a1-charcoal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:3}
/* in place of a gradient: a finer line over a soft, wider, low-opacity duplicate set slightly below it */
.cl-track>svg .cl-sh{stroke-width:6;opacity:.07;transform:translateY(var(--sh,1px))}
/* first ascent (climb.js): the page shows the finished climb by default; the inline head script adds .cl-pre (and drops it after 3s as a
   failsafe) so the load intro starts from blank instead of flashing the end state */
.cl-pre .climb[data-intro=load]:not([data-played]) :is(.cl-track>svg,.ms,.cl-flag,.cl-b .cl-n){opacity:0}
.ms-ring{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--a1-orange);opacity:0;pointer-events:none}
/* idle: the flag cloth flutters a little, the mammoth shifts its weight; transform only, slow, never in reduced motion */
.cl-flag path:last-child{transform-box:fill-box;transform-origin:0 50%;animation:cl-flut 6s ease-in-out infinite}
@keyframes cl-flut{0%,100%{transform:none}35%{transform:skewY(-5deg) scaleX(.94)}70%{transform:skewY(3deg) scaleX(.97)}}
.cl-mark{animation:cl-shift 4.6s ease-in-out infinite}
@keyframes cl-shift{0%,100%{transform:translate(-50%,-100%) scaleX(-1)}50%{transform:translate(-50%,-100%) scaleX(-1) translateY(-1.5px) rotate(-.8deg)}}
@media (prefers-reduced-motion:reduce){.cl-flag path:last-child,.cl-mark{animation:none}}
/* the mammoth stands on the start ledge: ~72px tall at 1440 (mark is 829 x 500), ~48px on phones */
.cl-mark{position:absolute;width:120px;height:auto;transform:translate(-50%,-100%) scaleX(-1);margin-top:1px;pointer-events:none} /* the mark faces left; flipped so the mammoth faces the climb */
.cl-flag{position:absolute;width:24px;height:30px;margin:-30px 0 0 -2px}
.cl-flag svg{width:24px;height:30px;overflow:visible}.cl-flag path:first-child{stroke:var(--a1-charcoal);stroke-width:2;fill:none}.cl-flag path:last-child{fill:var(--a1-orange)}
/* layout: track + summit column; the start label sits under the start ledge, clear of the mammoth */
.climb{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b" "a ." "c c"}
.cl-track{grid-area:t}.cl-b{grid-area:b}.cl-a{grid-area:a;margin-top:14px;justify-content:flex-start}
.cl-cap{grid-area:c;margin:14px 0 0;font:600 13px/18px var(--a1-body);color:var(--a1-slate)}
/* milestone dot: 44px hit area, 14px dot, a very slight pulse ring */
.ms{position:absolute;width:0;height:0}
.ms-dot{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.ms-dot::after{content:"";position:absolute;left:15px;top:15px;width:14px;height:14px;border-radius:50%;background:var(--a1-orange);box-shadow:0 0 0 3px var(--a1-snow,#fff);transition:transform .15s ease-out,box-shadow .15s ease-out}
.ms-dot::before{content:"";position:absolute;left:15px;top:15px;width:14px;height:14px;border-radius:50%;background:var(--a1-orange);opacity:0;animation:ms-pulse 3.2s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d,0s)}
@keyframes ms-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.4);opacity:0}}
.ms:hover .ms-dot::before,.ms.open .ms-dot::before,.ms-dot:focus-visible::before{animation:none;transform:scale(2.2);opacity:.2;transition:opacity .15s ease-out}
.ms:hover .ms-dot::after,.ms.open .ms-dot::after,.ms-dot:focus-visible::after{transform:scale(1.15);box-shadow:0 0 0 3px var(--a1-snow,#fff),0 0 0 7px rgba(232,120,12,.28)}
.ms-dot:focus-visible{outline:0}
/* card */
/* placement: CSS default is above the dot; wireClimb() measures and sets --cx/--cy/--tx/--cb inline (collision-aware: inside the climb box,
   clear of the summit number, the start label and the flag), plus data-side for the arrow */
.ms-card{--tx:-50%;--ty:6px;position:absolute;bottom:var(--cb,22px);left:var(--cx,0);top:var(--cy,auto);width:248px;transform:translate(var(--tx),var(--ty));background:var(--a1-paper);border:1px solid var(--a1-line);border-radius:14px;padding:12px 14px 12px;box-shadow:0 1px 2px rgba(30,35,41,.06),0 18px 36px -18px rgba(30,35,41,.35);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease-out,transform .2s cubic-bezier(.22,1,.36,1),visibility 0s linear .2s;z-index:5;text-align:left}
.ms-card::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:var(--a1-paper);border-right:1px solid var(--a1-line);border-bottom:1px solid var(--a1-line);transform:rotate(45deg)}
.ms[data-pos=r] .ms-card{--tx:calc(-100% + 28px)}.ms[data-pos=r] .ms-card::after{left:auto;right:23px}
.ms[data-pos=l] .ms-card{--tx:-28px}.ms[data-pos=l] .ms-card::after{left:28px}
.ms-card[data-side]::after{left:var(--ax);right:auto}
.ms-card[data-side=bottom]{--ty:-6px}.ms-card[data-side=bottom]::after{bottom:auto;top:-6px;transform:rotate(225deg)}
.ms-card[data-side=left]{--ty:0px}.ms-card[data-side=left]::after{left:auto;right:-6px;top:var(--ay);bottom:auto;margin:-5px 0 0;transform:rotate(-45deg)}
.ms-card[data-side=right]{--ty:0px}.ms-card[data-side=right]::after{left:-6px;top:var(--ay);bottom:auto;margin:-5px 0 0;transform:rotate(135deg)}
.ms:hover .ms-card,.ms.open .ms-card,.ms-dot:focus-visible+.ms-card{opacity:1;visibility:visible;pointer-events:auto;transform:translate(var(--tx),0);transition:opacity .16s ease-out,transform .2s cubic-bezier(.22,1,.36,1),visibility 0s}
.ms-card p{margin:0}
.ms-t{font:700 15px/21px var(--a1-body);color:var(--a1-charcoal)}
.ms-p{margin-top:6px!important;font:600 13px/18px var(--a1-body);color:var(--a1-slate)}.ms-p b{font:800 20px/1 var(--a1-display);color:var(--a1-orange-ink);margin-right:2px}
.ms-m{margin-top:2px!important;font:600 12px/17px var(--a1-body);color:var(--a1-slate)}
/* phones: the summit number sits above the track, so the track gets the full content width */
@media (max-width:719px){.cl-track{margin-right:22px} /* room for the summit flag and the top dot's 44px tap target inside the page edge */
  .climb{column-gap:12px;grid-template-columns:minmax(0,1fr);grid-template-areas:"b" "t" "a" "c"}.cl-b{margin-bottom:16px}.cl-mark{width:80px}.cl-n{font-size:40px}.cl-l,.cl-s{font-size:12px}.ms-card{width:220px}}
@media (prefers-reduced-motion:reduce){
  .ms-dot::before{animation:none!important;opacity:.22;transform:scale(1.9)}
  .ms-card{transition:opacity .12s linear!important;transform:translate(var(--tx),0)!important}}

/* ---------- score result screen ---------- */
.a1-score .score-a1{padding:8px 0 0}
.a1-score .sc-big{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.a1-score .sc-big b{font:800 96px/.9 var(--a1-display);letter-spacing:-.04em}
.a1-score .sc-big span{font:600 17px var(--a1-body);color:var(--a1-slate)}
.a1-score .sc-l{font:700 14px/20px var(--a1-body);color:var(--a1-slate)}
.a1-score .diag{font:800 24px/1.25 var(--a1-display);letter-spacing:-.015em;margin-top:10px}
.a1-score .chip{font-family:var(--a1-body)}
.a1-score .climb{margin-top:32px}
.a1-score .climb .cl-n{font-size:44px}
.a1-score h2{font-size:26px;line-height:1.15}
.a1-score .cat,.a1-score .fix,.a1-score .panel{border-color:var(--a1-line);background:var(--a1-paper)}
.a1-score .panel.frost{background:var(--a1-ice)}
.a1-score .panel.next{border:1px solid var(--a1-line)}
.a1-score .cat .t,.a1-score .fix .n{font-family:var(--a1-body);font-weight:800}
.a1-score .fix .n{color:var(--a1-orange-ink)}.a1-score .fix .pts{color:var(--a1-orange-ink)}
.a1-score .cat .t .more,.a1-score a{color:var(--a1-charcoal)}
.a1-score .cbar{background:var(--a1-ice);height:6px}.a1-score .cbar i{background:var(--a1-charcoal)}
.a1-score .note{background:var(--a1-ice)}
.a1-score .help,.a1-score .small,.a1-score .asin{color:var(--a1-slate);font-family:var(--a1-body)}
@media (max-width:719px){.a1-score .sc-big b{font-size:80px}.a1-score .diag{font-size:21px}.a1-score .climb .cl-n{font-size:34px}}
/* the big number above already says where the listing starts, so the climb drops its start column here */
.a1-score .climb .cl-a{display:none}

/* ---------- sales page founder section ("Why I built Listing Mammoth") ---------- */
.sales .sp-founder{display:grid;grid-template-columns:minmax(0,1fr);column-gap:28px;background:var(--a1-snow);font-family:var(--a1-body)}
.sales .sp-founder>*{grid-column:1/-1}
.sales .sp-founder h2{font:800 30px/1.1 var(--a1-display);letter-spacing:-.025em;margin:4px 0 18px;color:var(--a1-charcoal)}
.sales .sp-founder .sp-fig{margin:0 0 20px;max-width:300px}
.sales .sp-founder .sp-fig img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:24px;border:1px solid var(--a1-line);background:#E6EDF2}
.sales .sp-founder p{color:var(--a1-charcoal)}
@media (min-width:560px){
  .sales .sp-founder{grid-template-columns:200px minmax(0,1fr);padding-top:32px}
  .sales .sp-founder .sp-fig{grid-column:1;grid-row:1;margin:0 0 24px}
  .sales .sp-founder h2{grid-column:2;grid-row:1;align-self:center;font-size:38px;margin:0 0 24px}}

.sales .sp-pending{display:inline-flex;gap:8px;align-items:center;margin:0 0 16px;padding:4px 10px;border:1.5px dashed #A84F00;border-radius:8px;background:#FFF2E5;color:#7A3A00;font:600 13px/18px var(--a1-body,Manrope,sans-serif)}
.sales .sp-founder .sp-pending{justify-self:start}
.sales .sp-pending b{font-weight:800;letter-spacing:.04em}
/* product thumbnail with no stored image: a quiet ice tile with the mammoth mark, never placeholder text */
.thumb.noimg{background:#E6EDF2 url(/assets/brand/a1/mark.svg) center/58% auto no-repeat}.thumb.noimg img{display:none}

/* ---------- score screen: two columns at 1024px and up (design/a1-rollout) ----------
   Left: score, climb and the biggest fixes (the reading path). Right: the category breakdown, a reference column.
   Phones and tablets keep the single column in source order: score, categories, fixes. */
/* below 1024px the grid is a plain stack */
.a1-score>.rs-grid>*+*{margin-top:24px}
@media (min-width:1024px){
  .a1-score>.rs-grid>*+*{margin-top:0}
  main#app.res{max-width:1160px}
  body.res-app .fh{max-width:1160px}
  .a1-score>.rs-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"main cats" "fixes cats";grid-template-rows:auto 1fr;column-gap:56px;row-gap:28px;align-items:start}
  .a1-score .rs-main{grid-area:main}
  .a1-score .rs-fixes{grid-area:fixes}
  .a1-score .rs-cats{grid-area:cats;padding:22px;background:var(--a1-paper);border:1px solid var(--a1-line);border-radius:20px}
  .a1-score .rs-cats h2{font-size:24px;line-height:30px}
  .a1-score .rs-cats .cat{border-color:var(--a1-line)}
  .a1-score .rs-cats .cat .t .more{white-space:nowrap}
  /* the offer, the package and the sales page stay one readable column */
  .a1-score>:not(.rs-grid){width:100%;max-width:760px;margin-inline:auto}
}
/* A closed milestone card (visibility:hidden) near the right edge still widened the phone layout viewport (398px at 390, so the page
   could pan sideways). Clip horizontal overflow at the page; clip, unlike hidden, makes no scroll container, so sticky still works. */
html,body{overflow-x:clip}
/* /score (10-22 v6, LM Design): #tsslot sits BELOW the submit button with no reserved height, so an interaction-only Turnstile checkbox only pushes content under the button */