/* Codynex School landing page.
   A plain light page where the product is the decoration: big type, real screens,
   rounded colour blocks. No glows, no gradients behind text. */
:root {
  --bg: #F4F4F2; --ink: #0B0B0C; --muted: #5E5F66; --faint: #8B8C93; --card: #FFFFFF; --line: #E4E4E0;
  --lav: #BCC1F3; --mint: #C2E6B8; --sky: #ABD3FA; --butter: #FCE5AC; --rose: #F8CBDB;
  --brand: #6B2FB8; --green: #1FA855; --red: #D8442B;
  --head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --r-block: 40px; --r-card: 28px;
  --gap: clamp(72px, 9vw, 132px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: var(--body); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { font-family: var(--head); letter-spacing: -0.03em; line-height: 1.06; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1264px; margin: 0 auto; padding-inline: 16px; }
.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 80; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: 16px; border: 1.5px solid var(--ink); cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, transform .2s ease; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2A2A2E; }
.btn-light { background: transparent; border-color: #C9C9C4; }
.btn-light:hover { background: #fff; border-color: var(--ink); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn[disabled] { opacity: .6; cursor: default; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(244, 244, 242, 0.86); backdrop-filter: blur(14px); }
.nav .wrap { display: flex; align-items: center; gap: 30px; height: 76px; padding-inline: 24px; max-width: 1440px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; }
.logo-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.nav-links { display: flex; gap: 28px; font-weight: 600; font-size: 15px; }
.nav-links a { opacity: .78; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-phone { font-weight: 600; font-size: 14.5px; margin-right: 8px; }

/* Hero: the three people the product is for are words in the headline and devices below it.
   Whichever is in turn is purple in the sentence and steps forward in the picture. */
.hero { padding: 72px 0 0; overflow: clip; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--brand); margin-bottom: 20px; }
.eyebrow span { font-variant-numeric: tabular-nums; color: var(--faint); font-weight: 500; }
.hero .eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--brand); }
.hero h1 { font-size: clamp(38px, 5.6vw, 82px); font-weight: 700; letter-spacing: -0.04em; max-width: 1080px; }
.role { all: unset; cursor: pointer; position: relative; font: inherit; letter-spacing: inherit; transition: color .4s ease; }
.role::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; border-radius: 99px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.role.on { color: var(--brand); }
.role.on::after { transform: scaleX(1); }
.role:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 8px; }
.hero-sub { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: #3C3D42; max-width: 620px; margin: 28px 0 32px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .wrap > * { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.ready .hero .wrap > * { opacity: 1; transform: none; }
.ready .hero .wrap > :nth-child(2) { transition-delay: .08s; }
.ready .hero .wrap > :nth-child(3) { transition-delay: .16s; }
.ready .hero .wrap > :nth-child(4) { transition-delay: .24s; }

.trio { position: relative; max-width: 1240px; margin: 70px auto 0; padding: 0 16px; aspect-ratio: 1240 / 560; perspective: 2200px; }
.trio::before { content: ''; position: absolute; left: 16px; right: 16px; top: 22%; bottom: 0; border-radius: 40px 40px 0 0; background: var(--tint); }
.dev { position: absolute; transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease; opacity: 0; }
.ready .dev { opacity: 1; }
.dev-office { left: 50%; top: 0; width: 64%; margin-left: -32%; z-index: 2; transform: translateY(var(--rise, 60px)) rotateX(calc(var(--tilt, 0) * 16deg)); transform-origin: 50% 100%; }
.dev-teacher { left: 4%; top: 16%; width: 17.5%; z-index: 1; transform: translateY(var(--rise, 90px)) scale(.94); filter: saturate(.7) brightness(.97); }
.dev-parent { right: 4%; top: 16%; width: 17.5%; z-index: 1; transform: translateY(var(--rise, 90px)) scale(.94); filter: saturate(.7) brightness(.97); }
.ready .trio { --rise: 0px; }
.trio[data-focus='teacher'] .dev-teacher, .trio[data-focus='parent'] .dev-parent { transform: translate(var(--in), -4%) scale(1.2); z-index: 3; filter: none; }
.dev-teacher { --in: 34%; }
.dev-parent { --in: -34%; }
.trio[data-focus='teacher'] .dev-office, .trio[data-focus='parent'] .dev-office { transform: scale(.94) rotateX(calc(var(--tilt, 0) * 16deg)); filter: saturate(.7) brightness(.97); }
.trio .phone { width: 100%; padding: 6px; border-radius: 30px; }
.trio .phone img { border-radius: 24px; }
.trio .browser { box-shadow: 0 50px 90px -40px rgba(30, 20, 60, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.tag { position: absolute; left: 50%; top: -34px; translate: -50% 0; font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; transition: color .4s; }
.trio[data-focus='office'] .dev-office .tag, .trio[data-focus='teacher'] .dev-teacher .tag, .trio[data-focus='parent'] .dev-parent .tag { color: var(--brand); }

/* Section headings: a number, who it is for, and one plain sentence */
section { padding-top: var(--gap); }
.head { max-width: 900px; margin-bottom: 40px; }
.head h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 700; letter-spacing: -0.04em; }

/* Walk-throughs: the steps are a list you can read; the one in turn opens and the player shows it */
.show { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 24px; align-items: stretch; }
.show-phone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.show.flip .steps { order: 2; }
.steps { list-style: none; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.step { position: relative; border-radius: 22px; overflow: hidden; transition: background .35s ease; }
.step > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 24px; cursor: pointer; font-family: var(--head); font-weight: 700; font-size: clamp(18px, 1.7vw, 22px); letter-spacing: -0.02em; color: #77787F; transition: color .3s; }
.step > button:hover { color: var(--ink); }
.step > button:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; border-radius: 22px; }
.step .n { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--faint); width: 22px; font-variant-numeric: tabular-nums; }
.step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1); }
.step-body > div { overflow: hidden; padding: 0 24px 0 62px; }
.step-body p { color: #3C3D42; font-size: 16.5px; }
.step.on { background: #fff; }
.step.on > button { color: var(--ink); }
.step.on .n { color: var(--brand); }
.step.on .step-body { grid-template-rows: 1fr; }
.step.on .step-body > div { padding-bottom: 22px; }
.was { margin-top: 12px; font-size: 14px !important; color: var(--muted) !important; }
.was b { font-weight: 600; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-right: 8px; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.step.on .bar { animation: fill var(--dur, 5s) linear forwards; }
.paused .step.on .bar { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

.stagebox { position: relative; border-radius: 36px; background: var(--panel, var(--tint)); display: grid; place-items: center; padding: clamp(18px, 3.6vw, 60px); min-height: 540px; min-width: 0; }
.show-web .stagebox { --panel: #16131F; }
#teachers .stagebox { --panel: var(--tint); }
#parents .stagebox { --panel: var(--sand); }
.pause { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.9); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4); }
.pause .icon { width: 17px; height: 17px; }
.icon-play { display: none; }
.paused .icon-play { display: block; }
.paused .icon-pause { display: none; }
.caption { font-size: 13.5px; color: var(--faint); margin-top: 14px; text-align: right; }

/* The players: real screens that move like a recording */
.browser { width: 100%; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.7); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; background: #F3F3F0; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5D5D0; }
.browser-bar span { margin-left: 12px; font-size: 11px; color: var(--faint); background: #fff; border-radius: 999px; padding: 2px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frames { position: relative; overflow: hidden; background: #F7F6FB; }
.browser .frames { aspect-ratio: 1280 / 800; }
.frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .6s ease; }
.frames img.on { opacity: 1; animation: drift var(--dur, 5s) linear forwards; }
.paused .frames img.on { animation-play-state: paused; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.16); } }
.phone { width: min(290px, 78%); border-radius: 42px; background: #fff; padding: 8px; box-shadow: 0 40px 80px -34px rgba(20, 20, 40, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.phone .frames { aspect-ratio: 375 / 812; border-radius: 34px; }
.phone .frames img.on { animation-name: drift-phone; }
@keyframes drift-phone { from { transform: scale(1); } to { transform: scale(1.05); } }
.tap { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(107, 47, 184, 0.28); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); left: var(--x, 50%); top: var(--y, 50%); transition: left 1.1s cubic-bezier(.5, 0, .2, 1), top 1.1s cubic-bezier(.5, 0, .2, 1); z-index: 2; pointer-events: none; }
.tap::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; }
.tap.press { animation: press .5s ease; }
.tap.press::after { animation: ring .7s ease-out; }
@keyframes press { 40% { transform: scale(.72); } }
@keyframes ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes bob { 50% { translate: 0 -7px; } }

