@property --ak-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --ak-tint {
  syntax: '<color>';
  inherits: true;
  initial-value: #7A5CFF;
}

:root {
  --ak-paper: #FFFFFF;
  --ak-mist: #F5F5F7;
  --ak-ink: #1D1D1F;
  --ak-ink-2: #6E6E73;
  --ak-ink-3: #86868B;
  --ak-line: #D2D2D7;
  --ak-night: #000000;

  --ak-cyan: #00C2FF;
  --ak-violet: #7A5CFF;
  --ak-pink: #FF4FA0;
  --ak-amber: #FFB23F;
  --ak-mint: #3FE0B0;
  --ak-holo: conic-gradient(from var(--ak-a), #F28AB8, #9D86F5, #4C63E0, #FFAA6B, #F28AB8);
  --ak-bubble: linear-gradient(90deg, #6159F1, #8E59E6 55%, #B754DC);

  --ak-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Segoe UI', sans-serif;
  --ak-track: -0.022em;
  --ak-lh-lead: 1.5;
  --ak-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.ak-page,
.ak-home {
  font-family: var(--ak-font);
  color: var(--ak-ink);
  -webkit-font-smoothing: antialiased;
}

.ak-page { background: var(--ak-paper); line-height: 1.6; }

.ak-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

.ak-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ak-ink);
}
.ak-name svg { width: 20px; height: 20px; }

.ak-page .ak-h1,
.ak-page .ak-h2,
.ak-home .ak-h2 {
  font-family: var(--ak-font);
  font-weight: 700;
  letter-spacing: var(--ak-track);
  text-wrap: balance;
}
.ak-h1 { font-size: clamp(46px, min(7.4vw, 10.5vh), 100px); line-height: 1.04; }
.ak-h2 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.08; }

.ak-lead {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: var(--ak-lh-lead);
  color: var(--ak-ink-2);
  font-weight: 500;
  max-width: 34em;
  text-wrap: pretty;
}
:lang(ja) .ak-lead,
:lang(ja) .ak-step p,
:lang(ja) .ak-topic-body,
:lang(ja) .ak-proof p,
:lang(ja) .ak-topic-q { word-break: auto-phrase; }

.ak-store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--ak-ink);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.2s var(--ak-ease), background 0.2s;
}
.ak-store svg { width: 18px; height: 18px; fill: currentColor; }
.ak-store:hover { background: #000000; transform: scale(1.03); }

.ak-link {
  color: #0066CC;
  font-size: 17px;
  font-weight: 500;
}
.ak-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.ak-page a:focus-visible,
.ak-page button:focus-visible,
.ak-home a:focus-visible,
.ak-home button:focus-visible {
  outline: 3px solid #0071E3;
  outline-offset: 3px;
  border-radius: 12px;
}


.ak-bar {
  position: relative;
  isolation: isolate;
  width: min(640px, 100%);
  margin: 0 auto;
  border-radius: 999px;
  padding: 1.5px;
}
.ak-bar::before,
.ak-bar::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  background: var(--ak-holo);
  animation: ak-spin 7s linear infinite;
}
.ak-bar::before { inset: 0; z-index: -1; }
.ak-bar::after {
  inset: -4px;
  z-index: -2;
  filter: blur(20px);
  opacity: 0.45;
  transition: opacity 0.5s, filter 0.5s, inset 0.5s;
}
.ak-bar.is-thinking::before,
.ak-bar.is-thinking::after { animation-duration: 1.6s; }
.ak-bar.is-thinking::after { opacity: 0.95; filter: blur(28px); inset: -10px; }

.ak-bar-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px 10px 22px;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.96);
  text-align: left;
}
.ak-spark { flex: none; width: 22px; height: 22px; }
.ak-bar-text {
  flex: 1;
  min-width: 0;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  color: var(--ak-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.25s, filter 0.25s;
}
.ak-bar-text.is-clearing { opacity: 0; filter: blur(4px); }
.ak-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.2em;
  border-radius: 1px;
  background: var(--ak-violet);
  animation: ak-blink 1.1s steps(1) infinite;
}
.ak-bar.is-typing .ak-caret { animation: none; }
.ak-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ak-bubble);
  color: #FFFFFF;
  transition: transform 0.3s var(--ak-ease), opacity 0.3s;
}
.ak-send svg { width: 18px; height: 18px; }
.ak-bar.is-typing .ak-send { opacity: 0.35; }
.ak-bar.is-sending .ak-send { transform: scale(0.86); }

