/* EXTRACTED from design/homepage.html — the comp is the pixel spec.
   Edit the comp first, then re-extract. */

/* ============================================================
   aspenstudent.com — homepage comp v1
   Family palette: Aspen navy #1E2E5E + glacier #2E84C8 on cream
   #FAF5EC, shared with aspenassignments / aspenpreceptor.

   THIRD ARCHITECTURE IN THE NETWORK. Capella is an instrument
   panel (white cards, centred column). Walden is an annotated
   document (serif quotes, hanging margin). Aspen is a STATEMENT
   — a reckoning. Aspen sells on monthly price, so the page is
   built as an account: right-aligned figures, running totals,
   a term strip, and a branching diagram of where the credential
   can actually go afterwards. Nothing structural is shared.
   ============================================================ */

:root {
  --linen:   #FAF5EC;
  --linen-2: #F3EBDC;
  --card:    #FFFFFF;

  --navy:      #1E2E5E;
  --navy-deep: #16234A;
  --navy-ink:  #131C3A;
  --glacier:      #2E84C8;
  --glacier-deep: #1F6AA6;
  --glacier-pale: #DCEBF7;
  --glacier-mist: #EFF6FC;

  --char:   #1A2033;
  --slate:  #4B5468;
  --dim:    #6E7688;
  --wisp:   #9AA1B0;

  --hair:   #E4DCCB;
  --hair-2: #CFC5AF;

  --amber:      #B87514;
  --amber-pale: #F8ECD6;

  --disp: "Familjen Grotesk", "Segoe UI", Arial, sans-serif;
  --text: "Figtree", "Segoe UI", Arial, sans-serif;

  --inset: clamp(1.15rem, 4.5vw, 3.75rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--linen);
  color: var(--char);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { font-family: var(--disp); margin: 0; line-height: 1.1; letter-spacing: -.026em; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--glacier); outline-offset: 3px; }

.gutter { max-width: 1200px; margin: 0 auto; padding-inline: var(--inset); }

.press {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 700; font-size: 1rem;
  padding: .95rem 1.7rem; min-height: 50px;
  background: var(--navy); color: var(--linen); border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: background .16s ease;
}
.press:hover { background: var(--navy-deep); }
.press-lit { background: var(--glacier-deep); color: #fff; }
.press-lit:hover { background: #17537F; }
.press-bare { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--hair-2); }
.press-bare:hover { background: var(--linen-2); }

/* ============================================================
   BANNER — solid navy, unlike either sibling's light masthead
   ============================================================ */

.banner { background: var(--navy); color: var(--linen); }
.banner .gutter { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .9rem; }

.grove { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.grove svg { width: 26px; height: 30px; flex: none; display: block; }
.grove svg rect { transition: transform .45s cubic-bezier(.22,1,.36,1); transform-origin: 50% 100%; }
.grove:hover svg rect:nth-child(2) { transform: scaleY(1.14); }
.grove:hover svg rect:nth-child(4) { transform: scaleY(1.09); }
.grove b { font-family: var(--disp); font-weight: 700; font-size: 1.12rem; letter-spacing: -.032em; }

.index { display: flex; gap: 1.25rem; }
.index a { font-size: .9rem; white-space: nowrap; color: rgba(250,245,236,.76); text-decoration: none; }
.index a:hover { color: #fff; }
@media (max-width: 1040px) { .index { display: none; } }

.standing { background: var(--navy-deep); color: rgba(250,245,236,.72); font-size: .84rem; }
.standing .gutter { padding-block: .5rem; }
.standing b { color: var(--linen); font-weight: 600; }

/* ============================================================
   OPENING — the headline is a number
   ============================================================ */

.opening .gutter { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.opening h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -.036em; max-width: 20ch; }
.opening h1 u { text-decoration: none; color: var(--glacier-deep); }
.opening .lede { margin-top: 1.35rem; font-size: 1.1rem; color: var(--slate); max-width: 50ch; }
.opening .stake { margin-top: 1.5rem; font-size: 1rem; color: var(--dim); max-width: 52ch; }
.opening .stake strong { color: var(--char); font-weight: 600; }

/* ---- the term strip: the signature device ---- */

.reckon { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); background: var(--card); border: 1px solid var(--hair); border-radius: 3px; }

.routes { display: flex; border-bottom: 1px solid var(--hair); }
.routes button {
  flex: 1; font-family: var(--text); font-size: .95rem; font-weight: 500; color: var(--dim);
  background: none; border: 0; border-right: 1px solid var(--hair); padding: 1rem .6rem; min-height: 52px;
  cursor: pointer; transition: background .15s ease, color .15s ease; text-align: center;
}
.routes button:last-child { border-right: 0; }
.routes button:hover { background: var(--glacier-mist); color: var(--navy); }
.routes button[aria-pressed="true"] { background: var(--navy); color: var(--linen); font-weight: 600; }

.reckon-body { padding: clamp(1.5rem, 3.5vw, 2.5rem); }

.headline-sum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem 3rem; }
.sum-block .cap { font-size: .92rem; color: var(--dim); }
.sum-block .fig { display: block; font-family: var(--disp); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.9rem); letter-spacing: -.045em; line-height: .95; margin-top: .2rem; }
.sum-block .fig small { font-family: var(--text); font-weight: 500; font-size: .9rem; letter-spacing: 0; color: var(--dim); }
.sum-block.total .fig { color: var(--glacier-deep); }