/* White cards in a grid */
.cards { display: grid; gap: 20px; margin-top: 20px; }
.cards.two { grid-template-columns: 1fr 1fr; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--card); border-radius: var(--r-block); padding: clamp(28px, 3.4vw, 52px); }
.card h3 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; margin-bottom: 14px; }
.card p { color: #3C3D42; }
.card h3 u { text-decoration-color: var(--brand); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.center { text-align: center; }

.notes { position: relative; height: 250px; margin-bottom: 26px; }
.note { position: absolute; width: 190px; background: #FFFCEB; border-radius: 6px; padding: 12px 14px; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 12.5px; line-height: 1.5; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.35); rotate: var(--r); left: var(--l); top: var(--t); animation: bob 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.note b { display: block; font-family: var(--body); font-size: 10.5px; letter-spacing: .03em; color: #6B6B60; margin-bottom: 5px; }
.note s { color: var(--red); }
.note.dark { background: #26222F; color: #fff; font-family: var(--body); }
.note.dark b { color: #C9B8F5; }
.note.dark strong { display: block; font-size: 17px; color: #FF9B7E; }
.note.green { background: #E8F3E4; font-family: var(--body); }
.ticks { list-style: none; display: grid; gap: 12px; margin-top: 20px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; }
.ticks .icon { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3.2; margin-top: 2px; }
.brands { display: grid; gap: 10px; margin-bottom: 28px; }
.brand-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; color: #fff; font-family: var(--head); font-weight: 700; transition: transform .6s cubic-bezier(.2, 1.1, .3, 1); }
.brand-row span { width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, 0.24); display: grid; place-items: center; }
.brand-row small { display: block; font-family: var(--body); font-weight: 400; font-size: 12.5px; opacity: .85; }
.brand-row:nth-child(2) { transform: translateX(22px); }
.brand-row:nth-child(3) { transform: translateX(44px); }

.mini { background: var(--card); border-radius: 26px; padding: 26px; transition: transform .25s ease, box-shadow .25s ease; }
.mini:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.35); }
.mini .tile { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tone, var(--lav)); margin-bottom: 18px; }
.mini h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.02em; }
.mini p { font-size: 15px; color: var(--muted); line-height: 1.5; }

.step-n { font-family: var(--head); font-weight: 800; font-size: 74px; line-height: 1; letter-spacing: -0.05em; margin-bottom: 18px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.facts div { background: var(--bg); border-radius: 20px; padding: 20px; }
.facts dt { font-family: var(--head); font-weight: 800; font-size: 40px; letter-spacing: -0.04em; line-height: 1; }
.facts dd { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
blockquote { font-family: var(--head); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.25; margin-top: 26px; }
cite { display: block; font-family: var(--body); font-style: normal; font-weight: 500; font-size: 14.5px; color: var(--muted); margin-top: 12px; letter-spacing: 0; }
address { font-style: normal; color: #3C3D42; line-height: 1.75; margin-top: 22px; }
address a, .link { text-decoration: underline; text-underline-offset: 3px; }

.faq { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border-radius: 22px; padding: 0 26px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-family: var(--head); font-weight: 700; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 500; font-size: 22px; transition: rotate .3s ease, background .2s; }
.faq details[open] summary::after { rotate: 45deg; background: var(--ink); color: #fff; }
.faq p { color: #3C3D42; padding: 0 50px 24px 0; }

/* Final block: the demo request */
.final { background: var(--ink); color: #fff; border-radius: var(--r-block); padding: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.final h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; }
.final p.lead { color: rgba(255, 255, 255, 0.75); margin-top: 18px; font-size: 18px; max-width: 440px; }
.final .ticks { margin-top: 28px; }
.final .reach { margin-top: 28px; color: rgba(255, 255, 255, 0.75); }
.final .reach a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.form { background: #fff; color: var(--ink); border-radius: var(--r-card); padding: clamp(22px, 3vw, 36px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field label span { color: var(--red); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid #DADAD5; border-radius: 14px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 11, 12, 0.08); }
.field [aria-invalid='true'] { border-color: var(--red); }
.error { color: var(--red); font-size: 13.5px; margin-top: 5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--faint); margin-top: 14px; text-align: center; }
.form-alert { background: #FCEBE5; color: var(--red); border-radius: 12px; padding: 11px 14px; font-size: 14.5px; margin-bottom: 14px; }
.thanks { text-align: center; padding: 44px 8px; }
.thanks .big-tick { width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.thanks h3 { font-size: 32px; margin-bottom: 8px; }
.thanks p { color: var(--muted); }

footer { padding: 56px 0 120px; font-size: 15px; color: var(--muted); }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr; gap: 32px; padding-top: 34px; border-top: 1px solid #D9D9D4; }
.foot strong { display: block; color: var(--ink); font-family: var(--head); font-size: 15px; margin-bottom: 10px; }
.foot p { line-height: 1.8; }
.foot a:hover { color: var(--ink); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; font-size: 14px; }

/* Always within reach */
.float-demo { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 45; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 8px; border-radius: 999px; background: #fff; box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06); font-weight: 600; font-size: 15px; transition: translate .4s ease, opacity .3s; }
.float-demo .thumbs { display: flex; }
.float-demo .thumbs img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: left top; border: 2px solid #fff; }
.float-demo .thumbs img + img { margin-left: -12px; }
.float-demo.hide { translate: -50% 90px; opacity: 0; pointer-events: none; }
.float-wa { position: fixed; right: 22px; bottom: 22px; z-index: 45; width: 60px; height: 60px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -10px rgba(31, 168, 85, 0.8); transition: transform .2s ease; }
.float-wa:hover { transform: scale(1.07); }
.float-wa .icon { width: 28px; height: 28px; }
.float-call { position: fixed; right: 22px; bottom: 94px; z-index: 45; width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.06); transition: transform .2s ease; }
.float-call:hover { transform: scale(1.07); }

/* Things arrive as they scroll into view */
[data-reveal] { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].in { opacity: 1; transform: none; }
.mega[data-reveal] { transform: translateY(60px); letter-spacing: -0.02em; transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1), letter-spacing 1.2s cubic-bezier(.2, .8, .2, 1); }
.mega[data-reveal].in { transform: none; letter-spacing: -0.045em; }
.brands:not(.in) .brand-row { transform: translateX(0); }

@media (max-width: 1100px) {
  .nav-links, .nav-phone { display: none; }
  .cards.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .block, .block.phone-block, .final, .cards.two, .cards.three { grid-template-columns: 1fr; }
  .block { padding: 12px; border-radius: 30px; }
  .block-card { min-height: 0; border-radius: 22px; }
  .slides { min-height: 300px; }
  .card { border-radius: 30px; }
  .fan { padding-top: 70px; margin-inline: -30vw; }
  .fan figure { width: 46vw; margin-inline: -7vw; }
  .fan .bubble { font-size: 12.5px; padding: 6px 12px; top: -42px; }
  .facts, .foot { grid-template-columns: 1fr; }
  .foot { gap: 22px; }
  .notes { height: 230px; scale: .92; transform-origin: left top; }
  .brand-row:nth-child(2) { transform: translateX(10px); }
  .brand-row:nth-child(3) { transform: translateX(20px); }
  .nav .wrap { height: 64px; padding-inline: 16px; }
  .nav-end .btn-light { display: none; }
  .float-call { display: none; }
  .float-demo { left: 16px; right: 86px; translate: 0 0; justify-content: center; padding: 0 16px; background: var(--ink); color: #fff; }
  .float-demo .thumbs { display: none; }
  .float-demo.hide { translate: 0 90px; }
  .float-wa { right: 16px; width: 54px; height: 54px; }
  .faq p { padding-right: 0; }
}
@media (max-width: 560px) {
  .cards.four, .form-row { grid-template-columns: 1fr; }
  .form-row { gap: 0; }
  .hero { padding-top: 36px; }
  .phone { width: min(260px, 84%); }
  .mega { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], .hero h1 .line > span, .fan figure { opacity: 1; transform: none; }
  .fan figure { transform: translateY(var(--ty)) rotateY(var(--ry)); }
  .tap { display: none; }
}
.logo { white-space: nowrap; }
@media (max-width: 560px) {
  .logo { font-size: 18px; }
  .logo-mark { width: 34px; height: 34px; }
  .nav-end .btn-dark { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .notes { scale: .8; }
  .tap { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}

/* ===== Own identity: one accent (the product's purple), warm neutrals, no borrowed parts ===== */
:root { --bg: #F7F6F3; --tint: #ECE6F8; --sand: #F1E9DA; --lav: #E3DBF6; --mint: #DDEBD8; --sky: #DCE7F5; --butter: #F3E8CC; --rose: #F3DDE4; --brand: #6B2FB8; }
.logo-mark { background: var(--brand); }
.btn-dark { background: var(--ink); }
.card h3 em { font-style: normal; color: var(--brand); }
.mini .tile { color: var(--brand); background: var(--tint); }
.step-n { color: var(--brand); }
.ticks .icon { background: var(--brand); }
.final .ticks .icon { background: #fff; color: var(--ink); }
.brands .brand-row:nth-child(2), .brands .brand-row:nth-child(3) { transform: none; }
.brands { gap: 8px; }
.float-wa { right: 22px; bottom: 22px; }
.float-call { bottom: 94px; }
#more .cards, #start .cards, #faq .faq { margin-top: 0; }
#faq .faq { margin: 0; max-width: 980px; }

@media (max-width: 860px) {
  .show, .show-phone { grid-template-columns: 1fr; }
  .show.flip .steps { order: 0; }
  .stagebox { min-height: 0; border-radius: 28px; padding: 22px 16px 60px; }
  .steps { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 auto; background: #EDEBE6; border-radius: 999px; }
  .step.on { background: var(--ink); }
  .step > button { padding: 10px 16px; font-size: 14.5px; gap: 8px; white-space: nowrap; }
  .step.on > button { color: #fff; }
  .step .n { display: none; }
  .step-body { display: none; }
  .show { position: relative; }
  .show::after { content: attr(data-text); display: block; order: 3; color: #3C3D42; font-size: 16px; min-height: 96px; }
  .caption { text-align: left; }
  .hero { padding-top: 40px; }
  .trio { aspect-ratio: 1 / 0.92; margin-top: 56px; }
  .trio::before { top: 30%; border-radius: 28px 28px 0 0; }
  .dev-office { width: 92%; margin-left: -46%; top: 6%; }
  .dev-teacher { left: 6%; top: 34%; width: 34%; }
  .dev-parent { right: 6%; top: 34%; width: 34%; }
  .dev-teacher { --in: 20%; }
  .dev-parent { --in: -20%; }
  .trio[data-focus='teacher'] .dev-teacher, .trio[data-focus='parent'] .dev-parent { transform: translate(var(--in), -8%) scale(1.12); }
  .tag { display: none; }
  .head { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .wrap > *, .dev { opacity: 1; transform: none; }
  .dev-office { transform: none; }
}
.hero { padding-top: 56px; }
.hero h1 { font-size: clamp(34px, 4.9vw, 70px); max-width: 1000px; }
.hero-sub { margin: 22px 0 26px; max-width: 600px; }
.trio { margin-top: 64px; }
.role::after { bottom: -.04em; height: .07em; }
@media (max-width: 860px) { .steps { justify-content: flex-start; scroll-behavior: smooth; } }

/* ===== Hero: a fan of real web panel screens with the two apps standing in front ===== */
.hero { text-align: center; padding-top: 52px; }
.hero .eyebrow { justify-content: center; }
.hero .eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--brand); }
.hero h1 { font-size: clamp(38px, 5.9vw, 82px); font-weight: 600; max-width: none; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .1em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.ready .hero h1 .line > span { transform: none; }
.ready .hero h1 .line:nth-child(2) > span { transition-delay: .12s; }
.hero h1 em { font-style: normal; color: var(--brand); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.02em; height: .08em; border-radius: 99px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2, .8, .2, 1) .9s; }
.ready .hero h1 em::after { transform: scaleX(1); }
.hero-sub { margin: 40px auto 26px; max-width: 640px; font-size: clamp(18px, 1.7vw, 22px); }
.hero-cta { justify-content: center; }

.fan { position: relative; display: flex; justify-content: center; perspective: 1900px; padding: 46px 0 64px; margin-inline: -3vw; transform: rotateX(var(--fx, 0deg)) rotateY(var(--fy, 0deg)); transition: transform .3s ease-out; }
.fan::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 18px; height: 46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(107, 47, 184, 0.2), transparent); z-index: 0; }
.fan figure { position: relative; flex: 0 0 auto; width: clamp(180px, 24vw, 372px); margin-inline: calc(-2.6vw + var(--spread, 0) * 0.5vw); transform-style: preserve-3d; transform: translateY(calc(var(--ty) + 90px)) rotateY(var(--ry)); opacity: 0; transition: transform 1.1s cubic-bezier(.2, .9, .2, 1), opacity .7s ease, margin .3s ease-out; transition-delay: calc(.35s + var(--n) * .08s), calc(.35s + var(--n) * .08s), 0s; z-index: var(--zi); }
.ready .fan figure { transform: translateY(var(--ty)) rotateY(var(--ry)); opacity: 1; }
.fan.settled figure { transition: transform .35s ease, margin .3s ease-out; transition-delay: 0s; }
.fan.settled figure:hover { transform: translateY(calc(var(--ty) - 16px)) rotateY(var(--ry)); }
.fan figure:nth-child(1) { --ry: 34deg; --ty: 54px; --zi: 1; --n: 0; }
.fan figure:nth-child(2) { --ry: 22deg; --ty: 26px; --zi: 2; --n: 1; }
.fan figure:nth-child(3) { --ry: 8deg; --ty: 4px; --zi: 3; --n: 2; }
.fan figure:nth-child(4) { --ry: -8deg; --ty: 4px; --zi: 3; --n: 3; }
.fan figure:nth-child(5) { --ry: -22deg; --ty: 26px; --zi: 2; --n: 4; }
.fan figure:nth-child(6) { --ry: -34deg; --ty: 54px; --zi: 1; --n: 5; }
.fan figure img { width: 100%; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -24px rgba(30, 20, 60, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.06); }
/* Labels are quiet tabs on the top edge of each screen, in the one accent colour */
.fan figcaption { position: absolute; left: 14px; top: -13px; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 5px 13px 5px 10px; font-family: var(--head); font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05); transform: translateZ(26px); white-space: nowrap; }
.fan figcaption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.duo { position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 5; display: flex; gap: clamp(150px, 20vw, 300px); align-items: flex-end; transform: translateZ(90px); pointer-events: none; }
.duo .phone { position: relative; width: clamp(92px, 11vw, 168px); padding: 5px; border-radius: 26px; opacity: 0; transform: translateY(70px); transition: transform 1s cubic-bezier(.2, 1.1, .3, 1) 1s, opacity .6s ease 1s; }
.duo .phone:nth-child(2) { transition-delay: 1.15s; }
.ready .duo .phone { opacity: 1; transform: none; }
.duo .phone img { border-radius: 21px; width: 100%; }
.duo .phone span { position: absolute; left: 50%; bottom: -30px; translate: -50% 0; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }

@media (max-width: 860px) {
  .hero { padding-top: 36px; }
  .fan { padding: 40px 0 56px; margin-inline: -30vw; }
  .fan figure { width: 46vw; margin-inline: -7vw; }
  .fan figcaption { font-size: 11.5px; padding: 4px 10px 4px 8px; }
  .duo { gap: 34vw; }
  .duo .phone { width: 24vw; border-radius: 20px; padding: 4px; }
  .duo .phone img { border-radius: 16px; }
  .duo .phone span { font-size: 11.5px; bottom: -24px; }
  .hero-sub { margin-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .fan figure { transform: translateY(var(--ty)) rotateY(var(--ry)); opacity: 1; }
  .hero h1 .line > span, .duo .phone { transform: none; opacity: 1; }
}
.fan { padding-top: 58px; }
.duo { gap: clamp(150px, 24vw, 350px); }
.duo .phone { width: clamp(78px, 8.4vw, 122px); border-radius: 22px; padding: 4px; }
.duo .phone img { border-radius: 18px; }
.hero-sub { margin-top: 52px; }
@media (max-width: 860px) {
  .duo { gap: 38vw; }
  .duo .phone { width: 19vw; border-radius: 16px; padding: 3px; }
  .duo .phone img { border-radius: 13px; }
  .hero-sub { margin-top: 40px; }
}

/* ===== Theme: the product's own purple (#6B2FB8, with #8B4FD9 and the deep #3A1B5C of its sign-in screen) ===== */
:root { --brand: #6B2FB8; --brand-2: #8B4FD9; --deep: #3A1B5C; --night: #1E1430; --ink: #1B1625; --muted: #6B6178; --faint: #918A9D; --tint: #F1EAFB; --bg: #F8F6FB; --line: #E8E3F2; --sand: #EFE9F7; }
body { color: var(--ink); }
.btn { border-color: var(--brand); }
.btn-dark { background: var(--brand); color: #fff; box-shadow: 0 12px 26px -12px rgba(107, 47, 184, 0.75); }
.btn-dark:hover { background: #5A26A0; }
.btn-light { border-color: #D6CBEA; color: var(--ink); }
.btn-light:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.nav { background: rgba(248, 246, 251, 0.86); }
.logo-mark { background: linear-gradient(135deg, var(--deep), var(--brand) 60%, var(--brand-2)); }
.nav-links a:hover { color: var(--brand); }
.hero h1 em, .card h3 em, .eyebrow, .step.on .n, .was b, .step-n, .facts dt { color: var(--brand); }
.show-web .stagebox { --panel: var(--night); }
#teachers .stagebox { --panel: var(--tint); }
#parents .stagebox { --panel: linear-gradient(135deg, var(--deep), var(--brand) 60%, var(--brand-2)); }
.stagebox { background: var(--panel, var(--tint)); }
.step.on { box-shadow: 0 16px 34px -26px rgba(58, 27, 92, 0.5); }
.mini .tile { background: var(--tint); color: var(--brand); }
.ticks .icon { background: var(--brand); }
.facts div { background: rgba(255, 255, 255, 0.6); }
.faq summary::after { background: var(--tint); color: var(--brand); }
.faq details[open] summary::after { background: var(--brand); color: #fff; }
.final { background: linear-gradient(135deg, #2A1247 0%, var(--deep) 45%, var(--brand) 130%); }
.final .ticks .icon { background: #fff; color: var(--brand); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(107, 47, 184, 0.14); }
.form .btn-dark { box-shadow: none; }
.foot a:hover, address a:hover { color: var(--brand); }
.float-call { color: var(--brand); }
[style*='--butter'], [style*='var(--mint)'], [style*='var(--lav)'] { background: var(--tint) !important; }
:focus-visible { outline-color: var(--brand-2); }

/* ===== Hero phones: sized from the screens behind them and standing on the same line =====
   --w is one screen's width. A phone is a little taller than a screen and stands where two screens meet. */
.fan { --w: clamp(180px, 24vw, 372px); --pitch: calc(var(--w) - 5.2vw); --pw: calc(var(--w) * 0.29); padding: 58px 0 96px; }
.fan figure { width: var(--w); }
.duo { bottom: 62px; gap: calc(var(--pitch) * 1.9 - var(--pw)); transform: none; align-items: flex-end; }
.duo .phone { width: var(--pw); padding: calc(var(--pw) * 0.035); border-radius: calc(var(--pw) * 0.17); box-shadow: 0 30px 50px -22px rgba(30, 20, 48, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.07); }
.duo .phone img { border-radius: calc(var(--pw) * 0.14); }
.duo .phone span { bottom: -32px; font-size: 13.5px; color: var(--muted); }
.fan::before { bottom: 40px; background: radial-gradient(closest-side, rgba(107, 47, 184, 0.22), transparent); }
.hero-sub { margin-top: 26px; }
@media (max-width: 860px) {
  .fan { --w: 46vw; --pitch: 32vw; padding: 40px 0 78px; }
  .duo { bottom: 48px; gap: calc(var(--pitch) * 1.9 - var(--pw)); }
  .duo .phone { width: var(--pw); padding: calc(var(--pw) * 0.035); border-radius: calc(var(--pw) * 0.17); }
  .duo .phone img { border-radius: calc(var(--pw) * 0.14); }
  .duo .phone span { font-size: 11.5px; bottom: -26px; }
  .hero-sub { margin-top: 20px; }
}

/* Questions on the left, a way to ask your own on the right */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#faq .faq { max-width: none; }
.ask { position: sticky; top: 100px; border-radius: var(--r-block); padding: clamp(26px, 3vw, 40px); color: #fff; background: linear-gradient(135deg, #2A1247 0%, var(--deep) 45%, var(--brand) 130%); display: grid; gap: 12px; }
.ask h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; }
.ask p { color: rgba(255, 255, 255, 0.78); margin-bottom: 8px; }
.ask .btn { width: 100%; }
.ask .btn-dark { background: #fff; color: var(--brand); border-color: #fff; box-shadow: none; }
.ask .btn-dark:hover { background: var(--tint); }
.ask .btn-light { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.ask .btn-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.ask-mail { font-size: 14.5px; text-align: center; margin: 4px 0 0 !important; }
.ask-mail a { color: #fff; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .ask { position: static; }
}

/* Screens on the right half are overlapped on their left edge, so their labels sit on the right */
.fan figure:nth-child(n+5) figcaption { left: auto; right: 14px; }
/* The two outermost screens show only a strip between the page edge and their neighbour: the label goes there */
.fan figure:nth-child(1) figcaption { left: auto; right: 32%; }
.fan figure:nth-child(6) figcaption { right: auto; left: 32%; }

/* Help us improve: the reader's turn to talk */
.ideas { background: var(--tint); border-radius: var(--r-block); padding: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.ideas h2 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 700; letter-spacing: -0.04em; }
.ideas p.lead { color: #3C3D42; margin-top: 18px; font-size: 18px; max-width: 460px; }
.ideas .ticks { margin-top: 26px; }
.ideas .form { box-shadow: 0 30px 60px -40px rgba(58, 27, 92, 0.5); }
.field textarea::placeholder { color: var(--faint); }
@media (max-width: 860px) { .ideas { grid-template-columns: 1fr; } }

/* On the right half each screen lies over the one before it, so its sidebar (its left edge) shows,
   the way the left half shows it. Labels go back to the left corner there. */
.fan figure:nth-child(4) { --zi: 3; }
.fan figure:nth-child(5) { --zi: 4; }
.fan figure:nth-child(6) { --zi: 5; }
.duo { z-index: 7; }
.fan figure:nth-child(n+5) figcaption, .fan figure:nth-child(6) figcaption { left: 14px; right: auto; }
/* The phones stand over the middle of the two centre screens, clear of every sidebar */
.duo { gap: calc(var(--pitch) * 1.3 - var(--pw)); }
@media (max-width: 860px) { .duo { gap: calc(var(--pitch) * 1.3 - var(--pw)); } }

/* The Codynex mark, on its own dark-purple tile */
img.logo-mark { width: 38px; height: 38px; border-radius: 11px; background: none; display: block; object-fit: cover; }
.foot .logo { margin-bottom: 12px; color: var(--ink); }
@media (max-width: 560px) { img.logo-mark { width: 34px; height: 34px; } }

/* Tamil: a headline feature, shown with the app's real Tamil screens */
.tamil { margin-top: 20px; border-radius: var(--r-block); padding: clamp(28px, 5vw, 72px) clamp(28px, 5vw, 72px) 0; color: #fff; background: linear-gradient(135deg, #2A1247 0%, var(--deep) 45%, var(--brand) 130%); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; overflow: hidden; }
.tamil > div:first-child { padding-bottom: clamp(28px, 5vw, 72px); align-self: center; }
.tamil .eyebrow { color: #D9C7FA; }
.tamil h2 { font-size: clamp(32px, 4.4vw, 60px); font-weight: 700; letter-spacing: -0.04em; }
.tamil p.lead { color: rgba(255, 255, 255, 0.8); margin-top: 18px; font-size: 18px; max-width: 480px; }
.tamil .ticks { margin-top: 26px; }
.tamil .ticks .icon { background: #fff; color: var(--brand); }
.tamil-phones { display: flex; justify-content: center; gap: 18px; align-items: flex-end; }
.tamil-phones .phone { width: min(230px, 46%); padding: 6px; border-radius: 34px 34px 0 0; margin-bottom: -60px; box-shadow: 0 -10px 60px -20px rgba(0, 0, 0, 0.6); }
.tamil-phones .phone img { border-radius: 28px 28px 0 0; width: 100%; }
.tamil-phones .phone:first-child { margin-bottom: -130px; }
.tamil[data-reveal] .phone { transform: translateY(80px); transition: transform 1.1s cubic-bezier(.2, .9, .2, 1) .15s; }
.tamil[data-reveal] .phone:nth-child(2) { transition-delay: .3s; }
.tamil.in .phone { transform: none; }
@media (max-width: 860px) {
  .tamil { grid-template-columns: 1fr; padding-bottom: 0; }
  .tamil > div:first-child { padding-bottom: 8px; }
  .tamil-phones .phone { width: 46%; border-radius: 26px 26px 0 0; }
  .tamil-phones .phone img { border-radius: 21px 21px 0 0; }
}
@media (max-width: 1280px) { .nav-links { gap: 22px; } }

/* ===== Phone audit fixes ===== */
@media (max-width: 860px) {
  /* Forms use the full width of the screen: the coloured block keeps only a thin frame around them */
  .final, .ideas { padding: 28px 12px 12px; gap: 26px; border-radius: 28px; }
  .final > div:first-child, .ideas > div:first-child { padding-inline: 12px; }
  .form { padding: 20px 16px; border-radius: 20px; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 14px; }
  .field label { font-size: 15px; }
  .form .btn { height: 54px; font-size: 16.5px; }
  .form-note { font-size: 13.5px; }
  /* Small features: icon beside the text, so eight of them are a short list and not eight tall boxes */
  .mini { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 18px; border-radius: 22px; }
  .mini .tile { width: 44px; height: 44px; margin: 0; grid-row: span 2; }
  .mini h3 { font-size: 18px; margin: 2px 0 2px; }
  .cards.four { gap: 10px; }
  /* Links you tap with a thumb need height */
  .foot p a, address a, .final .reach a, .ask-mail a, .form-note a { display: inline-block; padding-block: 7px; }
  .foot p { line-height: 1.5; }
  .faq summary { padding: 20px 0; }
  .faq details { padding: 0 18px; border-radius: 18px; }
  /* The WhatsApp button is smaller and the page leaves room for it at the very end */
  .float-wa { width: 50px; height: 50px; right: 12px; bottom: 14px; }
  .float-wa .icon { width: 24px; height: 24px; }
  footer { padding-bottom: 84px; }
  .caption { padding-right: 56px; }
  .browser-bar span { font-size: 12px; }
  .fan figcaption { font-size: 12.5px; }
  .duo .phone span { font-size: 12.5px; }
  .brand-row small { font-size: 13px; }
  .card { padding: 24px 20px; }
  .tamil { padding: 28px 22px 0; border-radius: 28px; }
  .ask { border-radius: 28px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-cta { max-width: 340px; margin-inline: auto; }
}
.float-wa, .float-call { transition: transform .2s ease, opacity .25s ease, translate .3s ease; }
.float-wa.away, .float-call.away { opacity: 0; translate: 0 80px; pointer-events: none; }

/* ===== Phone menu ===== */
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid #D6CBEA; background: #fff; cursor: pointer; padding: 0; position: relative; flex-shrink: 0; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.menu-btn span:nth-child(1) { top: 14px; }
.menu-btn span:nth-child(2) { top: 20px; }
.menu-btn span:nth-child(3) { top: 26px; }
.menu-btn[aria-expanded='true'] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-btn[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded='true'] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
.menu { position: absolute; left: 10px; right: 10px; top: calc(100% + 6px); background: #fff; border-radius: 24px; padding: 10px 14px 16px; box-shadow: 0 30px 60px -20px rgba(30, 20, 48, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05); display: grid; max-height: calc(100vh - 90px); max-height: calc(100svh - 90px); overflow-y: auto; animation: menu-in .25s cubic-bezier(.2, .8, .2, 1); }
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } }
.menu > a:not(.btn) { padding: 14px 8px; font-family: var(--head); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); }
.menu > a:not(.btn):active { color: var(--brand); }
.menu-reach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 8px; }
.menu .btn { width: 100%; }
.nav { position: sticky; }
@media (max-width: 1100px) {
  .menu-btn { display: block; }
}
@media (max-width: 560px) {
  .nav-end .btn-dark { display: none; }
  .menu-btn { width: 40px; height: 40px; }
  .menu-btn span { left: 10px; right: 10px; }
}
@media (min-width: 1101px) { .menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } }

/* ===== Floating: back to the top (everywhere) and Request a demo (phones only) ===== */
.float-top { position: fixed; right: 22px; bottom: 166px; z-index: 45; width: 60px; height: 60px; border-radius: 50%; border: 0; background: #fff; color: var(--brand); display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.06); opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .25s ease, translate .3s ease, transform .2s ease; }
.float-top.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.float-top:hover { transform: scale(1.07); }
.float-top.away, .float-demo.away { opacity: 0; translate: 0 80px; pointer-events: none; }
.float-demo { display: none; left: auto; padding: 0; background: var(--brand); box-shadow: none; height: auto; translate: none; }
@media (max-width: 860px) {
  .float-top { right: 12px; bottom: 74px; width: 50px; height: 50px; }
  .float-demo { display: inline-flex; align-items: center; justify-content: center; position: fixed; left: 12px; right: 74px; bottom: 14px; z-index: 45; height: 50px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; font-size: 16px; box-shadow: 0 14px 30px -12px rgba(107, 47, 184, 0.9); opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .25s ease, translate .3s ease; }
  .float-demo.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
  .float-demo.away { opacity: 0; translate: 0 80px; pointer-events: none; }
  footer { padding-bottom: 92px; }
}

/* ===== Up and down: one pill, two arrows, each drawn dead centre of its half ===== */
.float-scroll { position: fixed; right: 22px; bottom: 166px; z-index: 45; width: 60px; border-radius: 30px; background: #fff; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; overflow: hidden; opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .25s ease, translate .3s ease; }
.float-scroll.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.float-scroll.away { opacity: 0; translate: 0 80px; pointer-events: none; }
.float-scroll button { all: unset; box-sizing: border-box; width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--brand); transition: background .2s ease, opacity .2s ease; }
.float-scroll button + button { border-top: 1px solid var(--line); }
.float-scroll button:hover { background: var(--tint); }
.float-scroll button:focus-visible { outline: 3px solid var(--brand-2); outline-offset: -3px; border-radius: 30px; }
.float-scroll button[disabled] { opacity: .3; cursor: default; background: none; }
.float-scroll svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .float-scroll { right: 12px; bottom: 74px; width: 50px; border-radius: 25px; }
  .float-scroll button { height: 44px; }
  .float-scroll svg { width: 20px; height: 20px; }
}
/* On a wide screen the arrows sit clear of the forms, so they stay put there */
@media (min-width: 861px) { .float-scroll.is-on.away { opacity: 1; translate: 0 0; pointer-events: auto; } }
/* One arrow only: the pill is a circle again */
.float-scroll button { height: 60px; }
@media (max-width: 860px) { .float-scroll button { height: 50px; } }

/* ===== Footer, rebuilt after its audit: a dark block that closes the page, with every link in reach ===== */
footer { padding: var(--gap) 0 24px; color: rgba(255, 255, 255, 0.72); font-size: 15.5px; }
.footer { background: var(--night); border-radius: var(--r-block); padding: clamp(28px, 4.5vw, 64px) clamp(24px, 4.5vw, 64px) 26px; }
.foot { display: grid; grid-template-columns: 1.5fr .8fr .8fr 1.25fr; gap: 40px; padding-top: 0; border-top: none; }
.foot strong { display: block; color: #fff; font-family: var(--head); font-size: 15px; letter-spacing: 0; margin-bottom: 14px; }
.foot .logo { color: #fff; margin-bottom: 16px; }
.foot .logo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }
.foot-brand p { max-width: 340px; line-height: 1.6; margin-bottom: 22px; }
.foot-brand .btn { box-shadow: none; }
.foot nav a, .foot > div:last-child a { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: rgba(255, 255, 255, 0.72); transition: color .2s ease, translate .2s ease; }
.foot nav a:hover, .foot > div:last-child a:hover { color: #fff; translate: 3px 0; }
.foot .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--brand-2); }
.foot-base { margin-top: clamp(28px, 4vw, 52px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; color: rgba(255, 255, 255, 0.6); align-items: center; }
.foot-social { display: flex; gap: 10px; }
.foot-social a { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; transition: background .2s ease; }
.foot-social a:hover { background: rgba(255, 255, 255, 0.12); }
footer :focus-visible { outline-color: #fff; }
@media (max-width: 1000px) { .foot { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  footer { padding-bottom: 84px; }
  .footer { border-radius: 28px; padding: 28px 22px 22px; }
  .foot { gap: 28px 20px; }
  .foot > div:last-child { grid-column: 1 / -1; }
  .foot nav a, .foot > div:last-child a { padding: 9px 0; }
  .foot-brand .btn { width: 100%; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 14px; }
}