/* AIRadioHost: "Start a station" page.
   Tokens and component rules are copied from the landing page's style sheet so that
   this page looks like the same product. Nothing is loaded from another folder or
   from the internet. */
:root {
  color-scheme: light;
  --black: #000;
  --ink: #1d1d1f;
  --text: #424245;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --soft: #f5f5f7;
  --accent: #0071b3;
  --sky: #5cb8f2;
  --gap: 12px;
  --edge: clamp(24px, 8vw, 160px);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #fff; }
body { margin: 0; color: var(--text); font: 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
[id] { scroll-margin-top: 12px; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 5; padding: 10px 18px; border-radius: 980px; background: #fff; color: var(--ink); font-size: 15px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Top of page */
.top { position: relative; z-index: 2; background: var(--black); color: #f5f5f7; }
.top header { display: flex; align-items: center; justify-content: space-between; padding: 26px var(--edge); }
.brand img { width: 24px; height: 24px; border-radius: 6px; margin-right: 9px; vertical-align: -6px; }
.brand { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; text-decoration: none; }
nav { display: flex; align-items: center; gap: 28px; }
nav a { color: #e5e5ea; font-size: 14px; text-decoration: none; }
nav a:hover, nav a[aria-current] { color: #fff; }

/* Buttons and links */
.btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 980px; padding: 12px 24px; font: 500 17px var(--sans); text-decoration: none; cursor: pointer; transition: background .2s; }
.btn:hover { background: #0a85cc; }
/* The payment button before the box is ticked and while a request runs. It stays in the tab order (aria-disabled). */
.btn:disabled, .btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { background: #2c2c2e; color: #d1d1d6; cursor: default; }
.btn.quiet { background: var(--soft); color: var(--ink); }
.btn.quiet:hover { background: #e8e8ed; }
.btn.large { padding: 15px 34px; font-size: 19px; }
.link { color: var(--sky); font-size: 17px; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.dark-link { color: var(--accent); }

/* Opening */
.hero { position: relative; overflow: hidden; overflow: clip; background: var(--black); color: #a1a1a6; padding: clamp(48px, 7vw, 104px) var(--edge) clamp(64px, 8vw, 120px); }
.arcs { position: absolute; right: -6%; bottom: -18%; width: min(50vw, 900px); height: auto; pointer-events: none; }
.copy { position: relative; z-index: 1; max-width: 760px; }
.copy h1 { color: #f5f5f7; font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: -0.04em; max-width: 8.4em; }
.copy .lead { margin-top: 26px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: #c7c7cc; max-width: 30em; text-wrap: pretty; }
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.copy .fine { margin-top: 26px; font-size: 16px; line-height: 1.45; color: #c7c7cc; max-width: 36em; }

/* Containers */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 1680px; margin: 0 auto; padding: var(--gap); }
.tile { grid-column: span 2; background: var(--soft); border-radius: 28px; padding: clamp(40px, 7vw, 112px) clamp(24px, 7vw, 120px); display: flex; flex-direction: column; justify-content: center; }
.duo { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.duo .tile { grid-column: span 1; }
.tile.dark { background: var(--black); color: #a1a1a6; }
.tile.dark h2, .tile.dark h3 { color: #f5f5f7; }
.tile.center { text-align: center; align-items: center; }
.tile h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.05; }
.half h2.big { font-size: clamp(32px, 3.5vw, 56px); line-height: 1.08; }
.tile .body { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; margin-top: 20px; max-width: 34em; }
.note { color: var(--muted); font-size: 14px; margin-top: 28px; max-width: 54em; }
.dark .note { color: #86868b; }
.more { margin-top: 28px; }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 60px; }
.head .body { margin: 0; max-width: 26em; font-size: 18px; }
.plain { list-style: none; margin: 0; padding: 0; font-size: 19px; line-height: 1.35; }
.plain li { padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .16); color: #d1d1d6; }
.plain li:first-child { border-top: 0; padding-top: 0; }
.plain li:last-child { padding-bottom: 0; }

/* How it works */
.steps { list-style: none; margin: clamp(36px, 4.4vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.steps li { border-top: 1px solid var(--line); padding-top: 22px; }
.steps small { display: block; color: var(--accent); font: 14px var(--mono); margin-bottom: 14px; }
.steps b { display: block; color: var(--ink); font-size: clamp(24px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 10px; }
.steps span { display: block; font-size: 17px; line-height: 1.42; max-width: 24em; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 var(--gap); margin-top: clamp(36px, 4.4vw, 64px); }
.plan { grid-row: span 5; display: grid; grid-template-rows: subgrid; align-content: start; background: #fff; border-radius: 22px; padding: clamp(26px, 2.5vw, 36px); }
.plan h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.plan .for { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.4; }
.price { margin-top: 28px; }
.price b { display: block; color: var(--ink); font-size: clamp(32px, 2.9vw, 42px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; }
.price .setup { color: var(--ink); font-size: 17px; font-weight: 500; white-space: nowrap; }
.plan ul { list-style: none; margin: 26px 0 0; padding: 0; }
.plan li { padding: 11px 0; font-size: 16px; line-height: 1.38; border-top: 1px solid #e5e5ea; text-wrap: pretty; }
.plan .act { margin-top: 26px; align-self: end; }
.plan.featured { background: var(--black); color: #d1d1d6; }
.plan.featured h3, .plan.featured .price b { color: #f5f5f7; }
.plan.featured .for, .plan.featured .price span { color: #a1a1a6; }
.plan.featured li { border-color: rgba(255, 255, 255, .16); }

/* The two conditions */
.conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: clamp(36px, 4.4vw, 64px); }
.conditions > div { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 24px; }
.conditions .n { display: block; color: var(--sky); font: 14px var(--mono); }
.conditions h3 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; margin-top: 14px; max-width: 13em; }
.conditions p { margin-top: 16px; color: #d1d1d6; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.42; max-width: 26em; }

/* Questions */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: clamp(36px, 4.4vw, 64px); }
.qa > div { border-top: 1px solid var(--line); padding: 24px 0 30px; }
.qa h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.qa p { margin-top: 8px; font-size: 17px; line-height: 1.45; max-width: 30em; text-wrap: pretty; }

/* Messages */
.status { margin-top: 16px; color: #f5f5f7; font-size: 16px; line-height: 1.45; }
.status:empty { margin: 0; }   /* never display: none: the live region must exist before the first message */
.status.err { color: #ff8a80; }
.status a { color: var(--sky); text-underline-offset: 3px; }
.center .note { margin-left: auto; margin-right: auto; max-width: 44em; }
.center .body { text-wrap: balance; }

/* Draft placeholders: every fact that is still missing is in square brackets and marked like this. */
.todo { padding: 1px 5px; border-radius: 5px; background: #ffe9a8; color: #4a3800; }

/* Foot */
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 1680px; margin: 0 auto; padding: 24px 40px 40px; color: var(--muted); font-size: 13px; }
footer a { margin-left: 20px; text-decoration: none; }
footer span a:first-child { margin-left: 0; }
footer a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.top :focus-visible, .hero :focus-visible, .dark :focus-visible, .featured :focus-visible { outline-color: var(--sky); }

@media (max-width: 1180px) { .arcs { display: none; } }
@media (max-width: 1100px) {
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--gap); }
  .plan { grid-row: auto; display: block; }
}
@media (max-width: 860px) {
  :root { --gap: 8px; }
  body { font-size: 16px; }
  .top header { padding: 18px 20px; }
  nav { gap: 18px; }
  .hero { padding: 40px 22px 56px; }
  .tile { border-radius: 22px; padding: 56px 22px; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .conditions { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .btn.large { width: 100%; }
  footer { padding: 18px 20px 32px; }
}
@media (max-width: 360px) { .price b { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- The one-click page: studio panel, waveform recordings, comparison, details, enquiry ---- */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
nav .nav-cta { padding: 8px 16px; border-radius: 980px; background: #f5f5f7; color: #1d1d1f; font-weight: 500; }
nav .nav-cta:hover { background: #fff; color: #000; }
html[data-mode="private"] .only-hosted, html[data-mode="hosted"] .only-private, html[data-mode="draft"] .only-private { display: none; }
.vat:empty, .addr:empty, .mail:empty { display: none; }

/* Opening: copy on the left, the studio on the right */
.hero { padding-bottom: clamp(56px, 7vw, 104px); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 88px); align-items: center; max-width: 1560px; }
.hero-grid .copy { max-width: none; }
.hero-grid .copy h1 { font-size: clamp(40px, 5vw, 76px); max-width: 9.5em; }
.jump { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.jump .link { font-size: 16px; }
.hero .arcs { right: -10%; bottom: -30%; opacity: .55; }

.studio { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.4vw, 34px); border: 1px solid #2c2c2e; border-radius: 26px; background: linear-gradient(180deg, rgba(28, 28, 30, .94), rgba(12, 12, 13, .96)); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06); color: #c7c7cc; }
.studio-head { display: flex; align-items: center; gap: 10px; }
.studio-head h2 { color: #f5f5f7; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.lamp { width: 9px; height: 9px; border-radius: 50%; background: #48484a; transition: background .2s, box-shadow .2s; }
.studio.busy .lamp { background: #ff9f0a; box-shadow: 0 0 0 4px rgba(255, 159, 10, .18); }
.studio.live .lamp { background: #ff453a; box-shadow: 0 0 0 4px rgba(255, 69, 58, .2); animation: lamp 1.6s infinite; }
@keyframes lamp { 50% { box-shadow: 0 0 0 8px rgba(255, 69, 58, 0); } }
.studio-state { margin-left: auto; color: #8e8e93; font: 13px var(--mono); }
.studio.live .studio-state { color: #ff6961; }
.sf { display: flex; flex-direction: column; gap: 7px; }
.sf.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sf.two > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.studio label { color: #a1a1a6; font-size: 13px; letter-spacing: .01em; }
.studio input[type="text"], .studio select { width: 100%; margin: 0; border: 1px solid #3a3a3c; border-radius: 14px; background-color: #0b0b0c; color: #f5f5f7; font: 17px/1.3 var(--sans); padding: 13px 16px; transition: border-color .15s, box-shadow .15s; }
.studio input[type="text"] { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; padding: 14px 16px; }
.studio input::placeholder { color: #48484a; }
.studio select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("/assets/chevron.svg"); background-repeat: no-repeat; background-position: right 14px center; text-overflow: ellipsis; }
.studio input[type="text"]:hover, .studio select:hover { border-color: #636366; }
.studio input[type="text"]:focus-visible, .studio select:focus-visible { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(92, 184, 242, .25); }
.studio [aria-invalid="true"] { border-color: #ff6961; }
.studio-wave { display: block; width: 100%; height: 64px; border-radius: 14px; background: #0b0b0c; }
.studio-line { min-height: 4.4em; color: #c7c7cc; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.studio-line.said { color: #f5f5f7; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.4; }
.studio-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.studio-acts .btn { padding: 14px 18px; text-align: center; font-size: 17px; }
.studio .btn.quiet { background: #2c2c2e; color: #f5f5f7; }
.studio .btn.quiet:hover { background: #3a3a3c; }
.studio.heard #st-hear { background: #2c2c2e; color: #f5f5f7; }
.studio.heard #st-hear:hover { background: #3a3a3c; }
.studio.heard #st-begin { background: var(--accent); color: #fff; }
.studio.heard #st-begin:hover { background: #0a85cc; }
.studio .btn[aria-disabled="true"], .studio .btn[aria-disabled="true"]:hover { background: #1c1c1e; color: #636366; cursor: default; }
.studio .status { margin: 0; min-height: 0; color: #f5f5f7; font-size: 15px; }
.studio .status.err { color: #ff8a80; }
.studio-note { color: #a1a1a6; font-size: 14px; line-height: 1.45; }
.studio-terms { color: #8e8e93; font-size: 13px; line-height: 1.45; }
.studio-terms a, .studio .status a { color: var(--sky); text-underline-offset: 3px; }

/* Recordings: the waveform rows of the home page */
.airlist { margin-top: clamp(32px, 4vw, 56px); }
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px minmax(120px, 280px) 44px; gap: 0 18px; align-items: center; padding: 16px 0; border-top: 1px solid #e5e5ea; cursor: pointer; }
.rlist li:first-child { border-top: 0; }
.rp { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: #d1d1d6; color: #fff; cursor: pointer; transition: background .15s, scale .3s var(--ease); }
.rp .i-pause, .rlist li.on .rp .i-play { display: none; }
.rlist li.on .rp .i-pause { display: block; }
.rlist li:hover .rp { background: #8e8e93; scale: 1.06; }
.rlist li.on .rp, .rlist li.open .rp { background: var(--accent); }
.rt { min-width: 0; }
.rt b, .rt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt b { color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.rt span { color: var(--muted); font-size: 14px; margin-top: 2px; }
.rlist li.open .rt b { color: var(--accent); }
.rtech { color: var(--muted); font-size: 14px; white-space: nowrap; }
.rd { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rw { display: block; width: 100%; height: 34px; }
.rlist li.open .rw { cursor: pointer; }
.rwhy { display: none; grid-column: 2 / -1; margin-top: 10px; }
.rlist li.open .rwhy { display: block; }
.rwhy p { margin: 0; color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; max-width: 40em; text-wrap: pretty; }
.rwhy small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 46em; }

/* Points (the AI team, venues) */
.points { list-style: none; margin: clamp(36px, 4.4vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
.points.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.points li { border-top: 1px solid var(--line); padding-top: 22px; }
.points small { display: block; color: var(--accent); font: 14px var(--mono); margin-bottom: 14px; }
.points b { display: block; color: var(--ink); font-size: clamp(21px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.18; margin-bottom: 10px; text-wrap: balance; }
.points span { display: block; font-size: 17px; line-height: 1.42; max-width: 26em; text-wrap: pretty; }
.more .btn { margin-top: 12px; }
.tile .body.first { margin-top: 0; }

/* Steps on a dark tile */
.tile.dark .steps li { border-color: rgba(255, 255, 255, .22); }
.tile.dark .steps small { color: var(--sky); }
.tile.dark .steps b { color: #f5f5f7; }
.tile.dark .steps span { color: #d1d1d6; }

/* The plans compared */
.matrix-wrap { margin-top: clamp(28px, 3.4vw, 48px); overflow-x: auto; border-radius: 22px; background: #fff; }
.matrix { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; line-height: 1.35; }
.matrix caption { caption-side: top; text-align: left; padding: 26px clamp(20px, 2.4vw, 34px) 6px; color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.matrix th, .matrix td { padding: 15px clamp(14px, 1.6vw, 24px); text-align: left; vertical-align: top; border-top: 1px solid #e5e5ea; }
.matrix th:first-child, .matrix td:first-child { padding-left: clamp(20px, 2.4vw, 34px); }
.matrix thead th { border-top: 0; color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.matrix tbody th { width: 30%; color: var(--ink); font-weight: 500; }
.matrix td { color: var(--text); width: 23.3%; }
.matrix td.no { color: #8e8e93; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { color: var(--ink); font-weight: 600; padding-bottom: 24px; }

/* The details */
.spec { margin: clamp(32px, 4vw, 56px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.spec > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; border-top: 1px solid var(--line); padding: 22px 0 26px; }
.spec dt { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.spec dd { margin: 0; font-size: 17px; line-height: 1.45; text-wrap: pretty; }

/* Figures */
.figures { margin: 0; display: grid; gap: 30px; }
.figures dt { color: var(--ink); font-size: clamp(44px, 5vw, 76px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.figures dd { margin: 10px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; max-width: 22em; }
.tile.dark .link { color: var(--sky); }

/* Enquiry form */
.enq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; margin-top: clamp(32px, 4vw, 56px); max-width: 980px; }
.enq .f { display: flex; flex-direction: column; gap: 8px; }
.enq .wide { grid-column: span 2; }
.enq label { color: var(--ink); font-size: 16px; font-weight: 500; }
.enq label span { color: var(--muted); font-weight: 400; }
.enq input, .enq select, .enq textarea { width: 100%; margin: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: 17px/1.4 var(--sans); }
.enq select { -webkit-appearance: none; appearance: none; padding-right: 44px; background: #fff url("/assets/chevron.svg") right 16px center no-repeat; }
.enq textarea { resize: vertical; min-height: 150px; }
.enq input:hover, .enq select:hover, .enq textarea:hover { border-color: #a1a1a6; }
.enq [aria-invalid="true"] { border-color: #b3261e; }
.enq .help { color: var(--muted); font-size: 14px; }
.enq .send { align-items: flex-start; gap: 0; }
.enq .status { color: var(--ink); }
.enq .status.err { color: #b3261e; }
.enq .status a { color: var(--accent); }
/* The field that people do not see: off the page, never display: none (some form fillers skip those). */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note a { color: inherit; text-underline-offset: 3px; }
.center .more { margin-top: 34px; }

@media (max-width: 1280px) { .points.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid .copy h1 { max-width: 12em; }
  /* On a narrow screen the studio follows the opening sentence at once. */
  .hero .copy .fine, .jump { display: none; }
  .studio { max-width: 640px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .rlist li { grid-template-columns: 44px minmax(0, 1fr) minmax(90px, 200px) 44px; }
  .rtech { display: none; }
}
@media (max-width: 860px) {
  .points, .points.four { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .enq { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .enq .wide { grid-column: auto; }
  .rlist li { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 0 14px; }
  .rw { display: none; }
  .rt b, .rt span { white-space: normal; }
  .rt b { font-size: 17px; }
  .spec > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .studio { border-radius: 22px; }
  .studio-acts .btn { padding: 14px 10px; }
}
@media (max-width: 440px) {
  nav a { display: none; }
  nav a.nav-cta { display: inline-block; }
  .sf.two { grid-template-columns: minmax(0, 1fr); }
}