.strip { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.strip-scale { display: flex; gap: 2px; height: 54px; align-items: flex-end; }
.strip-scale i { flex: 1; background: var(--glacier-pale); border-radius: 1px; height: 60%; transition: height .35s cubic-bezier(.22,1,.36,1), background .2s ease; }
.strip-scale i[data-year="1"] { background: var(--glacier); height: 100%; }
.strip-legend { display: flex; justify-content: space-between; margin-top: .6rem; font-size: .86rem; color: var(--dim); }
.strip-say { margin-top: 1.25rem; font-size: 1.02rem; color: var(--char); max-width: 56ch; }
.strip-say b { font-family: var(--disp); font-weight: 700; }

.reckon-foot { border-top: 1px solid var(--hair); padding: 1.1rem clamp(1.5rem, 3.5vw, 2.5rem); background: var(--linen); font-size: .85rem; color: var(--dim); line-height: 1.55; }

/* ============================================================
   THE ACCOUNT — a ruled statement
   ============================================================ */

.account { background: var(--card); border-block: 1px solid var(--hair); }
.account .gutter { padding-block: clamp(3rem, 6vw, 4.5rem); }
.account h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); letter-spacing: -.034em; max-width: 22ch; }
.account > .gutter > p { margin-top: 1.1rem; font-size: 1.05rem; color: var(--slate); max-width: 60ch; }

.entries { margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--navy); }
.entry-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 9rem); gap: clamp(1rem, 3vw, 2.5rem); padding-block: 1.3rem; border-bottom: 1px solid var(--hair); align-items: baseline; }
@media (max-width: 820px) { .entry-row { grid-template-columns: 1fr auto; } .entry-row p { grid-column: 1 / -1; } }
.entry-row h3 { font-size: 1.05rem; font-weight: 700; }
.entry-row p { font-size: .95rem; color: var(--slate); line-height: 1.55; }
.entry-row .val { font-family: var(--disp); font-weight: 700; font-size: 1.15rem; text-align: right; letter-spacing: -.02em; }
.entry-row .val.warn { color: var(--amber); }
.entry-row .val small { display: block; font-family: var(--text); font-weight: 500; font-size: .82rem; color: var(--dim); letter-spacing: 0; margin-top: .15rem; }

/* ============================================================
   ONWARD — the branching diagram, the real argument
   ============================================================ */

.onward .gutter { padding-block: clamp(3rem, 6vw, 4.5rem); }
.onward h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); letter-spacing: -.034em; max-width: 20ch; }
.onward > .gutter > p { margin-top: 1.1rem; font-size: 1.05rem; color: var(--slate); max-width: 62ch; }

.branch { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 860px) { .branch { grid-template-columns: 1fr; } }

.origin { background: var(--navy); color: var(--linen); border-radius: 3px; padding: 1.5rem 1.4rem; }
.origin b { font-family: var(--disp); font-weight: 700; font-size: 1.2rem; display: block; }
.origin span { display: block; margin-top: .5rem; font-size: .92rem; color: rgba(250,245,236,.76); line-height: 1.5; }

