/* SatuAcademy website (satuacademy.com). Bold editorial poster: giant condensed
   capitals (Anton) with DM Sans text, yellow + black + white, colour blocks (coral,
   purple, blue) and black-and-white photos. Square corners, except the logo mark,
   the round partner badge and the phone mockup. */

:root {
  --yellow: #ffe81a;
  --black: #000000;
  --white: #ffffff;
  --paper: #f3f3f0;
  --coral: #ff5a45;
  --purple: #9b7bff;
  --blue: #4f7bff;
  --muted: #4a4a4a;              /* secondary text on white (9:1) */
  --muted-dark: #b5b5b5;         /* secondary text on black (10:1) */
  --error: #c4001f;
  --display: 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-body: 1.25rem;
  --fs-lead: clamp(1.25rem, 1.5vw, 1.5rem);
  --fs-mega: clamp(3.4rem, 9.5vw, 10rem);
  --fs-big: clamp(2.6rem, 5.6vw, 5.75rem);
  --wrap: 100rem;
  --gutter: clamp(1.25rem, 3.5vw, 3rem);
  --gap: clamp(1rem, 2vw, 1.75rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--black); font: 400 var(--fs-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--yellow); color: var(--black); }
input, select, textarea { caret-color: var(--black); }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; box-shadow: 0 0 0 6px var(--yellow); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 10; background: var(--black); color: var(--white); padding: .8rem 1.2rem; font-weight: 700; }
.skip:focus { top: 1rem; }
.nowrap { white-space: nowrap; }
.nowrap .slot { white-space: normal; }  /* a long choice may wrap; its comma stays attached */

/* ---------- type ---------- */
.mega, .big, .group-title, .offer h2, .card h3, .steps li::before, .foot-word, .sent h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
.mega { font-size: var(--fs-mega); line-height: 1.02; }
.mega .line { display: block; overflow: hidden; }
.js [data-fit] .line { white-space: nowrap; }  /* site.js sizes the title so each line fits */
.mega .line > span { display: inline-block; }
.big { font-size: var(--fs-big); line-height: 1.04; }
.lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 34em; }
.arrow { width: .9em; height: .9em; flex: none; }