.ak-ask { position: relative; }
.ak-bar:focus-within::after { opacity: 0.8; }
.ak-field {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.ak-input {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  letter-spacing: inherit;
  color: var(--ak-ink);
  caret-color: var(--ak-violet);
  outline: none;
  opacity: 0;
}
.ak-input::placeholder { color: var(--ak-ink-3); opacity: 1; }
.ak-bar.is-live .ak-input { opacity: 1; }
.ak-bar.is-live .ak-bar-text { visibility: hidden; }
button.ak-send {
  padding: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ak-send:hover { transform: scale(1.06); }
.ak-bar.is-sending .ak-send:hover { transform: scale(0.86); }
.ak-page .ak-send:focus-visible,
.ak-home .ak-send:focus-visible { border-radius: 50%; }
.ak-ask-note {
  position: absolute;
  z-index: 2;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ak-ink-2);
  text-align: center;
  animation: ak-fade-in 0.4s var(--ak-ease);
}
.ak-ask-note a { margin-left: 0.3em; color: #0066CC; font-weight: 500; }
.ak-ask-note a:hover { text-decoration: underline; text-underline-offset: 3px; }


.ak-phone {
  --pw: 320px;
  position: relative;
  width: var(--pw);
  flex: none;
  padding: calc(var(--pw) * 0.026);
  border-radius: calc(var(--pw) * 0.176);
  background: #000000;
  box-shadow:
    inset 0 0 0 1.5px #3A3A3C,
    0 0 0 1px #C7C7CC,
    0 50px 90px -40px rgb(29 29 31 / 0.45),
    0 24px 40px -24px rgb(29 29 31 / 0.3);
}
.ak-screen {
  position: relative;
  aspect-ratio: 1260 / 2736;
  border-radius: calc(var(--pw) * 0.152);
  overflow: hidden;
  background: #F2F2F7;
  transform: translateZ(0);
}
.ak-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  filter: blur(12px) saturate(1.3);
  transform: scale(1.04);
  transition: opacity 0.55s var(--ak-ease), filter 0.7s var(--ak-ease), transform 0.8s var(--ak-ease);
}
.ak-shot.is-on { opacity: 1; filter: none; transform: none; }
.ak-sheen {
  position: absolute;
  inset: -10% -60%;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 38%,
    rgb(0 194 255 / 0.32) 45%,
    rgb(122 92 255 / 0.3) 50%,
    rgb(255 79 160 / 0.3) 55%,
    rgb(255 178 63 / 0.28) 60%,
    transparent 67%);
  mix-blend-mode: screen;
  opacity: 0;
}
.is-swap .ak-sheen { animation: ak-sheen 1.15s var(--ak-ease); }


.ak-demo { position: relative; }
.ak-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 56px;
  transition: --ak-tint 1s var(--ak-ease);
}
.ak-bloom {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -6%;
  width: min(1000px, 150vw);
  aspect-ratio: 1.25;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 42%, color-mix(in srgb, var(--ak-tint) 42%, transparent), transparent 72%),
    radial-gradient(closest-side at 30% 58%, rgb(0 194 255 / 0.16), transparent 70%),
    radial-gradient(closest-side at 72% 60%, rgb(255 79 160 / 0.16), transparent 70%);
  filter: blur(30px);
}
.ak-stage .ak-phone { z-index: 1; }

.ak-tilt {
  transform: perspective(1400px) rotateX(calc(var(--ry, 0) * -5deg)) rotateY(calc(var(--rx, 0) * 7deg));
  transition: transform 0.6s var(--ak-ease);
}
.ak-tilt .ak-sheen-follow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at calc(50% + var(--rx, 0) * 40%) calc(40% + var(--ry, 0) * 40%), rgb(255 255 255 / 0.22), transparent 45%);
  mix-blend-mode: soft-light;
}


