/* Landing and pilot pages. Built on the app's tokens, type, buttons and rules in styles.css.
   Rules that apply here (see "Established rules" in workforce/DESIGN_SYSTEM.md, enforced by tests/design-rules.test.mjs):
   one flat background, no card borders, a very subtle shadow, tints not colour blocks, small radii, plain unboxed labels, Carbon icons,
   tooltips on jargon, and very generous spacing. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.landing { background: var(--bg); }
.landing::before { display: none; }
/* the app constrains <main>; the landing page lays out its own full-width sections */
.landing main { max-width: none; margin: 0; padding: 0; }
.wrap { max-width: 1300px; margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 820px; }
.ic { display: inline-flex; align-items: center; }
.ic.big { color: var(--accent-hi); }
.btn { text-decoration: none; }

/* top bar */
.lnav { position: sticky; top: 0; z-index: 30; background: rgba(250, 250, 250, .92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.lnav-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 84px; }
.lnav .brand { text-decoration: none; color: var(--ink); }
.lnav-links { display: flex; gap: 40px; margin-left: auto; }
.lnav-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 0; }
.lnav-links a:hover { color: var(--ink); }

/* section rhythm: sections are separated by white space alone */
.sect, .band { padding: 144px 0; }
.sect h2, .band h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); max-width: 22em; margin-bottom: 32px; }
.sect .lede, .band .lede { max-width: 40em; margin-bottom: 8px; }
.eyebrow { margin-bottom: 24px; }
.fine { margin-top: 48px; }
.band .fine, .sect .fine { max-width: 44em; }
section h3 { font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 12px; }

/* labels: plain text, light weight, no container */
.tag { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; padding: 0; border-radius: 0; }
.plan .tag.avail { color: var(--ok); background: none; }

/* hero */
.hero-l { padding: 112px 0 144px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 88px; align-items: center; }
.hero-l h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.06; margin-bottom: 32px; }
.hero-l .lede { max-width: 32em; margin-bottom: 52px; }
.hero-img { width: 100%; height: auto; display: block; }
.cta-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 56px; }