/* ---------- icons: two-colour ---------- */
.t-icon svg, .f-icon svg, .choice-icon svg { width: 100%; height: 100%; }
.i-a { fill: var(--black); }
.i-b { fill: var(--coral); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; gap: .65rem; min-height: 3.75rem; padding: 0 1.6rem; border: 2px solid var(--black); font: 700 1.125rem/1 var(--font); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; cursor: pointer; transition: background-color .25s cubic-bezier(.16, 1, .3, 1), color .25s, border-color .25s; }
.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: var(--white); color: var(--black); }
.btn-yellow { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.btn-yellow:hover { background: var(--white); border-color: var(--white); }
.btn .arrow { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.text-link { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.0625rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.text-link:hover { text-decoration-thickness: 4px; }
.text-link.light { color: var(--white); }
.text-link.light:hover { color: var(--yellow); }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 5; background: var(--white); border-bottom: 2px solid var(--black); }
.top-row { display: flex; align-items: stretch; gap: 2rem; min-height: 4.75rem; }
.logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--black); text-decoration: none; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.mark { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .65rem !important; background: var(--yellow); color: var(--black); font-family: var(--display); font-size: 1.5rem; line-height: 1; border: 2px solid var(--black); }
.top-nav { display: flex; align-items: center; gap: 2rem; margin: 0 auto; }
.top-nav a, .signin { color: var(--black); text-decoration: none; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.langs { display: flex; gap: .15rem; }
.langs a { display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; color: var(--black); text-decoration: none; font-weight: 800; font-size: .85rem; letter-spacing: .04em; }
.langs a:hover { background: var(--yellow); }
.langs a[aria-current] { background: var(--black); color: var(--yellow); }
.top-nav a:hover, .signin:hover, .top-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.top-actions { display: flex; align-items: center; gap: 1.5rem; }
.top-cta { display: flex; align-items: center; gap: .6rem; margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: var(--yellow); color: var(--black); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; white-space: nowrap; border-left: 2px solid var(--black); }
.top-cta:hover { background: var(--black); color: var(--yellow); }
.top-cta .short { display: none; }
.home .top-cta { background: var(--black); color: var(--yellow); }
.home .top-cta:hover { background: var(--yellow); color: var(--black); }

/* ---------- hero: yellow field, outlined SATU, photo and badge ---------- */
.hero { position: relative; overflow: hidden; background: var(--yellow); border-bottom: 2px solid var(--black); }
.hero-letters { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-letters text { font-family: var(--display); font-size: 760px; fill: none; stroke: var(--black); stroke-width: 3; opacity: .22; }
.hero-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; min-height: min(52rem, calc(100svh - 4.75rem)); }
.hero-text { grid-column: 1 / span 8; padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4.5rem); align-self: center; }
.hero-lead { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--fs-lead); line-height: 1.45; max-width: 30em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hero-photo { position: relative; grid-column: 9 / span 4; align-self: end; margin-top: 3rem; }
.photo { width: 100%; height: auto; display: block; background: #d9d9d9; }
.photo-hero { aspect-ratio: 4 / 5; object-fit: cover; object-position: 37% 50%; border: 2px solid var(--black); border-bottom: 0; }
.badge { position: absolute; left: -4.5rem; bottom: 2.5rem; width: 9.5rem; height: 9.5rem; border-radius: 50% !important; background: var(--black); color: var(--yellow); display: grid; place-items: center; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge text { fill: var(--yellow); font: 700 15.5px var(--font); letter-spacing: 2.6px; }
.badge span { font-family: var(--display); font-size: 2.6rem; line-height: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-plain .wrap { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: var(--section); }
.missing .hero-lead { margin-bottom: 2.5rem; }

/* ---------- offers: black strip ---------- */
.offers { background: var(--black); color: var(--white); }
.offers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offer { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem) 4.5rem; color: var(--white); text-decoration: none; border-left: 1px solid #333; transition: background-color .25s cubic-bezier(.16, 1, .3, 1), color .25s; }
.offer:first-child { border-left: 0; padding-left: 0; }
.offer h2 { font-size: clamp(1.75rem, 2.4vw, 2.4rem); line-height: 1.05; }
.offer p { color: var(--muted-dark); font-size: 1.0625rem; line-height: 1.5; }
.offer .arrow { position: absolute; left: clamp(1rem, 2vw, 2rem); bottom: 1.75rem; width: 1.6rem; height: 1.6rem; color: var(--yellow); }
.offer:first-child .arrow { left: 0; }
.offer:hover { background: var(--yellow); color: var(--black); }
.offer:hover p { color: var(--black); }
.offer:hover .arrow { color: var(--black); }

/* ---------- intro: photo + text ---------- */
.intro { padding: var(--section) 0; }
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: end; }
.photo-intro { grid-column: 1 / span 7; aspect-ratio: 3 / 2; object-fit: cover; }
.intro-text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 1.5rem; }
.partner { display: flex; gap: .75rem; align-items: baseline; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
.partner::before { content: ''; flex: none; width: .8rem; height: .8rem; background: var(--yellow); border: 2px solid var(--black); }

/* ---------- formats: overlapping colour cards ---------- */
.formats { padding: 0 0 var(--section); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: 5rem; }
.card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.5rem 0; border: 2px solid var(--black); }
.card + .card { margin-left: -3rem; }
.card:not(:last-child) { padding-right: 4.5rem; }  /* text stays clear of the next card */
.card-online { z-index: 1; }
.card-hybrid { z-index: 2; }
.cards { padding-right: 3rem; }
.card-onsite { background: var(--coral); }
.card-online { background: var(--purple); transform: translateY(2.5rem); }
.card-hybrid { background: var(--blue); transform: translateY(5rem); }
.card h3 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1.04; }
.card p { font-size: 1.125rem; line-height: 1.45; max-width: 24em; }
.photo-card { margin: auto -1.5rem 0; aspect-ratio: 4 / 3; object-fit: cover; border-top: 2px solid var(--black); width: calc(100% + 3rem); max-width: none; }

/* ---------- topics: ruled list, rows turn yellow ---------- */
.topics { padding: var(--section) 0; border-top: 2px solid var(--black); }
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.25rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { grid-column: 1 / span 7; }
.section-head .lead { grid-column: 8 / span 5; }
.group-title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; padding: 1rem 0; border-bottom: 2px solid var(--black); margin-top: 2.5rem; }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list a { display: grid; grid-template-columns: 2.75rem minmax(0, 18rem) minmax(0, 1fr) auto; gap: .5rem 1.75rem; align-items: center; padding: 1.25rem .75rem; border-bottom: 2px solid var(--black); color: var(--black); text-decoration: none; transition: background-color .2s cubic-bezier(.16, 1, .3, 1); }
.topic-list a > * { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.topic-list a:hover, .topic-list a:focus-visible { background: var(--yellow); }
.topic-list a:hover > *, .topic-list a:focus-visible > * { transform: translateX(.75rem); }
.t-icon { width: 2.75rem; height: 2.75rem; }
.topics .topic-list:nth-of-type(2) .i-b { fill: var(--purple); }
.t-name { font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.t-desc { color: var(--muted); font-size: 1.0625rem; }
.t-ask { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.other-note { margin-top: 2rem; font-size: 1.125rem; color: var(--muted); }

/* ---------- practitioners first: coral field ---------- */
.practice { background: var(--coral); padding: var(--section) 0; border-top: 2px solid var(--black); }
.practice-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem; align-items: end; }
.practice-head .mega { grid-column: 1 / span 8; font-size: clamp(3rem, 7vw, 7.5rem); }
.practice-head .lead { grid-column: 9 / span 4; font-weight: 500; }
.practice-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; }
.practice-points li { border-top: 2px solid var(--black); padding-top: 1.25rem; }
.practice-points h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.75rem, 2.4vw, 2.4rem); line-height: 1.04; }
.practice-points p { margin-top: .75rem; font-size: 1.125rem; }