.ak-page nav { background: rgb(255 255 255 / 0.8); border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.ak-page .nav-links a.btn-appstore { border-radius: 999px; }

.ak-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 0;
  text-align: center;
}
.ak-hero .ak-name { margin-bottom: 20px; }
.ak-hero .ak-lead { margin: 26px auto 0; }
.ak-hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 32px 0 52px;
}
.ak-hero .ak-phone { --pw: clamp(272px, 27vw, 340px); }
.ak-hero .ak-stage { margin-top: 44px; height: calc(clamp(272px, 27vw, 340px) * 1.72); overflow: visible; }
.ak-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  z-index: 2;
  background: linear-gradient(rgb(255 255 255 / 0), var(--ak-paper) 85%);
  pointer-events: none;
}


.ak-sec { padding: 140px 0; overflow-x: clip; }
.ak-sec--mist { background: var(--ak-mist); }
.ak-sec-head { max-width: 760px; }
.ak-sec-head .ak-lead { margin-top: 22px; }
.ak-sec-head--center { margin: 0 auto; text-align: center; }
.ak-sec-head--center .ak-lead { margin-left: auto; margin-right: auto; }

.ak-topics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 72px;
  align-items: start;
  margin-top: 72px;
}
.ak-topic-list { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.ak-topic {
  --t: #0A84FF;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 16px;
  width: 100%;
  padding: 18px 22px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.35s var(--ak-ease), box-shadow 0.35s var(--ak-ease);
}
.ak-topic:hover { background: rgb(255 255 255 / 0.6); }
.ak-topic[aria-pressed='true'] {
  background: var(--ak-paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--t) 22%, transparent), 0 18px 40px -24px color-mix(in srgb, var(--t) 60%, transparent);
}
.ak-topic-icon {
  grid-row: span 3;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--t);
}
.ak-topic-label { font-size: 21px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; }
.ak-topic-q { margin-top: 2px; font-size: 17px; color: var(--ak-ink-2); line-height: 1.45; }
.ak-topic-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ak-ease);
}
.ak-topic-body > span {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ak-ink);
}
.ak-topic[aria-pressed='true'] .ak-topic-body { grid-template-rows: 1fr; }
.ak-topic[aria-pressed='true'] .ak-topic-body > span { padding-top: 10px; }
.ak-topic-shot { display: none; }
.ak-topics-phone { position: sticky; top: 96px; }
.ak-topics-phone .ak-phone { --pw: 330px; }
.ak-topics-phone .ak-stage { margin-top: 0; }

.ak-today-track { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 96px; margin-top: 40px; }
.ak-today-pin { position: sticky; top: calc(50vh - 330px); height: max-content; padding-top: 24px; }
.ak-today-pin .ak-phone { --pw: 304px; }
.ak-today-caption { display: none; }
.ak-feed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ak-feed-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  will-change: transform;
}
.ak-feed-status,
.ak-feed-bottom { position: absolute; left: 0; width: 100%; height: auto; z-index: 1; }
.ak-feed-status { top: 0; opacity: 0; transition: opacity 0.3s; }
.ak-feed.is-scrolled .ak-feed-status { opacity: 1; }
.ak-feed-bottom { bottom: 0; }
.ak-steps { list-style: none; padding: 30vh 0 34vh; }
.ak-step {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 440px;
  opacity: 0.28;
  transition: opacity 0.5s var(--ak-ease);
}
.ak-step.is-active { opacity: 1; }
.ak-step h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.ak-step p { margin-top: 12px; font-size: 19px; line-height: 1.6; color: var(--ak-ink-2); }