/* cards: white or tinted, never bordered, one very subtle shadow */
.trio { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.trio li { background: var(--surface); border-radius: 6px; padding: 56px 44px; box-shadow: var(--shadow); }
.trio p { margin: 0; color: var(--muted); }

.steps-l { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.steps-l li { background: var(--surface); border-radius: 6px; padding: 56px 44px 52px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.steps-l .sn { color: var(--muted); font-size: .8rem; margin-top: 16px; }
.steps-l .pts { color: var(--accent-hi); font-size: .78rem; margin: 0 0 12px; }
.steps-l p { margin: 0; color: var(--muted); }
.notes { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 72px; color: var(--muted); }
.notes li { padding-left: 28px; position: relative; }
.notes li::before { content: ""; position: absolute; left: 0; top: .75em; width: 10px; height: 2px; background: var(--accent); }

.cards5 { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cards5 li { background: var(--surface); border-radius: 6px; padding: 44px 36px 48px; box-shadow: var(--shadow); }
.cards5 img { display: block; margin-bottom: 28px; }
.cards5 p { margin: 0; color: var(--muted); }

.roles-l { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.roles-l li { background: var(--surface); border-radius: 6px; padding: 56px 44px 52px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.roles-l .roleico { margin-bottom: 16px; }
.roles-l p { flex: 1; margin: 0 0 36px; color: var(--muted); }

.defs { margin: 72px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 96px; }
.defs div { padding: 36px 0; border-bottom: 1px solid rgba(20, 23, 31, .10); }
.defs dt { font-weight: 600; margin-bottom: 8px; } .defs dt .mono { color: var(--accent-hi); font-size: .8rem; margin-left: 10px; letter-spacing: .06em; }
.defs dd { margin: 0; color: var(--muted); }
.callout { display: flex; gap: 20px; align-items: flex-start; background: var(--t-accent); border-radius: 6px; padding: 40px 44px; margin: 72px 0 0; max-width: 56em; }
.callout > .ic > .ico { color: var(--accent-hi); margin-top: 3px; }

.cards4 { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.cards4 li { background: var(--surface); border-radius: 6px; padding: 48px 44px; box-shadow: var(--shadow); }
.cards4 .ic { margin-bottom: 24px; }
.cards4 p { margin: 0; color: var(--muted); }
.prose-l { max-width: 44em; margin: 64px 0 0; color: var(--muted); font-size: 1.05rem; }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.card-l { background: var(--surface); border-radius: 6px; padding: 56px 48px; box-shadow: var(--shadow); }
.card-l.planned { background: var(--t-neutral); box-shadow: none; }
.card-l h3 { font-size: 1.2rem; margin-bottom: 32px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.ticks li { display: flex; gap: 16px; align-items: flex-start; }
.ticks .ico { margin-top: 3px; color: var(--ok); } .planned .ticks .ico { color: var(--muted); }

/* plans */
.plans { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.plan { background: var(--surface); border-radius: 6px; padding: 52px 44px 48px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.planned-plan { background: var(--t-neutral); box-shadow: none; }
.plan .tag { align-self: flex-start; margin-bottom: 24px; }
.plan h3 { font-size: 1.4rem; margin: 0; }
.plan-price { font-weight: 600; margin: 8px 0 0; color: var(--ink); }
.plan-sum { color: var(--muted); margin: 8px 0 32px; }
.plan .ticks { flex: 1; gap: 20px; margin-bottom: 36px; align-content: start; }
.planned-plan .ticks .ico { color: var(--muted); }
.plan .fine { margin: 0; }
.pilot-callout { margin-top: 72px; max-width: none; align-items: center; flex-wrap: wrap; gap: 28px 40px; }
.pilot-callout > span:nth-child(2) { flex: 1 1 420px; }
.pilot-callout .btn { flex: none; }

/* faq */
.faq { margin-top: 56px; border-top: 1px solid rgba(20, 23, 31, .12); }
.faq details { border-bottom: 1px solid rgba(20, 23, 31, .12); padding: 8px 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; padding: 28px 48px 28px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.4rem; color: var(--accent-hi); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent-hi); }
.faq p { margin: 0 0 32px; color: var(--muted); max-width: 42em; }

/* closing: a tinted card on the same flat page */
.cta-band { padding: 0 0 144px; }
.cta-card { background: var(--t-accent); border-radius: 6px; padding: 112px 48px; text-align: center; }
.cta-card h2 { margin: 0 auto 20px; max-width: none; }
.cta-card .lede { margin: 0 auto 48px; }
.lfoot { padding: 0 0 112px; color: var(--muted); }
.lfoot p { margin: 0 0 12px; } .lfoot .fine { margin-top: 16px; }
.lfoot a { color: var(--muted); }

/* pilot page */
.pilot-page .h2s { font-size: 1.5rem; margin: 128px 0 24px; }
.notes.one { grid-template-columns: 1fr; margin-top: 56px; }
.pform { margin-top: 64px; display: grid; gap: 64px; }
.fld { display: grid; gap: 20px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fld label, .fld legend { font-weight: 600; padding: 0; }
.fld input[type=text], .fld input[type=email], .fld input[type=month], .fld select, .fld textarea { font: inherit; width: 100%; padding: 18px 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
.chk { display: flex; gap: 16px; align-items: center; padding: 8px 0; font-weight: 400 !important; }
.fld select:has(option[value=""]:checked) { color: var(--muted); }
/* multi-select for countries and regions */
.ms { position: relative; }
.ms-btn { font: inherit; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; text-align: left; min-height: 60px; }
.ms.has .ms-btn { color: var(--ink); }
.ms-btn .ic { transform: rotate(90deg); color: var(--muted); } .ms-btn[aria-expanded="true"] .ic { transform: rotate(-90deg); }
.ms-panel { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 16px); background: var(--surface); border-radius: 6px; box-shadow: 0 8px 28px rgba(20,23,31,.06); padding: 40px 32px 32px; }
.ms .ms-panel[hidden], .ms .ms-opt[hidden], .ms .ms-empty[hidden] { display: none; }
.ms-search { font: inherit; width: 100%; margin: 0 0 32px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.ms-list { max-height: 400px; overflow-y: auto; display: grid; padding: 0 4px 0 0; gap: 6px; }
.ms .ms-opt { display: flex; align-items: center; gap: 20px; padding: 20px 20px; margin: 0; }
.ms .ms-opt:hover { background: var(--t-neutral); border-radius: 4px; }
.ms-empty { padding: 20px 20px; margin: 0; color: var(--muted); }
.chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.result { margin-top: 24px; } .result textarea { font: .9rem/1.6 var(--mono); }
.result .cta-row { margin-top: 40px; margin-bottom: 16px; }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; } .hero-img { max-width: 480px; }
  .trio, .steps-l, .roles-l { grid-template-columns: 1fr; }
  .cards5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .defs, .notes { grid-template-columns: 1fr; } .defs { gap: 0; }
  .lnav-links { display: none; } .lnav-in { justify-content: space-between; }
}
@media (max-width: 760px) { .plans, .cards4, .cards5 { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .wrap { padding: 0 24px; }
  .sect, .band { padding: 96px 0; } .hero-l { padding: 64px 0 96px; } .cta-band { padding: 0 0 96px; }
  .trio li, .steps-l li, .roles-l li, .card-l, .plan, .cards4 li, .cards5 li { padding: 40px 28px; }
  .cta-card { padding: 72px 28px; } .callout { padding: 32px 28px; }
  .cta-row .btn, .pilot-callout .btn { width: 100%; }
  .lnav-in .btn { padding: 0 16px; }
}

/* checkbox groups in forms: roomy rows */
fieldset.fld { gap: 8px; }
fieldset.fld legend { margin-bottom: 20px; }
.fld .chk { gap: 20px; padding: 14px 0; }
.chk input { width: 20px; height: 20px; flex: none; }
@media (max-width: 560px) {
  .plan, .card-l, .cta-card { padding: 44px 28px 40px; }
  .plans { gap: 24px; }
}

/* sector cards on the home page */
.sectors { list-style: none; padding: 0; margin: 72px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sector { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; background: var(--surface); border-radius: 6px; padding: 52px 44px 48px; box-shadow: var(--shadow); }
.sector.is-planned { background: var(--t-neutral); box-shadow: none; }
.sector .tag { margin-bottom: 8px; }
.sector.is-available .tag { color: var(--ok); }
.sector h3 { margin: 0; font-size: 1.2rem; }
.sector p { margin: 0; }
.sector .muted { line-height: 1.7; flex: 1; }
.sector .link { margin-top: 24px; font-weight: 600; }
.prose-l + .cta-row { margin-top: 56px; }
@media (max-width: 1000px) { .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sectors { grid-template-columns: 1fr; margin-top: 48px; } .sector { padding: 44px 28px 40px; } }
.lnav .brand, .lnav .brand .name, .lnav-in .btn { white-space: nowrap; flex: none; }
@media (max-width: 560px) { .lnav-in { gap: 16px; } .lnav .brand .name { font-size: 1rem; } }

/* home page, supplied-copy layout */
.nav-actions { display: flex; align-items: center; gap: 16px; }
.lnav-in { gap: 32px; }
.lnav-links { gap: 28px; }
.hero-copy-l .trust { margin-top: 40px; color: var(--muted); }
.tag.avail { color: var(--ok); }
.cards4.platform { gap: 32px; }
.cards4.platform li { padding: 52px 44px 48px; }
.cards4.platform h3 { margin: 0 0 28px; }
.cards4.platform .ticks { display: grid; gap: 28px; }
.cards4.platform .ticks li { padding: 0; background: none; box-shadow: none; display: block; line-height: 1.7; }
.cards4.platform .ticks .tag { margin-left: 8px; }
.plans-table { min-width: 880px; }
.plans-table th, .plans-table td { vertical-align: top; line-height: 1.7; }
.plans-table th[scope="row"] { font-weight: 600; white-space: normal; min-width: 170px; }
.plans-table thead th { white-space: normal; }
.plans-table + * { margin-top: 0; }
.plans-table ~ .cta-row { margin-top: 48px; }
@media (max-width: 1000px) { .lnav-links { display: none; } }
@media (max-width: 560px) { .nav-actions .btn:not(.primary) { display: none; } .nav-actions .btn.primary { padding: 0 14px; } }

/* platform section: one line each, details on request */
.reveal-list { display: grid; gap: 24px; margin-top: 72px; }
.reveal { background: var(--surface); border-radius: 6px; box-shadow: var(--shadow); }
/* summary layout: icon | title over one-line summary | status and arrow */
.reveal > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title side" "icon sum side"; align-items: center; column-gap: 36px; row-gap: 12px; padding: 44px 48px; }
.reveal > summary > .ic.big { grid-area: icon; }
.reveal .rv-title { grid-area: title; margin: 0; align-self: end; }
.reveal .rv-sum { grid-area: sum; align-self: start; }
.reveal .rv-side { grid-area: side; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
.reveal .rv-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.reveal .rv-sum { color: var(--muted); line-height: 1.7; max-width: 40em; }
.reveal .rv-side { display: flex; align-items: center; gap: 28px; }
.reveal .rv-side .tag { margin: 0; white-space: nowrap; }
.reveal .rv-chev { color: var(--muted); transform: rotate(90deg); transition: transform .15s ease; }
.reveal[open] .rv-chev { transform: rotate(-90deg); }
.reveal .ticks { display: grid; gap: 32px; padding: 8px 48px 52px calc(48px + 32px + 36px); margin: 0; list-style: none; }
.reveal .ticks li { display: block; padding: 0; background: none; box-shadow: none; line-height: 1.75; max-width: 44em; }
.reveal .ticks .tag { margin-left: 8px; }
@media (max-width: 760px) {
  .reveal > summary { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "icon sum" "side side"; column-gap: 24px; row-gap: 12px; padding: 32px 28px; }
  .reveal .rv-side { justify-content: space-between; margin-top: 12px; }
  .reveal .ticks { padding: 0 28px 40px; }
}
@media (max-width: 560px) { .nav-actions .btn.primary { padding: 0 12px; font-size: .8rem; } .nav-actions .btn.primary .ic { display: none; } .lnav .brand .mark { margin-right: 0; } }

/* disclosure rows used outside the platform section */
.reveal-list.compact { margin-top: 56px; }
.reveal > summary > .rv-side:only-of-type { justify-self: end; }
.reveal .rv-body { padding: 8px 48px 52px calc(48px + 32px + 36px); }
.reveal .rv-body .prose-l { margin: 0; max-width: 44em; line-height: 1.8; }
.reveal .ticks.iconed li { display: flex; gap: 16px; align-items: flex-start; }
.reveal .ticks.iconed .ic { margin-top: 4px; flex: none; color: var(--ok); }
.reveal .tbl-wrap { margin: 8px 48px 48px; box-shadow: none; background: transparent; }
.plans-table ~ .reveal-list { margin-top: 40px; }
@media (max-width: 760px) { .reveal .rv-body { padding: 0 28px 40px; } .reveal .tbl-wrap { margin: 0 20px 32px; } }
.reveal-list { grid-template-columns: minmax(0, 1fr); }
.reveal { min-width: 0; }
.cta-card .cta-row { justify-content: center; margin-bottom: 0; }
.reveal-list + .cta-row { margin-top: 64px; }
.cta-card h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.2; margin: 0 auto 24px; max-width: 22em; }

/* footer */
.lfoot { padding: 112px 0 88px; color: #AEB4C0; background: var(--ink); }
.lfoot .wrap { padding-top: 0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 64px; }
.foot-brand .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.foot-brand p { margin: 28px 0 0; max-width: 22em; line-height: 1.75; }
.foot-h { margin: 0 0 28px; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.lfoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lfoot li a { color: var(--muted); text-decoration: none; }
.lfoot li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot-soon { color: var(--muted); }
.foot-soon .tag { margin-left: 8px; }
.foot-base { margin-top: 96px; display: grid; gap: 16px; }
.foot-base p { margin: 0; line-height: 1.7; }
.foot-base .fine { margin-top: 0; max-width: 60em; }
.foot-base a { color: var(--muted); }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .lfoot { padding: 80px 0 64px; } .foot-grid { grid-template-columns: 1fr; gap: 48px; } .foot-base { margin-top: 64px; } }
.foot-soon .tag { display: inline; }

/* footer on the dark ink colour (operator: darker) */
.lfoot .foot-brand .brand, .lfoot .foot-brand .name { color: #FFFFFF; }
.lfoot .mark { background: #FFFFFF; color: var(--ink); }
.foot-h { color: #FFFFFF; }
.lfoot li a, .lfoot .foot-soon, .foot-base a { color: #AEB4C0; }
.lfoot li a:hover, .foot-base a:hover { color: #FFFFFF; }
.lfoot .tag { color: #8E95A3; }
.lfoot a:focus-visible { outline-color: #FFFFFF; }
.foot-base { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 56px; margin-top: 72px; }

/* header: one row on wide screens, a Menu button below that */
.wrap-wide { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
.lnav-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 84px; }
.lnav-links { display: flex; align-items: center; gap: 28px; margin: 0 auto; }
.lnav-links a { white-space: nowrap; font-size: .9rem; }
.nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-actions .btn { white-space: nowrap; }
.lnav-menu { display: none; position: relative; }
.lnav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; color: var(--ink); }
.lnav-menu > summary::-webkit-details-marker { display: none; }
.lnav-menu > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lnav-menu .when-open { display: none; }
.lnav-menu[open] .when-open { display: inline-flex; }
.lnav-menu[open] .when-closed { display: none; }
.lnav-panel { position: absolute; right: 0; top: calc(100% + 16px); z-index: 40; width: min(320px, calc(100vw - 32px)); background: var(--surface); border-radius: 6px; box-shadow: 0 8px 28px rgba(20, 23, 31, .06); padding: 12px 0; display: grid; }
.lnav-panel a { padding: 16px 28px; color: var(--ink); text-decoration: none; font-weight: 600; }
.lnav-panel a:hover { background: var(--t-neutral); }
.lnav-panel .panel-open { color: var(--muted); }
@media (max-width: 1179px) {
  .lnav-links { display: none; }
  .lnav-menu { display: block; }
  .lnav-in { justify-content: space-between; }
}
@media (max-width: 560px) { .nav-actions .btn.primary { padding: 0 12px; font-size: .8rem; } .nav-actions .btn.primary .ic { display: none; } .nav-actions { gap: 4px; } }

/* sign up page */
.signup-page h1 { margin-bottom: 24px; }
.signup-opts { list-style: none; padding: 0; margin: 72px 0 56px; display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; }
.signup-opts li { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--surface); border-radius: 6px; padding: 52px 44px 48px; box-shadow: var(--shadow); }
.signup-opts h2 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.signup-opts p { margin: 0; line-height: 1.75; color: var(--muted); flex: 1; }
.signup-opts .btn { margin-top: 20px; }
.signup-opts .tag.avail { color: var(--ok); }
.signup-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 760px; margin: 56px 0; background: var(--surface); border-radius: 6px; padding: 56px 52px; box-shadow: var(--shadow); }
.signup-card h2 { margin: 0; }
.signup-card p { margin: 0; line-height: 1.75; color: var(--muted); }
.signup-card .plain { margin: 0; padding-left: 22px; display: grid; gap: 16px; line-height: 1.75; color: var(--muted); }
@media (max-width: 900px) { .signup-opts { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .nav-actions .nav-signup { display: none; } .signup-opts li, .signup-card { padding: 40px 28px; } .signup-opts .btn { width: 100%; } }
.signup-card .ex { margin: 0; padding: 28px 32px; background: var(--bg); border-radius: 6px; line-height: 1.75; }
.ulink { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.ulink:hover { color: var(--accent, var(--ink)); }
.fld.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fld input[hidden] { display: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
#status.crim { color: var(--crim, #A2191F); font-weight: 600; }
.sent { display: grid; gap: 20px; justify-items: start; margin-top: 64px; padding: 64px 56px; background: var(--surface); border-radius: 6px; max-width: 760px; }
.sent h2 { margin: 0; }
.sent p { margin: 0; line-height: 1.75; color: var(--muted); }
.sent-ico { color: var(--ok, #198038); display: inline-flex; }
@media (max-width: 560px) { .sent { padding: 40px 28px; } }
.pform[hidden], .sent[hidden] { display: none; }
.sent .h2s { margin: 0; }
.sent-ico { margin-bottom: 4px; }
/* email and text boxes look the same in every browser: no browser-painted autofill colour, no contact-card icon */
.fld input[type=text], .fld input[type=email] { -webkit-appearance: none; appearance: none; }
.fld input:-webkit-autofill, .fld input:-webkit-autofill:hover, .fld input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s ease-out 0s; }
.fld input::-webkit-contacts-auto-fill-button, .fld input::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }
.fld input::placeholder { color: var(--muted); opacity: 1; }