/* ---------- statement: black band ---------- */
.statement { background: var(--black); color: var(--white); padding: var(--section) 0; }
.statement-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: end; }
.statement .mega { grid-column: 1 / span 8; font-size: clamp(3rem, 7.5vw, 8rem); }
.hero .mega { font-size: clamp(3rem, 8.4vw, 9rem); }
.statement .mega .line:last-child { color: var(--yellow); }
.statement-side { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.statement-side p { color: var(--muted-dark); font-size: 1.125rem; }
.statement-side .small { font-size: 1rem; }

/* ---------- how it works (a real sequence) ---------- */
.how { padding: var(--section) 0; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; }
.steps li { counter-increment: step; border-top: 2px solid var(--black); padding-top: 1.25rem; }
.steps li::before { content: '0' counter(step); display: inline-block; font-size: clamp(4rem, 7vw, 7rem); line-height: .9; background: var(--yellow); padding: .05em .12em 0; margin-bottom: 1.25rem; }
.steps h3 { font-size: 1.375rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.steps p { margin-top: .6rem; color: var(--muted); font-size: 1.125rem; }

/* ---------- about us: the group, facts and partner badges ---------- */
.about { background: var(--paper); padding: var(--section) 0; border-top: 2px solid var(--black); }
.companies { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--black); }
.companies a, .companies div { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; gap: .5rem 1.75rem; align-items: center; padding: 1.4rem .75rem; border-bottom: 2px solid var(--black); color: var(--black); text-decoration: none; transition: background-color .2s cubic-bezier(.16, 1, .3, 1); }
.companies a:hover { background: var(--yellow); }
.companies .arrow { width: 1.4rem; height: 1.4rem; }
.c-name { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height: 1.04; }
.c-desc { font-size: 1.125rem; color: var(--muted); max-width: 44em; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; }
.facts li { display: flex; gap: .9rem; align-items: baseline; background: var(--black); color: var(--white); padding: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 1.0625rem; line-height: 1.35; }
.facts li::before { content: ''; flex: none; width: .8rem; height: .8rem; background: var(--yellow); }
.partners { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); align-items: start; }
.partners-text { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.partners-text .group-title { margin: 0; padding: 0 0 1rem; }
.partners-text p { font-size: 1.125rem; }
.badges { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--black); border-left: 2px solid var(--black); background: var(--white); }
.badges li { display: grid; place-items: center; min-height: 7.5rem; padding: 1.25rem; border-right: 2px solid var(--black); border-bottom: 2px solid var(--black); }
.badges img { width: 100%; max-width: 9.5rem; height: 4.25rem; object-fit: contain; }
.badges .badge-text { background: var(--black); color: var(--yellow); font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; text-align: center; }