.ak-thread-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 96px;
  align-items: center;
}
.ak-thread-grid .ak-phone { --pw: 304px; }
.ak-thread-grid .ak-stage { margin-top: 0; }
.ak-followups { list-style: none; margin-top: 44px; display: flex; flex-direction: column; gap: 18px; }
.ak-followup { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ak-bubble {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 20px;
  background: var(--ak-bubble);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.ak-followup span:last-child { font-size: 17px; color: var(--ak-ink-2); }

.ak-siri {
  background: var(--ak-night);
  color: #F5F5F7;
  overflow: hidden;
}
.ak-siri .ak-lead { color: #A1A1A6; }
.ak-siri-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 96px;
  align-items: center;
}
.ak-phrases { list-style: none; margin-top: 48px; display: flex; flex-direction: column; gap: 14px; }
.ak-phrases li {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #F5F5F7;
}
:lang(ja) .ak-phrases li,
:lang(zh) .ak-phrases li { text-indent: -0.5em; }
.ak-siri-note { margin-top: 40px; font-size: 16px; color: #86868B; max-width: 30em; }
.ak-siri-device { position: relative; }
.ak-siri-device .ak-phone {
  --pw: 300px;
  box-shadow: inset 0 0 0 1.5px #3A3A3C, 0 0 0 1px #2C2C2E, 0 60px 120px -40px rgb(122 92 255 / 0.35);
}
.ak-siri-screen {
  position: relative;
  aspect-ratio: 1260 / 2736;
  border-radius: calc(var(--pw) * 0.152);
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 20% 10%, #2B2F77 0%, transparent 60%),
    radial-gradient(120% 80% at 90% 90%, #5B1E5F 0%, transparent 60%),
    linear-gradient(160deg, #141633, #0A0A14 60%, #1A0F24);
}
.ak-siri-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 5px;
  background: var(--ak-holo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(5px);
  animation: ak-spin 5s linear infinite;
  pointer-events: none;
}
.ak-siri-time {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  text-align: center;
  color: rgb(255 255 255 / 0.82);
}
.ak-siri-time b { display: block; font-size: calc(var(--pw) * 0.24); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.ak-siri-time span { font-size: calc(var(--pw) * 0.05); font-weight: 500; }
.ak-snippet {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 34%;
  padding: 14px 14px 8px;
  border-radius: calc(var(--pw) * 0.08);
  background: rgb(246 246 248 / 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  color: var(--ak-ink);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.6);
}
.ak-snippet-app { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--ak-ink-2); }
.ak-snippet-app img { width: 18px; height: 18px; border-radius: 5px; }
.ak-snippet-title { margin: 8px 2px 6px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ak-snippet-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-top: 0.5px solid rgb(60 60 67 / 0.2);
}
.ak-snippet-row img { width: 30px; height: auto; border-radius: 2px; }
.ak-snippet-row b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-snippet-row small { font-size: 11px; color: var(--ak-ink-2); }
.ak-snippet-row em { font-style: normal; font-size: 14px; font-weight: 600; }
.ak-heard {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9%;
  text-align: center;
  font-size: calc(var(--pw) * 0.058);
  font-weight: 600;
  line-height: 1.35;
  color: #FFFFFF;
}
.ak-heard::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--ak-holo);
  filter: blur(1px);
  animation: ak-spin 3s linear infinite;
  box-shadow: 0 0 24px rgb(122 92 255 / 0.6);
}

.ak-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 72px;
}
.ak-proof { padding-top: 26px; position: relative; }
.ak-proof::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--ak-p, var(--ak-violet));
}
.ak-proof h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3; }
.ak-proof p { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--ak-ink-2); }

