/* Northline D: the My Northline app section (job R1021101435). Uses tesla.css colours, fonts and the same 4 text sizes.
   The phone is drawn at a real phone's size (390 x 844 screen) with 16 px text, then scaled down as a whole,
   so it reads like a real app. Corners: phones 52, cards 16. */

/* ---------- The full screen: words on the light page, the phone in front of the house ---------- */
.app-panel { --k: .78; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; min-height: 100svh; background: var(--ink); color: var(--stone); overflow: hidden; }
@media (max-height: 860px) { .app-panel { --k: .7; } }
@media (max-height: 740px) { .app-panel { --k: .6; } }
.app-copy { align-self: center; padding: calc(var(--head-h) + 48px) 64px 64px max(var(--pad), calc((100vw - 1344px) / 2 + var(--pad))); }
.app-copy p { margin-top: 16px; font-size: var(--s3); line-height: 1.45; color: var(--muted); }
.app-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.app-actions .btn { min-width: 200px; }

.app-stage { position: relative; min-height: 640px; overflow: hidden; }
.app-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 78% 70%; transform-origin: 60% 70%; }
/* a soft light veil on the left edge, so the picture meets the page calmly */
.app-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 70%, transparent) 0%, transparent 28%); pointer-events: none; }
.phone-box { position: absolute; z-index: 2; left: calc(42% - 207px * var(--k)); top: calc(50% + var(--head-h) / 2 - 434px * var(--k)); width: calc(414px * var(--k)); height: calc(868px * var(--k)); }