/* ---------- request: yellow brief band, then the form ---------- */
.request { border-top: 2px solid var(--black); }
.brief-band { background: var(--yellow); padding: var(--section) 0 clamp(3rem, 6vw, 5rem); border-bottom: 2px solid var(--black); }
.brief-title { margin-top: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; }
.brief { margin-top: 1.25rem; }
.sentence { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.4rem, 5.2vw, 5.4rem); line-height: 1.24; letter-spacing: .005em; }
.slot { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }
.slot select, .slot input { font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--black); background: transparent; border: 0; margin: 0; padding: 0; max-width: 100%; cursor: pointer; field-sizing: content; }
.slot select { appearance: none; -webkit-appearance: none; padding-right: .5em; }
.slot-select .shown { display: none; padding-right: .5em; }
.js .slot-select .shown { display: inline; }
.js .slot-select select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; font: 600 1rem/1.4 var(--font); text-transform: none; letter-spacing: 0; field-sizing: fixed; }
.slot input { cursor: text; }
.slot input::placeholder { color: var(--muted); }
.slot input[type=number] { -moz-appearance: textfield; min-width: 1ch; }
.slot input[type=number]::-webkit-inner-spin-button, .slot input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.slot .u { position: absolute; left: 0; right: 0; bottom: -.07em; height: .07em; background: var(--black); transform-origin: left center; pointer-events: none; }
.slot:has(select)::after { content: ''; position: absolute; right: .04em; top: 50%; border-left: .15em solid transparent; border-right: .15em solid transparent; border-top: .18em solid var(--black); transform: translateY(-30%); pointer-events: none; }
.slot:focus-within { outline: 3px solid var(--black); outline-offset: .1em; }
.slot select:focus, .slot input:focus { outline: none; box-shadow: none; }
.slot:hover .u { height: .12em; }
.city-part[hidden], [data-online-end][hidden] { display: none; }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.brief-hint { font-size: 1.0625rem; max-width: 28em; }
.travel-note { margin-top: 1rem; font-weight: 700; font-size: 1.0625rem; }
.travel-note[hidden], .other-location[hidden] { display: none; }
.hint.travel { color: var(--black); font-weight: 700; }
.request-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: start; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--section); }
.request-intro { grid-column: 1 / span 4; position: sticky; top: 7rem; }
.next { list-style: none; counter-reset: n; margin: 2rem 0 0; padding: 0; }
.next li { counter-increment: n; display: grid; grid-template-columns: 2.25rem 1fr; padding: .9rem 0; border-top: 2px solid var(--black); font-size: 1.125rem; }
.next li::before { content: counter(n); font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.request-box { grid-column: 6 / span 7; }
.request-form fieldset { border: 0; margin: 0 0 2.5rem; padding: 0; min-width: 0; }
.request-form legend { font-family: var(--display); text-transform: uppercase; font-size: clamp(2rem, 2.8vw, 2.75rem); line-height: 1; padding: 0 0 1.25rem; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; margin-bottom: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1.125rem; color: var(--black); background: var(--white); border: 2px solid var(--black); padding: .85rem 1rem; min-height: 3.6rem; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 3rem; background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%); background-position: right 1.45rem center, right 1rem center; background-size: .45rem .45rem; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--black); outline-offset: 0; box-shadow: 0 0 0 7px var(--yellow); }
.hint { color: var(--muted); font-size: 1rem; }
.error { color: var(--error); font-weight: 700; font-size: 1rem; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--error); }
[data-field="format"] { margin-bottom: 1.5rem; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--black); background: var(--white); }
.choice { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem 1.1rem 1.25rem; cursor: pointer; font-size: 1.0625rem; line-height: 1.3; font-weight: 600; transition: background-color .2s cubic-bezier(.16, 1, .3, 1), color .2s; }
.choice + .choice { border-left: 2px solid var(--black); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-icon { width: 2.75rem; height: 2.75rem; }
.choice-icon .i-b { fill: var(--yellow); }
.choice:hover { background: var(--paper); }
.choice:has(input:checked) { background: var(--black); color: var(--white); }
.choice:has(input:checked) .i-a { fill: var(--white); }
.choice:has(input:focus-visible) { outline: 3px solid var(--black); outline-offset: -6px; box-shadow: inset 0 0 0 6px var(--yellow); }
.has-error .choices { border-color: var(--error); }
.field[hidden] { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.privacy { color: var(--muted); font-size: 1rem; }
.form-errors { margin-bottom: 2.25rem; padding: 1.25rem 1.5rem; border: 2px solid var(--error); background: var(--white); color: var(--error); font-size: 1.125rem; }
.form-errors ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.form-errors a { color: var(--error); font-weight: 700; }
.sent { border-top: 2px solid var(--black); padding-top: 1.5rem; }
.sent h3 { font-size: clamp(3rem, 5vw, 4.5rem); line-height: .95; background: var(--yellow); display: inline-block; padding: .05em .15em 0; }
.sent p { margin-top: 1.25rem; font-size: var(--fs-lead); max-width: 30em; }

/* ---------- black band with the app ---------- */
.band { background: var(--black); color: var(--white); padding: var(--section) 0; }
.band-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: center; }
.band-text { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.band-text .big { color: var(--yellow); }
.band-text p { color: var(--muted-dark); font-size: var(--fs-lead); line-height: 1.45; max-width: 26em; }
.devices-band { grid-column: 6 / span 7; }

/* ---------- device mockups (the phone keeps rounded corners: it depicts the device) ---------- */
.devices { position: relative; margin: 0; }
.devices-stage { position: relative; }
.devices.with-phone .devices-stage { padding-right: 12%; }
.device-desktop .screen { border: solid #1d1d1d; border-width: .7rem .7rem 1.6rem; background: #1d1d1d; box-shadow: 0 0 0 1px #3a3a3a; }
.device-desktop img, .device-phone img { width: 100%; height: auto; display: block; background: var(--white); }
.device-desktop .stand { position: relative; width: 16%; height: 2.2rem; margin: 0 auto; background: #1d1d1d; }
.device-desktop .stand::after { content: ''; position: absolute; left: 50%; bottom: -.6rem; width: 250%; height: .6rem; transform: translateX(-50%); background: #1d1d1d; }
.device-phone { position: absolute; right: 0; bottom: 2.4rem; width: 24%; }
.device-phone .screen { position: relative; border: .55rem solid #1d1d1d; border-radius: 1.9rem !important; overflow: hidden; background: #1d1d1d; box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .55); }
.device-phone img { border-radius: 1.35rem !important; }
.device-phone .screen::before { content: ''; position: absolute; z-index: 1; top: 0; left: 50%; width: 34%; height: .9rem; transform: translateX(-50%); background: #1d1d1d; border-radius: 0 0 .7rem .7rem !important; }
.devices figcaption { margin-top: 1.6rem; font-size: 1rem; color: var(--muted); }
.band .devices figcaption, .app-hero .devices figcaption { color: var(--muted-dark); }
.field-coral .devices figcaption, .field-purple .devices figcaption, .field-blue .devices figcaption { color: var(--black); }

/* ---------- app page ---------- */
.app-hero { background: var(--black); color: var(--white); padding: clamp(3rem, 7vw, 6rem) 0 var(--section); }
.app-hero .mega { color: var(--yellow); }
.app-hero-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.75rem; border-top: 2px solid #333; align-items: start; }
.app-hero-row .lead { grid-column: 1 / span 7; color: var(--muted-dark); }
.app-cta { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.trial-note { font-size: 1.0625rem; color: var(--muted-dark); }
.trial-note .text-link { margin-left: .5rem; }
.devices-hero { margin-top: clamp(3rem, 6vw, 5rem); }
.feature-group { padding: var(--section) 0; border-top: 2px solid var(--black); }
.field-coral { background: var(--coral); }
.field-purple { background: var(--purple); }
.field-blue { background: var(--blue); }
.feature-group .i-a { fill: var(--black); }
.feature-group .i-b { fill: var(--yellow); }
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: center; }
.feature-text { grid-column: 1 / span 5; }
.feature-grid > .devices { grid-column: 7 / span 6; }
.features { list-style: none; margin: 2.25rem 0 0; padding: 0; }
.features li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem 0; border-top: 2px solid var(--black); }
.f-icon { width: 3rem; height: 3rem; }
.features h3 { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.features p { margin-top: .4rem; font-size: 1.125rem; }

/* ---------- footer ---------- */
.foot { background: var(--black); color: var(--white); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; align-items: start; }
.foot-about { grid-column: 1 / span 5; font-size: 1.125rem; color: var(--muted-dark); }
.foot-nav { grid-column: 8 / span 5; display: flex; flex-direction: column; }
.foot-nav a { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-bottom: 1px solid #333; color: var(--white); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; text-decoration: none; }
.foot-nav a:hover { color: var(--yellow); }
.foot-word { margin-top: clamp(2.5rem, 5vw, 4rem); font-size: clamp(3.5rem, 15.5vw, 17rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--yellow); white-space: nowrap; }
.foot-small { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #333; font-size: 1rem; color: var(--muted-dark); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .top-nav, .signin { display: none; }
  .top-actions { margin-left: auto; }
  .hero-text { grid-column: 1 / -1; padding-bottom: 0; }
  .hero-photo { grid-column: 4 / -1; }
  .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer:nth-child(3) { border-left: 0; padding-left: 0; }
  .offer:nth-child(3) .arrow { left: 0; }
  .offer:nth-child(n+3) { border-top: 1px solid #333; }
  .photo-intro, .intro-text { grid-column: 1 / -1; }
  .section-head h2, .section-head .lead { grid-column: 1 / -1; }
  .topic-list a { grid-template-columns: 2.75rem minmax(0, 1fr) auto; }
  .t-desc { grid-column: 2; grid-row: 2; }
  .t-ask { grid-row: 1 / span 2; grid-column: 3; }
  .statement .mega, .statement-side { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .request-intro { grid-column: 1 / -1; position: static; }
  .request-box { grid-column: 1 / -1; }
  .band-text, .devices-band { grid-column: 1 / -1; }
  .app-hero-row .lead, .app-cta { grid-column: 1 / -1; }
  .feature-text, .feature-grid > .devices { grid-column: 1 / -1; }
  .foot-about, .foot-nav { grid-column: 1 / -1; }
  .practice-head .mega, .practice-head .lead { grid-column: 1 / -1; }
  .partners-text, .badges { grid-column: 1 / -1; }
  .companies a, .companies div { grid-template-columns: minmax(0, 1fr) auto; }
  .c-desc { grid-column: 1; grid-row: 2; }
  .companies .arrow { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 760px) {
  :root { --fs-body: 1.125rem; }
  .cards { grid-template-columns: 1fr; padding-bottom: 0; }
  .card + .card { margin-left: 1.25rem; margin-top: -2.5rem; }
  .card-online { margin-right: -1.25rem; }
  .card:not(:last-child) { padding-right: 1.5rem; }
  .cards { padding-right: 1.25rem; }
  .card-online, .card-hybrid { transform: none; }
  .hero-photo { grid-column: 1 / -1; }
  .badge { left: auto; right: 1rem; bottom: auto; top: -3rem; width: 7.5rem; height: 7.5rem; }
  .topic-list a { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1.1rem .25rem; }
  .t-ask { grid-column: 2; grid-row: 3; }
  .t-icon { width: 2.5rem; height: 2.5rem; }
  .steps { grid-template-columns: 1fr; }
  .practice-points, .facts { grid-template-columns: 1fr; }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: 1fr; }
  .choices { grid-template-columns: 1fr; }
  .choice { flex-direction: row; align-items: center; }
  .choice + .choice { border-left: 0; border-top: 2px solid var(--black); }
  .choice-icon { width: 2.25rem; height: 2.25rem; flex: none; }
}
@media (max-width: 560px) {
  .top-row { gap: 1rem; min-height: 4rem; }
  .logo span:not(.mark) { display: none; }
  .langs a { min-width: 1.9rem; font-size: .78rem; }
  .top-cta .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top-cta .short { display: inline; }
  .top-cta { font-size: .85rem; letter-spacing: .04em; }
  .offers-grid { grid-template-columns: 1fr; }
  .offer { border-left: 0; padding-left: 0; border-top: 1px solid #333; }
  .offer .arrow { left: 0; }
  .offer:first-child { border-top: 0; }
  .sentence { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  /* Phones: show the phone mockup alone, caption below it. */
  .devices .device-desktop { display: none; }
  .devices.with-phone .devices-stage { padding-right: 0; }
  .devices .device-phone { position: relative; right: auto; bottom: auto; width: 68%; margin: 0 auto; }
  .devices:not(.with-phone) .device-desktop { display: block; }
  .devices:not(.with-phone) .device-desktop .screen { border-width: .35rem .35rem .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .choice, .offer, .topic-list a, .topic-list a > *, .btn .arrow, .companies a { transition: none; }
  .badge svg { animation: none; }
}