.ak-end { padding: 150px 0 160px; text-align: center; background: var(--ak-mist); }
.ak-end .ak-lead { margin: 22px auto 40px; }
.ak-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ak-store--web { background: transparent; color: var(--ak-ink); --ring-w: 1.5px; --ring-c: var(--ak-ink); }
.ak-store--web svg { fill: none; }
.ak-store--web:hover { background: var(--ak-ink); color: #FFFFFF; }

.ak-page footer { border-top: 1px solid var(--ak-line); background: var(--ak-paper); }


.ak-home {
  position: relative;
  overflow: hidden;
  padding: 120px 0 0;
  text-align: center;
  background: var(--ak-paper);
}
.ak-home .ak-name { margin-bottom: 18px; }
.ak-home .ak-lead { margin: 22px auto 0; }
.ak-home .ak-demo { margin-top: 48px; }
.ak-home .ak-stage {
  gap: 36px;
  align-items: flex-start;
  height: 560px;
  overflow: hidden;
  padding-top: 8px;
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}
.ak-home .ak-phone { --pw: 300px; }
.ak-home .ak-phone--side { --pw: 262px; margin-top: 64px; opacity: 0.96; }
.ak-home-more {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 4px 0 96px;
}


@keyframes ak-spin { to { --ak-a: 360deg; } }
@keyframes ak-blink { 50% { opacity: 0; } }
@keyframes ak-fade-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ak-sheen {
  0% { opacity: 0; transform: translateX(-45%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}

@media (prefers-reduced-motion: reduce) {
  .ak-bar::before,
  .ak-bar::after,
  .ak-siri-screen::after,
  .ak-heard::before,
  .ak-caret { animation: none; }
  .ak-shot { transition: opacity 0.2s; filter: none; transform: none; }
  .is-swap .ak-sheen { animation: none; }
  .ak-tilt { transform: none; }
  .ak-step { opacity: 1; }
  .ak-topic-body { transition: none; }
}


@media (max-width: 980px) {
  .ak-home .ak-phone--side { display: none; }
  .ak-today-track,
  .ak-thread-grid,
  .ak-siri-grid { gap: 56px; }
}

@media (max-width: 820px) {
  .ak-sec { padding: 96px 0; }
  .ak-wrap { padding: 0 20px; }
  .ak-hero { padding-top: 64px; }
  .ak-hero-actions { margin-bottom: 40px; }

  .ak-topics-grid { display: block; margin-top: 40px; }
  .ak-topics-phone { display: none; }
  .ak-topic-list {
    flex-direction: row;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -20px;
    padding: 8px 20px 24px;
    scrollbar-width: none;
  }
  .ak-topic-list::-webkit-scrollbar { display: none; }
  .ak-topic-item {
    flex: none;
    width: min(78vw, 320px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 22px;
    border-radius: 24px;
    background: var(--ak-paper);
  }
  .ak-topic,
  .ak-topic[aria-pressed='true'],
  .ak-topic:hover {
    background: transparent;
    box-shadow: none;
    cursor: default;
  }
  .ak-topic-body { grid-template-rows: 1fr; }
  .ak-topic-body > span { padding-top: 10px; }
  .ak-topic-shot {
    display: block;
    margin: 6px auto 0;
  }
  .ak-topic-shot.ak-phone { --pw: min(60vw, 224px); }

  .ak-today-track { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .ak-today-pin { position: relative; top: auto; height: 210svh; padding-top: 0; }
  .ak-today-sticky {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .ak-today-pin .ak-phone { --pw: min(62vw, 250px, calc((100svh - 240px) * 0.45)); }
  .ak-today-caption {
    display: block;
    max-width: 320px;
    min-height: 5.4em;
    text-align: center;
    transition: opacity 0.2s;
  }
  .ak-today-caption.is-fading { opacity: 0; }
  .ak-today-caption b { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; }
  .ak-today-caption span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--ak-ink-2); }
  .ak-steps {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ak-thread-grid { grid-template-columns: 1fr; }
  .ak-thread-grid .ak-stage { order: 2; }
  .ak-thread-grid .ak-phone { --pw: min(72vw, 280px); }
  .ak-followups { gap: 20px; }
  .ak-followup { flex-direction: column; align-items: flex-start; gap: 8px; }

  .ak-siri-grid { grid-template-columns: 1fr; }
  .ak-siri-device { display: flex; justify-content: center; }
  .ak-siri-device .ak-phone { --pw: min(72vw, 280px); }

  .ak-proof-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }

  .ak-end { padding: 104px 0 112px; }

  .ak-home { padding-top: 88px; }
  .ak-home .ak-stage { height: 440px; }
  .ak-home .ak-phone { --pw: min(70vw, 260px); }
}

@media (max-width: 420px) {
  .ak-bar-in { min-height: 56px; padding: 8px 8px 8px 16px; gap: 10px; }
  .ak-spark { width: 19px; height: 19px; }
  .ak-send { width: 34px; height: 34px; }
  .ak-followup { gap: 10px; }
}