.limbs { display: grid; gap: 0; border-top: 1px solid var(--hair-2); }
.limb { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); padding-block: 1.35rem; border-bottom: 1px solid var(--hair-2); align-items: start; }
@media (max-width: 620px) { .limb { grid-template-columns: 1fr; gap: .5rem; } }
.verdict { font-family: var(--disp); font-weight: 700; font-size: .95rem; padding-top: .1rem; }
.verdict.ok { color: var(--glacier-deep); }
.verdict.check { color: var(--amber); }
.verdict.risk { color: #A32020; }
.limb h3 { font-size: 1.08rem; font-weight: 700; }
.limb p { margin-top: .35rem; font-size: .95rem; color: var(--slate); line-height: 1.55; }

.footnote { margin-top: 1.75rem; padding: 1.25rem 1.4rem; background: var(--amber-pale); border-left: 3px solid var(--amber); font-size: .96rem; color: var(--char); line-height: 1.6; max-width: 68ch; }
.footnote b { font-weight: 700; }

/* ============================================================
   ASSESSMENT — the fit test, built as a running statement
   ============================================================ */

.assess { background: var(--navy); color: var(--linen); }
.assess .gutter { padding-block: clamp(3rem, 6vw, 4.5rem); }
.assess h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); letter-spacing: -.034em; color: var(--linen); max-width: 20ch; }
.assess > .gutter > p { margin-top: 1.1rem; font-size: 1.05rem; color: rgba(250,245,236,.78); max-width: 56ch; }

.desk { margin-top: clamp(2.25rem, 4.5vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .desk { grid-template-columns: 1fr; } }

.query { border-top: 2px solid rgba(250,245,236,.35); padding-top: clamp(1.5rem, 3vw, 2rem); }
.query-of { font-size: .92rem; color: rgba(250,245,236,.6); }
.query-q { font-family: var(--disp); font-weight: 700; font-size: clamp(1.45rem, 3.2vw, 2.1rem); letter-spacing: -.032em; margin: .5rem 0 1.4rem; max-width: 22ch; color: var(--linen); }

.replies { display: grid; }
.replies button {
  text-align: left; width: 100%; font-family: var(--text); font-size: 1.02rem; color: var(--linen);
  background: none; border: 0; border-top: 1px solid rgba(250,245,236,.18); padding: .95rem .2rem; min-height: 54px;
  cursor: pointer; transition: padding-left .16s ease, color .16s ease;
}
.replies button:last-child { border-bottom: 1px solid rgba(250,245,236,.18); }
.replies button:hover { padding-left: .7rem; color: #A8D3F2; }

.query-undo { margin-top: 1.3rem; background: none; border: 0; cursor: pointer; font-size: .93rem; color: rgba(250,245,236,.6); padding: 0; }
.query-undo:hover { color: var(--linen); }
.query-undo[hidden] { display: none; }

/* the running statement column */
.running { background: rgba(250,245,236,.07); border-radius: 3px; padding: 1.4rem 1.5rem; }
.running h3 { font-family: var(--disp); font-weight: 700; font-size: 1rem; color: rgba(250,245,236,.62); }
.running dl { margin: 1rem 0 0; display: grid; gap: .75rem; }
.running dt { font-size: .86rem; color: rgba(250,245,236,.55); }
.running dd { margin: .1rem 0 0; font-size: .98rem; color: var(--linen); font-weight: 500; }
.running .pending { color: rgba(250,245,236,.35); font-weight: 400; font-style: italic; }

.outcome { display: none; }
.outcome[data-open="1"] { display: block; }
.outcome-line { font-family: var(--disp); font-weight: 700; font-size: 1rem; padding-bottom: .5rem; border-bottom: 3px solid currentColor; display: inline-block; }
.outcome-line.no { color: #F0A24B; }
.outcome-line.yes { color: #7FC4F2; }
.outcome-line.mid { color: rgba(250,245,236,.7); }
.outcome h3 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.032em; margin-top: 1.25rem; max-width: 24ch; color: var(--linen); }
.outcome-body { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; color: rgba(250,245,236,.82); max-width: 54ch; }
.terms { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; max-width: 54rem; }
.terms li { border-left: 2px solid rgba(126,196,242,.5); padding-left: 1.1rem; }
.terms b { display: block; font-family: var(--disp); font-weight: 700; font-size: .98rem; color: var(--linen); }
.terms span { display: block; margin-top: .25rem; font-size: .95rem; color: rgba(250,245,236,.72); line-height: 1.55; }
.outcome-act { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.assess .press-bare { color: var(--linen); box-shadow: inset 0 0 0 1.5px rgba(250,245,236,.35); }
.assess .press-bare:hover { background: rgba(250,245,236,.1); }

/* ============================================================
   AGAINST — one-line comparisons
   ============================================================ */

.against .gutter { padding-block: clamp(3rem, 6vw, 4.5rem); }
.against h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); letter-spacing: -.034em; }
.against > .gutter > p { margin-top: 1.1rem; font-size: 1.05rem; color: var(--slate); max-width: 58ch; }
.rivals { margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--navy); }
.rivals a { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2.5rem); padding-block: 1.3rem; border-bottom: 1px solid var(--hair); text-decoration: none; align-items: baseline; transition: padding-left .16s ease; }
.rivals a:hover { padding-left: .6rem; }
.rivals strong { font-family: var(--disp); font-weight: 700; font-size: 1.16rem; letter-spacing: -.026em; }
.rivals span { font-size: 1rem; color: var(--slate); }
.rivals i { font-style: normal; color: var(--glacier); font-size: 1.2rem; transition: transform .16s ease; }
.rivals a:hover i { transform: translateX(4px); }
@media (max-width: 800px) { .rivals a { grid-template-columns: 1fr auto; } .rivals span { grid-column: 1 / -1; } }