/* ---------- The phone: a dark frame, side keys, the island, a light app screen ---------- */
.phone { position: relative; width: 414px; height: 868px; padding: 12px; border-radius: 52px; background: linear-gradient(145deg, #2B3239, #0B0F13 40%, #1A2026); transform: scale(var(--k)); transform-origin: 0 0;
  box-shadow: inset 0 0 0 1.5px #59626B, inset 0 0 0 5px #0B0F13, 0 50px 90px rgba(11, 17, 23, .38), 0 12px 24px rgba(11, 17, 23, .22); }
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #2E353C; }
.phone::before { left: -3px; top: 168px; height: 64px; box-shadow: 0 84px 0 #2E353C; }
.phone::after { right: -3px; top: 220px; height: 96px; }
.screen, .mini-screen { --stone: #12181E; --muted: #4E5862; --accent: #22709F; --accent-text: #1C5F8A; --line: rgba(18, 24, 30, .12); color: var(--stone); }
.screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: #F3F5F7; color: var(--stone); font-size: var(--s4); line-height: 1.4; }
.sb { position: absolute; z-index: 3; top: 16px; left: 36px; right: 30px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.sb svg { width: 34px; height: 12px; }
.island { position: absolute; z-index: 3; top: 11px; left: 50%; width: 120px; height: 34px; margin-left: -60px; border-radius: 20px; background: #000; }
.homebar { position: absolute; z-index: 3; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #151B21; }
.a-tabs { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 84px; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; padding-top: 14px; background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line); color: #8A949D; }
.a-tabs svg { width: 28px; height: 28px; }
.a-tabs span { transition: color .4s; }
.a-tabs .on { color: var(--accent); }
.app-screen { position: absolute; inset: 0; padding: 64px 20px 0; }
.app-screen:not(.is-on) { opacity: 0; visibility: hidden; }

/* App parts, shared by the big phone and the small screens */
.a-hi { color: var(--muted); }
.a-title { font: 700 var(--s2)/1.15 var(--display); letter-spacing: -.02em; margin-bottom: 16px; }
.a-card { padding: 16px 20px; border-radius: 16px; background: #fff; }
.a-card + .a-card { margin-top: 12px; }
.a-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.a-label svg { width: 18px; height: 18px; }
.a-big { font: 700 var(--s3)/1.3 var(--display); letter-spacing: -.01em; }
.a-sub { color: var(--muted); }
.a-visit { background: linear-gradient(155deg, #2C83B8, #1C5F8A); color: #fff; }
.a-visit .a-label { color: #D5E8F4; }
.a-visit .a-big { margin-top: 4px; }
.a-live, .a-ok { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #4CD483; box-shadow: 0 0 0 4px rgba(76, 212, 131, .25); }
.a-live .dot { animation: dot 1.6s ease-in-out infinite; }
@keyframes dot { 50% { box-shadow: 0 0 0 7px rgba(76, 212, 131, 0); } }
.a-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.a-track span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.a-track span.on { background: #fff; }
.a-comfort { display: flex; justify-content: space-between; align-items: flex-start; }
.a-temp { font: 600 var(--s2)/1.1 var(--display); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.a-ok { margin-top: 0; font-weight: 600; color: #1E7A47; }
.a-acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 20px -6px 0; text-align: center; }
.act { display: grid; justify-items: center; gap: 6px; font-weight: 500; letter-spacing: -.01em; }
.act i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #fff; color: var(--accent); }
.act svg { width: 26px; height: 26px; }
.a-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; }
.a-note p { color: var(--muted); }
.a-note b { display: block; color: var(--stone); }
.a-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 var(--s4)/1 var(--display); }

.a-map { position: relative; height: 250px; border-radius: 16px; background: #DDE4EA; overflow: hidden; margin-bottom: 12px; }
.a-map > svg { width: 100%; height: 100%; }
.a-van { position: absolute; left: calc(210 / 350 * 100% - 22px); top: calc(120 / 250 * 100% - 22px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(34, 112, 159, .2); }
.a-van svg { width: 24px; height: 24px; }
.a-steps { margin-top: 16px; }
.a-steps li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--muted); }
.a-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #C3CBD2; color: #fff; }
.a-steps i svg { width: 16px; height: 16px; }
.a-steps .done { color: var(--stone); }
.a-steps .done i { background: var(--accent); border-color: var(--accent); }
.a-steps .now { color: var(--stone); font-weight: 600; }
.a-steps .now i { border-color: var(--accent); box-shadow: inset 0 0 0 5px #fff; background: var(--accent); }

.a-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.a-chat { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.bub { max-width: 80%; padding: 10px 14px; border-radius: 18px; background: #fff; }
.bub.them { align-self: flex-start; border-bottom-left-radius: 6px; }
.bub.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.a-input { position: absolute; left: 16px; right: 16px; bottom: 100px; display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 8px 0 20px; border-radius: 24px; background: #fff; color: var(--muted); }
.a-input svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--accent); color: #fff; }

.a-rows { margin-top: 12px; }
.a-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.a-rows li:first-child { border-top: 0; }
.a-rows span { color: var(--muted); }
.a-blue { color: var(--accent-text); }
.a-shop { margin-top: 0; }
.a-shop span { color: var(--stone); font-weight: 500; }
.a-add { min-width: 64px; padding: 4px 14px; border-radius: 16px; background: #E3EEF5; color: var(--accent-text); text-align: center; }
.a-bar { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; text-align: center; }

/* ---------- How the App Works: 6 calm cards, each with a small screen ---------- */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--gap); }
.mini { position: relative; height: 280px; border-radius: 16px; background: var(--ink-2); overflow: hidden; }
.mini-phone { position: absolute; left: 50%; top: 40px; width: 320px; max-width: calc(100% - 40px); height: 300px; transform: translateX(-50%); padding: 10px 10px 0; border-radius: 52px 52px 0 0; background: linear-gradient(145deg, #2B3239, #0B0F13 40%, #1A2026); }
.mini-screen { height: 100%; padding: 32px 18px 0; border-radius: 42px 42px 0 0; background: #F3F5F7; font-size: var(--s4); line-height: 1.4; }
.feat h3 { margin-top: 24px; }
.feat > p { margin-top: 4px; color: var(--muted); max-width: 36ch; }
.js:not(.still) .feat.rise:nth-child(3n+2) { transition-delay: .12s; }
.js:not(.still) .feat.rise:nth-child(3n) { transition-delay: .24s; }
.crm-line { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; font-size: var(--s3); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  .app-panel { grid-template-columns: 1fr; min-height: 0; }
  .app-copy { padding: calc(var(--head-h) + 64px) var(--pad) 48px; text-align: center; }
  .app-actions { justify-content: center; }
  .app-stage { height: 760px; }
  .app-panel { --k: .74; }
  .phone-box { left: calc(50% - 207px * var(--k)); top: calc(50% - 434px * var(--k)); }
  .app-stage::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 70%, transparent) 0%, transparent 24%); }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-panel { --k: .66; }
  .app-copy { padding: calc(var(--head-h) + 48px) var(--pad) 32px; }
  .app-actions { flex-direction: column; gap: 12px; margin-top: 32px; }
  .app-actions .btn { width: 100%; }
  .app-stage { height: 640px; min-height: 0; }
  .app-stage img { object-position: 50% 62%; }
  /* the cards slide sideways on a phone, one and a bit in view */
  .feats { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 8px; scroll-padding: 0 var(--pad); -webkit-overflow-scrolling: touch; }
  .feat { flex: 0 0 84%; scroll-snap-align: start; }
  .mini { height: 260px; }
  .mini-phone { width: 300px; max-width: calc(100% - 24px); padding: 8px 8px 0; }
  .mini-screen { padding: 28px 10px 0; }
  .mini .a-card { padding: 14px 14px; }
  .js:not(.still) .feat.rise { transition-delay: 0s; }
  .crm-line { margin-top: 48px; }
}

/* Less motion: the home screen only, nothing moves */
.still .a-live .dot { animation: none; }

/* 23 Oct studio pass: the app's features as tabs beside the phone, one open at a time, a thin line fills while it shows */
.app-tabs { list-style: none; padding: 0; margin: 40px 0 0; max-width: 480px; border-bottom: 1px solid var(--line); }
.app-tab { position: relative; border-top: 1px solid var(--line); }
.app-tab::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--accent-text); }
.app-tab.is-on::before { width: 100%; }
.app-tab.is-on.timing::before { animation: tab-fill var(--tab-ms, 5600ms) linear both; }
@keyframes tab-fill { from { width: 0; } to { width: 100%; } }
.app-tab button { display: flex; align-items: center; width: 100%; height: 48px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--muted); font: 600 var(--s3)/1.3 var(--display); text-align: left; cursor: pointer; }
.app-tab p { display: none; padding: 0 0 16px; line-height: 1.5; color: var(--muted); }
.app-tab.is-on button { color: var(--stone); }
.app-tab.is-on p { display: block; }
.app-tab button:hover { color: var(--stone); }

/* ---------- 23 Oct: the phone is a WORKING app (the owner: "working on the screen itself") ---------- */
.screen button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.screen :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-screen { overflow-y: auto; padding-bottom: 112px; scrollbar-width: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.app-screen::-webkit-scrollbar { display: none; }
.app-screen:not(.is-on) { transform: translateX(14px); }
.a-tap { display: block; width: 100%; }
.a-card .a-big, .a-card .a-sub { display: block; }
.a-tap.a-comfort { display: flex; }
.a-note > span:last-child { color: var(--muted); }
.act { color: var(--stone); justify-items: center; }
.act:hover i { background: #E8F1F7; }
.a-back { display: inline-flex; align-items: center; gap: 2px; height: 44px; margin: -8px 0 0 -8px; padding: 0 8px; color: var(--accent); font-weight: 600; }
.a-back svg { width: 22px; height: 22px; transform: rotate(90deg); }
.a-back-icon { width: 44px; margin: 0; justify-content: center; }
.a-q { margin: 20px 0 10px; font-weight: 600; }
.a-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.a-chips button { height: 44px; padding: 0 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 24, 30, .12); font-weight: 500; transition: background-color .2s, color .2s; }
.a-chips button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; }
.a-chips-wide button { width: 100%; }
.a-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 20px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 600; transition: opacity .2s; }
.screen .a-btn { text-align: center; }
.a-btn:disabled { opacity: .35; cursor: default; }
.a-btn.a-line { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(18, 24, 30, .12); }
.a-photo { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; margin-top: 16px; padding: 0 16px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #C3CBD2; color: var(--accent); font-weight: 600; }
.a-photo svg { width: 24px; height: 24px; }
.a-photo.added { box-shadow: inset 0 0 0 1.5px var(--accent); background: #E8F1F7; }
.a-done { display: grid; justify-items: center; gap: 8px; padding-top: 48px; text-align: center; }
.a-done .a-steps { justify-self: stretch; text-align: left; }
.a-done .a-btn { margin-top: 24px; }
.a-tick { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--accent); color: #fff; }
.a-tick svg { width: 32px; height: 32px; }
.a-shop small { display: block; color: var(--muted); font-size: var(--s4); }
.a-shop span { color: var(--stone); font-weight: 500; }
.a-add { height: 40px; font-weight: 600; transition: background-color .2s, color .2s; }
.screen .a-add { text-align: center; }
.a-add[aria-pressed="true"] { background: var(--accent); color: #fff; }
.a-booked { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding: 16px 20px; border-radius: 16px; background: #fff; box-shadow: inset 4px 0 0 var(--accent); }
.a-booked .a-sub { display: block; }
.a-route { stroke-dasharray: 400; stroke-dashoffset: 400; }
.app-screen.is-on .a-route { animation: a-route 1.6s .2s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes a-route { to { stroke-dashoffset: 0; } }
/* messages: the list scrolls, the box stays at the bottom */
.app-screen[data-screen="chat"] { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 100px; }
.a-chat { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; }
.a-input { position: static; flex: none; margin-top: 8px; gap: 8px; box-shadow: inset 0 0 0 1px rgba(18, 24, 30, .1); }
.a-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--stone); font: inherit; outline: none; }
.a-input input::placeholder { color: var(--muted); }
.a-input button { display: grid; place-items: center; }
.bub.typing { color: var(--muted); }
.a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the app's own tab bar */
.a-tabs { padding-top: 10px; }
.a-tabs button { position: relative; display: grid; place-items: center; width: 64px; height: 48px; color: #8C96A0; transition: color .3s; }
.a-tabs button.on { color: var(--accent); }
.a-badge { position: absolute; top: 2px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #E0A15E; color: #12181E; font: 600 var(--s4)/22px var(--text); text-align: center; }
/* full screen: the phone at its real size, everything else dimmed */
.app-full-btn { margin-top: 32px; }
.app-demo { margin-top: 12px; color: var(--muted); }
.app-close { display: none; }
.phone-box.full { position: fixed; z-index: 90; inset: 0; left: 0; top: 0; width: auto; height: auto; display: grid; place-items: center; background: rgba(6, 10, 14, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.phone-box.full .phone { transform: scale(var(--kf, 1)); transform-origin: 50% 50%; }
.phone-box.full .app-close { display: inline-flex; align-items: center; position: absolute; z-index: 2; top: 16px; right: 16px; height: 44px; padding: 0 20px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(11, 17, 23, .6); color: #fff; font: 600 var(--s4)/1 var(--text); cursor: pointer; }
@media (max-width: 760px) {
  .app-tabs { display: none; }
  .app-full-btn { width: 100%; background: var(--accent); border-color: var(--accent); color: #fff; }
}

/* 23 Oct (design judge): a dark app on the page colour, one soft glow behind the phone, no picture */
.app-stage { background: none; }
.app-stage::after { content: none; }
.app-glow { position: absolute; inset: 0; background: radial-gradient(40% 45% at 50% 55%, rgba(34, 112, 159, .22), rgba(34, 112, 159, 0) 70%); pointer-events: none; }
.phone-box { left: calc(50% - 207px * var(--k)); }
#app-title { font-size: var(--s2); }
.app-copy .app-tab p { font-size: var(--s4); margin-top: 0; padding-bottom: 20px; max-width: 40ch; }
.app-tab button { color: rgba(242, 241, 238, .45); }
.screen { --stone: #F2F1EE; --muted: #A9B3BB; --accent: #22709F; --accent-text: #9CC4E2; --line: rgba(242, 241, 238, .12); background: #0B1117; color: var(--stone); }
.screen .a-card, .screen .a-map, .screen .act i, .screen .bub.them, .screen .a-input, .screen .a-chips button, .screen .a-btn.a-line, .screen .a-booked { background: #18222C; }
.screen .a-visit { background: linear-gradient(155deg, #2C83B8, #1C5F8A); }
.screen .act i { color: var(--accent-text); }
.screen .act:hover i { background: #1F2C38; }
.screen .a-map g { stroke: rgba(255, 255, 255, .08); }
.screen .a-route { stroke: #4D9BD0; }
.screen .a-chips button, .screen .a-btn.a-line, .screen .a-input { box-shadow: inset 0 0 0 1px var(--line); }
.screen .a-chips button[aria-pressed="true"] { background: var(--accent); box-shadow: none; }
.screen .a-btn.a-line, .screen .a-back, .screen .a-blue, .screen .a-photo { color: var(--accent-text); }
.screen .a-photo { box-shadow: inset 0 0 0 1.5px #3A4652; }
.screen .a-photo.added { box-shadow: inset 0 0 0 1.5px var(--accent-text); background: rgba(34, 112, 159, .18); }
.screen .a-add { background: rgba(34, 112, 159, .24); color: var(--accent-text); }
.screen .a-add[aria-pressed="true"] { background: var(--accent); color: #fff; }
.screen .a-ok { color: #8CC35C; }
.screen .a-steps i { border-color: #3A4652; }
.screen .a-steps .now i { box-shadow: inset 0 0 0 5px #0B1117; }
.screen .a-tabs { background: rgba(11, 17, 23, .94); box-shadow: 0 -1px 0 var(--line); }
.screen .a-tabs button { color: #6B7781; }
.screen .a-tabs button.on { color: var(--accent-text); }
.screen .homebar { background: rgba(242, 241, 238, .6); }
.phone { box-shadow: inset 0 0 0 1.5px #59626B, inset 0 0 0 5px #0B0F13, 0 50px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(242, 241, 238, .06); }
@media (max-width: 1100px) { .app-copy { text-align: left; } }
@media (max-width: 760px) { .app-copy { padding-top: 0; } }
/* the app's main button keeps its blue (the .screen button reset was stronger) */
.screen .a-btn { background: var(--accent); color: #fff; }
.screen .a-btn.a-line { background: #18222C; color: var(--accent-text); }
.phone-box.full { padding-top: 56px; }

/* ---------- judges round 2 ---------- */
/* full screen: the phone always fits, centred under the Close button */
.phone-box.full .phone { position: absolute; left: 50%; top: calc(50% + 28px); transform: translate(-50%, -50%) scale(var(--kf, 1)); transform-origin: 50% 50%; }
/* every tap target inside the app stays 44 px or more, even when the phone is shown smaller */
.screen .a-chips button { height: 52px; padding: 0 20px; border-radius: 26px; }
.screen .a-add { height: 48px; min-width: 76px; }
.screen .a-back { height: 52px; }
.screen .a-btn { height: 56px; }
.screen .a-tabs button { height: 56px; }
.screen .a-photo { height: 56px; }
@media (max-width: 760px) {
  /* the six parts as a row of buttons above the phone; the small phone opens the full one */
  .app-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 24px calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 4px; border: 0; scrollbar-width: none; }
  .app-tabs::-webkit-scrollbar { display: none; }
  .app-tab { flex: none; border: 0; }
  .app-tab::before { content: none; }
  .app-tab p { display: none !important; }
  .app-tab button { height: 44px; margin: 0; padding: 0 16px; border-radius: 22px; border: 1px solid var(--line-strong); font: 500 var(--s4)/1 var(--text); color: var(--stone); white-space: nowrap; }
  .app-tab.is-on button { background: var(--stone); color: var(--ink); border-color: var(--stone); }
  .phone-box:not(.full) { cursor: pointer; }
}
@media (min-width: 1101px) { .app-panel { padding-bottom: 72px; } }

/* ---------- judges round 3 ---------- */
.screen .a-card { padding: 16px 20px; }
.screen .a-note { display: flex; }
.screen .a-tap.a-comfort { display: flex; }
.screen .a-add { height: 52px; }
.app-screen { padding-bottom: 136px; }
.app-tab button { color: rgba(242, 241, 238, .64); }
.app-pause { display: flex; }
.app-full-btn { display: flex; margin-top: 16px; }
.app-copy { padding-top: 96px; }
/* computer: the phone sits in the visible space between the header and the Ask strip */
@media (min-width: 1101px) {
  .app-stage { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - 72px); }
  .phone-box:not(.full) { position: relative; left: auto; top: auto; }
}
@media (max-width: 760px) {
  .app-panel { grid-template-columns: minmax(0, 1fr); }
  .app-copy { min-width: 0; }
  .app-full-btn { width: 100%; }
}
@media (min-width: 1101px) {
  .app-stage { align-items: flex-start; }
  .phone-box:not(.full) { position: sticky; top: 104px; }
}

/* ---------- judges round 4: the phone bigger and next to the list; controls under the list (computer) or under the phone (phone) ---------- */
.app-panel { grid-template-areas: "copy stage" "after stage"; grid-template-rows: auto 1fr; }
.app-copy { grid-area: copy; padding-bottom: 24px; }
.app-stage { grid-area: stage; }
.app-after { grid-area: after; display: grid; gap: 12px; justify-items: start; align-content: start;
  padding: 0 64px 96px max(var(--pad), calc((100vw - 1344px) / 2 + var(--pad))); }
.app-demo { font-size: var(--s4); margin: 0; }
.app-after .app-full-btn, .app-after .app-pause { margin: 0; }
@media (min-width: 1101px) {
  .app-stage { justify-content: flex-start; padding-left: 48px; }
  .phone-box:not(.full) { top: 96px; }
}
@media (max-width: 1100px) {
  .app-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "after"; }
  .app-after { padding: 24px var(--pad) 64px; }
  .app-after .app-full-btn { width: 100%; }
}
@media (min-width: 1024px) and (max-width: 1100px) {
  .app-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "copy stage" "after stage"; --k: .66; }
}
/* the message box: one round focus ring */
.screen .a-input input:focus-visible { outline: none; }
.screen .a-input:focus-within { box-shadow: 0 0 0 2px var(--accent-text); }
.screen .a-done:focus { outline: none; }

/* ---------- judges round 5 ---------- */
/* the list: the same treatment as What We Do (20 px names, the open one white and 600, one 16 px line under it) */
@media (min-width: 761px) {
  .app-tab button { font: 500 var(--s3)/1.3 var(--display); color: var(--muted); }
  .app-tab.is-on button { font-weight: 600; color: var(--stone); }
  .app-tab button:hover { color: var(--stone); }
}
/* "Open the App Full Screen" is an outline button on every size */
.btn.app-full-btn { background: transparent; border-color: var(--line-strong); color: var(--stone); }
.btn.app-full-btn:hover { border-color: var(--stone); }
/* inside the app: room under every screen, so the last button is never under the app's tab bar */
.app-screen { padding-bottom: 168px; }
.app-screen[data-screen="chat"] { padding-bottom: 100px; }
.screen .a-map { height: 200px; }
.screen [data-screen="track"] .a-steps { margin-top: 8px; }
.screen [data-screen="track"] .a-steps li { padding: 6px 0; }
.screen [data-screen="track"] .a-btn { margin-top: 12px; }

/* computer (1024 and wider): the phone about 600 px tall, centred in the right column between the header and the Ask button,
   its glow behind it; the tour, full screen and demo line on one row under the list */
@media (min-width: 1024px) {
  .app-panel { overflow: clip; min-height: 0; padding-bottom: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "copy stage" "after stage"; grid-template-rows: auto 1fr; }
  .app-stage { display: flex; align-items: flex-start; justify-content: center; min-height: 0; height: auto; padding: 0; overflow: visible; }
  .app-glow { display: none; }
  .phone-box:not(.full) { position: sticky; left: auto; top: calc(var(--head-h) + (100vh - var(--head-h) - 64px - 868px * var(--k)) / 2); }
  .phone-box:not(.full)::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(34, 112, 159, .34), rgba(34, 112, 159, .1) 55%, rgba(34, 112, 159, 0)); }
  .app-copy { padding: var(--section) 48px 32px max(var(--pad), calc((100vw - 1344px) / 2 + var(--pad))); }
  .app-after { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 0 24px var(--section) max(var(--pad), calc((100vw - 1344px) / 2 + var(--pad))); }
  .app-after .app-pause { height: 48px; }
  .app-demo { white-space: nowrap; }
}

/* phone: the full-screen app has no phone frame; the screen fills the window, Close sits on top */
@media (max-width: 760px) {
  .phone-box.full { display: block; padding: 0; background: #0B1117; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .phone-box.full .phone { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; width: auto; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
  .phone-box.full .phone::before, .phone-box.full .phone::after { content: none; }
  .phone-box.full .screen { border-radius: 0; }
  .phone-box.full .sb, .phone-box.full .island, .phone-box.full .homebar { display: none; }
  .phone-box.full .app-screen { padding-top: 16px; }
  .phone-box.full .a-tabs { height: calc(72px + env(safe-area-inset-bottom)); }
  .phone-box.full .app-close { top: 8px; right: 16px; border-radius: 4px; }
  .app-after { padding-bottom: var(--section); }
}

/* ==================== 23 Oct, judges round 6 ==================== */
/* computer (1024 and wider): the words and the list in one 520 px column on the left half of the content box; the phone about 360 px wide
   (app.js keeps it whole between the header and the Ask button), centred in the right half, close to the list;
   the full-screen button alone with the demo line under it */
@media (min-width: 1024px) {
  .app-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; padding: 0 max(var(--pad), calc((100% - 1344px) / 2 + var(--pad))); }
  .app-copy { padding: var(--section) 32px 32px 0; }
  .app-copy > p, .app-tabs { max-width: 520px; }
  .app-after { display: grid; justify-items: start; align-content: start; gap: 12px; padding: 0 32px var(--section) 0; }
  .app-after .app-full-btn { width: auto; }
  .app-demo { white-space: normal; }
  .app-stage { justify-content: center; }
}
/* the tour's pause: a round glass control on the phone's lower right edge, like the hero's video pause */
.phone-box .app-pause { position: absolute; z-index: 3; right: -22px; bottom: 64px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); background: rgba(6, 10, 14, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; }
.phone-box .app-pause:hover { border-color: rgba(255, 255, 255, .6); }
.phone-box .app-pause svg { width: 16px; height: 16px; }
.phone-box .app-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phone-box.full .app-pause { display: none; }

/* ==================== 23 Oct, judges round 7 ==================== */
/* 14. The tour's pause: 16 px under the phone, centred, 44 px, 4 px corners (not on the frame's edge) */
.phone-box .app-pause { right: auto; bottom: auto; left: 50%; top: calc(100% + 16px); transform: translateX(-50%); border-radius: 4px; }
/* the phone and its pause together fit between the header and the Ask button (app.js leaves 60 px under the phone for the pause) */
@media (min-width: 1024px) {
  .phone-box:not(.full) { top: calc(var(--head-h) + (100vh - var(--head-h) - 64px - 868px * var(--k) - 60px) / 2); }
}
/* tablets and phones: the phone near the top of its stage, the pause under it, all inside the stage */
@media (max-width: 1023px) {
  .app-stage { height: calc(868px * var(--k) + 24px + 60px + 8px); min-height: 0; }
  .phone-box { top: 24px; }
}
/* 19. Phone: about 120 px from the end of the Care picture to My Northline */
@media (max-width: 760px) { .app-copy { padding-top: 64px; } }
/* 17. Corners: 4 px for the tabs and the Close button too */
.phone-box.full .app-close { border-radius: 4px; }
@media (max-width: 760px) { .app-tab button { border-radius: 4px; } }
/* 21. Two weights only (400 and 600), the phone's own app too */
.a-title, .a-big, .a-av { font-weight: 600; }
.act, .a-shop span, .screen .a-shop span, .a-chips button, .app-tab button { font-weight: 400; }
@media (min-width: 761px) { .app-tab.is-on button { font-weight: 600; } }

/* ==================== 23 Oct, judges round 8 ==================== */
/* 15. The message box's Send button is a 44 x 44 tap target (the round blue mark inside stays 32 px) */
.screen .a-input button { flex: none; width: 44px; height: 44px; }

/* ==================== 23 Oct, judges round 9 (design 7.5, UX 8) ==================== */
/* 16. Computer (1024 and wider): the phone is larger and its words are about 14.4 px on screen at 1440 x 900 (12.5 before). It is drawn
       as a 396 x 812 phone (a 372 px wide screen, like many real phones) and scaled to fill the room between the header and the Ask
       button, 16 px clear of each (app.js sets --k). The tour's pause moves beside the phone's lower right corner, so it needs no
       room under it. Full screen keeps the 414 x 868 phone. */
@media (min-width: 1024px) {
  .phone-box:not(.full) { width: calc(396px * var(--k)); height: calc(812px * var(--k));
    top: calc(var(--head-h) + 16px + (100vh - var(--head-h) - 64px - 32px - 812px * var(--k)) / 2); }
  .phone-box:not(.full) .phone { width: 396px; height: 812px; }
  .phone-box:not(.full) .app-pause { left: calc(100% + 16px); top: auto; bottom: 0; transform: none; }
  /* the shorter screen keeps each part's main button above the app's tab bar: a shorter map, closer questions, slimmer chips */
  .phone-box:not(.full) .app-screen { padding-left: 16px; padding-right: 16px; }
  .phone-box:not(.full) .screen .a-map { height: 160px; }
  .phone-box:not(.full) .a-acts { margin-left: -10px; margin-right: -10px; }
  .phone-box:not(.full) .a-q { margin: 16px 0 8px; }
  .phone-box:not(.full) .screen .a-chips button { height: 48px; padding: 0 14px; }
  .phone-box:not(.full) .screen .a-btn { margin-top: 16px; }
}
/* 6. The seam under the app (1440 and 1024): 64 px of page under the section; the glow belongs to the stage (not the phone), so it
      fades to the page colour over the stage's last 120 px instead of being cut by the section's edge; a softer phone shadow;
      the pause sits beside the phone inside the stage, so it is never cut off. */
@media (min-width: 1024px) {
  .app-panel { padding-bottom: 64px; }
  .phone-box:not(.full)::before { content: none; }
  .app-stage::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(34, 112, 159, .3), rgba(34, 112, 159, .1) 55%, rgba(34, 112, 159, 0));
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent 100%); }
  .phone { box-shadow: inset 0 0 0 1.5px #59626B, inset 0 0 0 5px #0B0F13, 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(242, 241, 238, .06); }
}

/* ==================== 23 Oct, judges round 10 (design 8, UX 7) ==================== */
/* 7. Computer (1024 and wider): the tour's pause sits centred 24 px under the phone, as on a phone (it was beside the phone's corner).
      app.js leaves 68 px under the phone for it; the phone and its pause are centred together between the header and the Ask button,
      and the phone stops 68 px before the end of its column, so the pause is never cut off. */
@media (min-width: 1024px) {
  .phone-box:not(.full) { top: calc(var(--head-h) + 16px + (100vh - var(--head-h) - 64px - 32px - 68px - 812px * var(--k)) / 2); margin-bottom: 68px; }
  .phone-box:not(.full) .app-pause { left: 50%; top: calc(100% + 24px); bottom: auto; transform: translateX(-50%); }
}

/* ==================== 23 Oct, judges round 11 (design 7, UX 6) ==================== */
/* 14. Phone: the picked part of the app (the row of buttons above the phone) is the card colour with light words and a 2 px light blue
       line under them, not a white fill (blue stays the only filled main button) */
@media (max-width: 760px) {
  .app-tab.is-on button { background: #18222C; border-color: #18222C; color: var(--stone); box-shadow: inset 0 -2px 0 #9CC4E2; }
}
/* 9. One gap between sections: 160 px from the phone's pause (computer) and 96 px from the Care picture's end (phone) */
@media (min-width: 1024px) { .app-panel { padding-bottom: var(--section); } }
@media (max-width: 760px) { .app-copy { padding-top: 75px; } }

/* ==================== 23 Oct, judges round 12 (design 8, UX 7) ==================== */
/* 12. The site tour's step 5 (computer): while the tour runs its bar is the foot of the screen. app.js sizes the phone for the room
       above the bar, and the phone and its pause are centred there, so the pause ends 16 px or more above the bar. */
@media (min-width: 1024px) {
  html.cq-touring .phone-box:not(.full) { top: calc(var(--head-h) + 16px + (100vh - var(--head-h) - 16px - var(--tour-room, 96px) - 68px - 812px * var(--k)) / 2); }
}
/* 17. Phone: the row of app parts fades over 24 px at both ends, so a word is never cut hard at the edge (at rest the fade is over the
       row's 24 px side room only) */
@media (max-width: 760px) {
  .app-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    scroll-padding-left: 24px; scroll-padding-right: 24px; }
}
/* 9. Closing the full-screen app scrolls the small phone and its pause above the bar at the foot of the screen, and the keyboard goes back
      to the control that opened it (app.js) */
/* ==================== 23 Oct, judges round 14 (design 8, UX 7) ==================== */
/* 19. Phone: the small app phone's screen does not scroll (a swipe on it moves the page); a tap still opens it full screen, where it
       scrolls as before */
@media (max-width: 760px) {
  .phone-box:not(.full) .app-screen, .phone-box:not(.full) .a-chat { overflow: hidden; overscroll-behavior: auto; }
  .phone-box:not(.full), .phone-box:not(.full) * { touch-action: pan-y pinch-zoom; }
}