/* Landing palette: Quikk's sky, coral, lavender, mint and amber category tints.
   Marketing surfaces carry the color; native product chrome stays neutral. */
:root {
  --paper: #fffaf6;
  --ink: #242334;
  --muted: #645e70;
  --line: #e8dfe5;
  --dark: #17223e;
  --sky: #b3d4f5;
  --coral: #ffb3a8;
  --lavender: #cec4f0;
  --mint: #b8e6c8;
  --amber: #ffd89e;
  --accent: #235dd8;
  --accent-deep: #174ab8;
  --focus: #2871ec;
}
::selection {
  background: var(--sky);
  color: #17223e;
}
.button-primary {
  color: #fff;
  background: linear-gradient(180deg, #3475ee, var(--accent));
  box-shadow:
    0 6px 20px #154fc22e,
    inset 0 1px 0 #ffffff40;
  border: 1px solid #ffffff26;
}
.button-primary:hover {
  background: linear-gradient(180deg, #2d6ee5, var(--accent-deep));
  box-shadow:
    0 9px 26px #154fc24d,
    inset 0 1px 0 #ffffff40;
}
.nav-shell {
  background: #181b28ed;
  border-color: #ffffff33;
}
.hero-landscape {
  height: 980px;
  object-position: center top;
  mask-image: linear-gradient(#000 65%, transparent 100%);
}
.hero-wash {
  background: linear-gradient(
    180deg,
    #111c3012 0%,
    #111c3000 30%,
    #111c3020 48%,
    #17223ee6 86%,
    var(--dark) 100%
  );
}
.hero h1 {
  text-shadow: 0 3px 22px #1d2c5638;
}
.hero h1 span {
  color: #ffe6d8;
}
.hero-copy > p {
  color: #fff;
  max-width: 750px;
  margin-inline: auto;
  text-shadow: 0 1px 10px #17223e66;
}
.hero .hero-eyebrow {
  color: #fff0e6;
}
.status-dot {
  background: var(--amber);
  box-shadow: 0 0 12px #ffd89e99;
}
.hero .trial-note,
.hero-platform-link {
  color: #f4ecff;
}
.trial-benefit svg {
  color: var(--amber);
}
.showcase-tabs {
  background: #171e33e6;
  border-color: #e0d6ff4d;
}
.showcase-tabs button {
  color: #d7ddef;
}
.showcase-tabs [data-tab="capture"] {
  --tab-color: var(--sky);
}
.showcase-tabs [data-tab="record"] {
  --tab-color: var(--coral);
}
.showcase-tabs [data-tab="write"] {
  --tab-color: var(--lavender);
}
.showcase-tabs [data-tab="dictation"] {
  --tab-color: var(--mint);
}
.showcase-tabs [data-tab="ask"] {
  --tab-color: var(--amber);
}
.showcase-tabs button svg {
  color: var(--tab-color);
}
.showcase-tabs button[aria-selected="true"] {
  background: var(--tab-color);
  color: #202537;
}
.showcase-tabs button[aria-selected="true"] svg {
  color: inherit;
}
.demo-panels {
  outline-color: #c6d5ff1a;
  box-shadow: 0 28px 80px #08112c80;
}
.capture-canvas {
  background: radial-gradient(
    ellipse at 25% 10%,
    #d0bdef,
    #91bce9 70%,
    #7badd8
  );
}
.write-panel {
  background: radial-gradient(ellipse at 15% 10%, #e6d2fc, #b5b5eb);
}
.ask-panel {
  background: radial-gradient(
    ellipse at 80% 10%,
    #e3b898,
    #9b8ed1 60%,
    #7269ac
  );
}
.dictation-panel {
  background: radial-gradient(ellipse at 70% 20%, #dbf2cb, #9fd8c5);
}
.flow-strip {
  background: var(--dark);
  color: #dce4fa;
  border-color: #c8d2f026;
}
.flow-strip > span {
  color: #acbada;
}
.flow-strip strong {
  color: #fff;
}
.flow-strip > div:nth-of-type(1) svg {
  color: var(--sky);
}
.flow-strip > div:nth-of-type(2) svg {
  color: var(--lavender);
}
.flow-strip > div:nth-of-type(3) svg {
  color: var(--mint);
}
.eyebrow {
  color: #765361;
}
h2 span,
.iphone-page h2 span {
  color: #5771ac;
}
.section-heading p,
.feature-copy p {
  color: var(--muted);
}
.feature-card,
.iphone-feature {
  border-color: #ffffffc9;
  box-shadow: 0 4px 18px #46344d08;
}
.capture-feature {
  background: linear-gradient(145deg, #e6f2ff, var(--sky));
}
.recording-feature {
  background: linear-gradient(145deg, #fff0dc, #ffc5b4);
}
.writing-feature {
  background: linear-gradient(145deg, #f0e7ff, var(--lavender));
}
.feature-tag {
  color: #655577;
}
.mini-capture {
  background: #86b6e0;
}
.mini-recording {
  background: #ec9f89;
  border-color: #d78370;
}
.mini-annotation {
  color: #236047;
  border-color: #348566;
}
.writing-sample {
  border-color: #b6a8db;
}
.dictation-feature {
  background: radial-gradient(ellipse at 90% 100%, #2d706c, #243d50 65%);
  border-color: #3c646c;
}
.dictation-feature .feature-tag,
.dictation-feature .feature-copy p {
  color: #bcdedb;
}
.dictation-orbit {
  border-color: #b8e6c826;
}
.dictation-feature .waveform i {
  background: var(--mint);
}
.sharing-section {
  background: linear-gradient(120deg, #e3f1e7, #eef4df 52%, #f8e7d9);
  border-color: #d8e7d7;
}
.sharing-copy > p,
.workflow-steps p {
  color: #586a60;
}
.workflow-steps li > span {
  background: #c6e6d0;
  border-color: #a7ceb4;
  color: #285c46;
}
.typography-thumb {
  background: #bdcbf3;
  color: #334574;
}
.notes-thumb {
  background: #ffdebc;
}
.shapes-thumb {
  background: #355d51;
  color: #dcf3be;
}
.native-mark {
  box-shadow:
    0 18px 42px #9481c32e,
    inset 0 0 0 4px #fff8;
}
.native-details svg {
  color: var(--accent);
}
.faq-list details[open] summary {
  color: var(--accent);
}
.closing-landscape {
  background:
    linear-gradient(#24366055, #17223e99),
    url("/assets/quikk-silk.webp") center 64% / cover;
}
.closing-content h2 span {
  color: #ffe1c8;
}
.closing-content p,
.closing-content .trial-note {
  color: #f1f0ff;
}
.site-footer {
  background: #151c30;
}

/* A warmer iPhone chapter, with the same category colors as the walkthrough. */
.iphone-teaser {
  background: linear-gradient(115deg, #ffe6d1, #f8d2ca 48%, #d9caf1);
  border-color: #edc8cc;
}
.iphone-teaser-copy .eyebrow {
  color: #884852;
}
.iphone-teaser-copy h2 span {
  color: #725398;
}
.iphone-teaser-copy > p,
.iphone-teaser-points {
  color: #6d5269;
}
.iphone-teaser-points svg {
  color: #754690;
}
.iphone-teaser-art::before {
  background: #c6b6ee70;
  border-color: #b292d26e;
}
.iphone-teaser-sticker {
  background: #f2e5ff;
  color: #694286;
  border-color: #d8b8ec;
}
.iphone-page {
  background: #fffbf8;
  background-image:
    radial-gradient(ellipse 900px 770px at 100% 300px, #cec4f0b3, transparent),
    radial-gradient(ellipse 900px 800px at 0% 150px, #ffb3a870, transparent);
  background-repeat: no-repeat;
  color: var(--ink);
}
.iphone-hero::before {
  background: none;
}
.iphone-hero-copy h1 > span {
  color: #7754a3;
}
.iphone-hero-copy > .eyebrow {
  color: #8b4b60;
}
.iphone-hero-copy > p {
  color: #675769;
}
.iphone-hero-note,
.iphone-hero-actions .text-link {
  color: #705d78;
}
.tiny-mark {
  background: #f5e7ff;
  border-color: #d6bbe8;
}
.phone-orbit {
  background: #cec4f040;
  border-color: #c4a4df8c;
}
.orbit-b {
  background: transparent;
  border-color: #c4a4df55;
}
.word-before {
  background: #ffe8c9;
  border-color: #efcba1;
  color: #865733;
}
.word-after {
  background: #e0f3e5;
  border-color: #b9d9c0;
  color: #346149;
}
.iphone-intro-strip {
  background: #f3e9ed;
  border-color: #e8d7e1;
  color: #735c76;
}
.iphone-intro-strip > span,
.iphone-intro-strip strong {
  color: #745c78;
}
.iphone-intro-strip svg {
  color: #8964a2;
}
.keyboard-story-controls {
  background: #fffaf4ed;
  box-shadow: 0 8px 28px #715a8421;
}
.keyboard-scenarios {
  background: #f0e8ed;
  border-color: #e1d1df;
}
.keyboard-scenarios button {
  color: #665569;
}
[data-phone-scenario="rewrite"] {
  --scenario-color: var(--lavender);
}
[data-phone-scenario="fix"] {
  --scenario-color: var(--mint);
}
[data-phone-scenario="translate"] {
  --scenario-color: var(--sky);
}
[data-phone-scenario="ask"] {
  --scenario-color: var(--amber);
}
[data-phone-scenario="voice"] {
  --scenario-color: var(--coral);
}
.keyboard-scenarios button[aria-pressed="true"] {
  background: var(--scenario-color);
  color: #282238;
  box-shadow: 0 2px 7px #402a5e12;
}
.keyboard-walkthrough {
  --story-color: var(--lavender);
  --story-ink: #67458e;
}
.keyboard-walkthrough:has([data-phone-scenario="fix"][aria-pressed="true"]) {
  --story-color: var(--mint);
  --story-ink: #34664a;
}
.keyboard-walkthrough:has(
  [data-phone-scenario="translate"][aria-pressed="true"]
) {
  --story-color: var(--sky);
  --story-ink: #365a8c;
}
.keyboard-walkthrough:has([data-phone-scenario="ask"][aria-pressed="true"]) {
  --story-color: var(--amber);
  --story-ink: #83552c;
}
.keyboard-walkthrough:has([data-phone-scenario="voice"][aria-pressed="true"]) {
  --story-color: var(--coral);
  --story-ink: #8b4d4e;
}
.keyboard-walkthrough-phone::before {
  background: radial-gradient(ellipse, var(--story-color), transparent 70%);
}
.keyboard-walkthrough-copy .eyebrow,
.keyboard-live-caption {
  color: var(--story-ink);
}
.keyboard-steps li[aria-current="step"] > span {
  background: var(--story-color);
  color: var(--story-ink);
  border-color: var(--story-color);
}
.keyboard-walkthrough-copy > p,
.keyboard-steps p,
.keyboard-walkthrough-copy .keyboard-story-outcome {
  color: #6c6075;
}
.iphone-features .section-heading p,
.iphone-feature > p {
  color: #655b70;
}
.iphone-feature .feature-tag {
  color: #69547b;
}
.tone-feature {
  background: linear-gradient(140deg, #efe4ff, #d6c5f1);
}
.tone-playground {
  background: #fffbff;
  border-color: #cbb7e2;
}
.tone-buttons button[aria-pressed="true"] {
  background: #6a4a92;
  border-color: #6a4a92;
}
.grammar-feature {
  background: linear-gradient(140deg, #e9f6e4, #b8e6c8);
  border-color: #cce5ce;
}
.grammar-feature .feature-tag,
.grammar-feature > p {
  color: #476954;
}
.grammar-paper {
  background: #fffefa;
  border-color: #c9ddc9;
}
.grammar-paper del {
  color: #a66359;
  text-decoration-color: #c77b70;
}
.grammar-paper ins {
  color: #287650;
}
.grammar-paper > div {
  color: #4a7255;
}
.translation-feature {
  background: linear-gradient(140deg, #e7f2ff, #b3d4f5);
  border-color: #bfd7ee;
}
.translation-bubbles > div:last-child {
  background: #5789c2;
  border-color: #5789c2;
  color: #fff;
}
.translation-direction {
  background: #f0f7ff;
  border-color: #a9c9e7;
  color: #3e75ac;
}
.ask-feature {
  background: linear-gradient(140deg, #454477, #263651);
  border-color: #51527e;
}
.ask-feature .feature-tag,
.ask-feature > p {
  color: #d4d2ed;
}
.ask-mini {
  background: #ffffff0d;
  border-color: #c8c0ec40;
}
.ask-mini-question {
  background: #ffffff14;
  color: #f3e5d4;
}
.ask-mini-answer p {
  color: #ffe5bb;
}
.ask-mini > span {
  color: #d1cee6;
  border-color: #ffffff26;
}
.iphone-voice {
  background: radial-gradient(ellipse at 80% 60%, #514476, #222c48 75%);
}
.voice-layout h2 span {
  color: var(--coral);
}
.voice-layout .eyebrow,
.voice-layout > div > p {
  color: #d0c9e2;
}
.voice-quote {
  color: #ffe1c5;
}
.voice-keyboard-card {
  background: linear-gradient(120deg, #585075, #3b3e60);
  border-color: #b4a6d066;
}
.voice-waveform i {
  background: var(--coral);
}
.voice-waveform i:nth-child(3n) {
  background: var(--amber);
}
.iphone-setup {
  background: #edf3f8;
  border-color: #dce6ed;
}
.setup-steps > li > span {
  background: var(--sky);
  color: #344d76;
  border-color: #c0d5e9;
}
.iphone-mac-link {
  background: linear-gradient(120deg, #fae9dc, #e8def7);
  border-color: #e8d9de;
}

@media (max-width: 760px) {
  .iphone-page {
    background-size: auto 1200px;
  }
  .hero-wash {
    background: linear-gradient(
      180deg,
      #17234655,
      #26335a38 30%,
      #17223ed9 80%,
      var(--dark)
    );
  }
}