/* ============================================================
   CLOSE
   ============================================================ */

.close { background: var(--glacier-mist); border-top: 1px solid var(--hair); }
.close .gutter { padding-block: clamp(3rem, 6vw, 4.5rem); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .close-grid { grid-template-columns: 1fr; } }
.close h2 { font-size: clamp(1.9rem, 4.2vw, 2.85rem); letter-spacing: -.036em; max-width: 18ch; }
.close-lede { margin-top: 1.2rem; font-size: 1.08rem; color: var(--slate); max-width: 44ch; }
.close ul { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; max-width: 46ch; }
.close li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .8rem; font-size: .98rem; color: var(--slate); }
.close li::before { content: "\2014"; color: var(--glacier); }

.request { background: var(--card); border: 1px solid var(--hair); border-top: 4px solid var(--navy); border-radius: 2px; padding: clamp(1.5rem, 3.5vw, 2rem); display: grid; gap: .9rem; }
.request h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.line { display: grid; gap: .3rem; }
.line label { font-size: .9rem; font-weight: 500; color: var(--slate); }
.line input, .line select { font-family: var(--text); font-size: 16px; color: var(--char); background: var(--linen); border: 1px solid var(--hair-2); border-radius: 2px; padding: .8rem .9rem; width: 100%; }
.line input::placeholder { color: var(--wisp); }
.request small { font-size: .82rem; color: var(--dim); line-height: 1.5; }
.blind { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   FOOT
   ============================================================ */

.foot { background: var(--navy); color: rgba(250,245,236,.72); }
.foot .gutter { padding-block: clamp(2.5rem, 5vw, 3.25rem) clamp(2rem, 4vw, 2.5rem); display: grid; gap: 1.6rem; }
.foot-lead { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: space-between; align-items: baseline; }
.foot-index { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.foot-index a { font-size: .93rem; color: rgba(250,245,236,.72); text-decoration: none; }
.foot-index a:hover { color: #fff; }
.years { font-family: var(--disp); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.55rem); letter-spacing: -.028em; color: var(--linen); max-width: 34ch; line-height: 1.3; }
.years b { color: #7FC4F2; }
.fineprint { font-size: .84rem; line-height: 1.6; max-width: 78ch; }
.fineprint b { color: var(--linen); font-weight: 600; }
.stamp { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding-top: 1.3rem; border-top: 1px solid rgba(250,245,236,.18); font-size: .84rem; color: rgba(250,245,236,.5); }


/* ============================================================
   HERO WITH ENQUIRY — the form leads, the model moves below
   ============================================================ */

.opening-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 960px) { .opening-grid { grid-template-columns: 1fr; } }

.hero-form { background: var(--card); border: 1px solid var(--hair); border-top: 4px solid var(--navy); border-radius: 3px; padding: clamp(1.5rem, 3.5vw, 2.1rem); display: grid; gap: .85rem; box-shadow: 0 1px 2px rgba(21,33,28,.04), 0 22px 44px -26px rgba(30,46,94,.28); }
.hero-form h2 { font-size: 1.42rem; letter-spacing: -.032em; }
.hero-form > p { font-size: .96rem; color: var(--slate); line-height: 1.55; }
.hero-form .press { margin-top: .35rem; }
.hero-form small { font-size: .82rem; color: var(--dim); line-height: 1.5; }
.form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 460px) { .form-duo { grid-template-columns: 1fr; } }

/* ============================================================
   THE MODEL, now its own deck with a reading column beside it
   ============================================================ */

.model-deck { background: var(--card); border-block: 1px solid var(--hair); }
.model-deck .gutter { padding-block: clamp(3rem, 6vw, 4.5rem); }
.model-grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.75rem, 4.5vw, 4rem); align-items: start; }
@media (max-width: 1000px) { .model-grid { grid-template-columns: 1fr; } }

.model-rail h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.034em; }
.model-rail p { margin-top: 1.1rem; font-size: 1.02rem; color: var(--slate); line-height: 1.65; }
.model-rail .rail-note { margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid var(--hair); font-size: .95rem; color: var(--dim); }
.model-rail .rail-note b { display: block; font-family: var(--disp); font-weight: 700; font-size: 1.02rem; color: var(--char); letter-spacing: -.02em; margin-bottom: .35rem; }
.model-deck .reckon { margin-top: 0; }

/* ============================================================
   FOOTER — solid dark, with a real sitemap
   ============================================================ */

.foot { background: var(--navy-ink); color: rgba(250,245,236,.72); }
.foot .gutter { padding-block: clamp(2.75rem, 5.5vw, 4rem) clamp(2rem, 4vw, 2.5rem); display: grid; gap: clamp(2rem, 4vw, 2.75rem); }

.foot-map { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 900px) { .foot-map { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-map { grid-template-columns: 1fr; } }

.foot-brand p { margin-top: 1rem; font-size: .93rem; line-height: 1.6; color: rgba(250,245,236,.6); max-width: 34ch; }
.foot-col h3 { font-family: var(--disp); font-weight: 700; font-size: .96rem; color: var(--linen); letter-spacing: -.02em; }
.foot-col ul { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.foot-col a { font-size: .93rem; color: rgba(250,245,236,.7); text-decoration: none; }
.foot-col a:hover { color: #fff; }

.foot-signup { border-top: 1px solid rgba(250,245,236,.16); border-bottom: 1px solid rgba(250,245,236,.16); padding-block: clamp(1.5rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
@media (max-width: 780px) { .foot-signup { grid-template-columns: 1fr; } }
.foot-signup h3 { font-family: var(--disp); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--linen); letter-spacing: -.026em; }
.foot-signup p { margin-top: .5rem; font-size: .93rem; color: rgba(250,245,236,.6); max-width: 46ch; }
.signup-row { display: flex; gap: .5rem; }
.signup-row input { flex: 1; min-width: 0; font-family: var(--text); font-size: 16px; color: var(--linen); background: rgba(250,245,236,.08); border: 1px solid rgba(250,245,236,.22); border-radius: 2px; padding: .75rem .85rem; }
.signup-row input::placeholder { color: rgba(250,245,236,.45); }
.signup-row button { flex: none; font-family: var(--disp); font-weight: 700; font-size: .95rem; background: var(--glacier); color: #fff; border: 0; border-radius: 2px; padding: .75rem 1.2rem; min-height: 46px; cursor: pointer; }
.signup-row button:hover { background: #4E9BD8; }

@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; } }