/* ---------------------------------------------------------------------------
   What Did I Agree To? - the site.

   The same tokens the apps use, so a person who has seen one recognises the
   other. Generated pages all pull this single file; there is no per page CSS.

   The rule the whole visual system rests on, and it applies here too: the
   agreement itself is real, and everything around it can have fun. Tape and
   stickers may tilt. A statement never does.
--------------------------------------------------------------------------- */

:root {
  --bg: #FFF9F4;
  --surface: #FFFFFF;
  --surface-2: #FDF4EC;
  --tint: #F3EFFF;
  --text: #25212A;
  --text-2: #716B75;
  --text-3: #A39CA5;
  --line: #E8DFD8;
  --primary: #8067F7;
  --primary-soft: rgba(128, 103, 247, .12);
  --sunshine: #FFD84D;
  --ink: #25212A;
  --sky: #65C7F2;
  --pink: #FF7EB6;
  --mint: #E4F8F0;
  --peach: #FFEEDA;
  --confirmed: #3F78D0;
  --disputed: #E49A27;

  --page: min(1080px, 100% - 44px);
  --column: 660px;
  --radius: 20px;
  --radius-lg: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17131B;
    --surface: #25202A;
    --surface-2: #2C2632;
    --tint: #2A2348;
    --text: #FFF9F4;
    --text-2: #BEB6C1;
    --text-3: #8B8391;
    --line: #3A3342;
    --primary: #9A87FF;
    --primary-soft: rgba(154, 135, 255, .16);
    --mint: #1F4A3B;
    --peach: #4A3520;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 ui-rounded, "SF Pro Rounded", -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* --- layout ------------------------------------------------------------- */

.page { width: var(--page); margin-inline: auto; }
.column { max-width: var(--column); margin-inline: auto; }

section { padding: 76px 0; }
/* Short statement bands carry one sentence and do not need a full section's
   air around them. */
section.tight { padding: 60px 0; }

/* Alternating grounds give a long page a rhythm without any decoration. */
.banded { background: var(--surface-2); }
@media (prefers-color-scheme: dark) { .banded { background: var(--surface-2); } }

/* --- type --------------------------------------------------------------- */

h1 {
  font-size: clamp(32px, 6.4vw, 56px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.06;
  margin: 0 0 16px; text-wrap: balance;
}
h2 {
  font-size: clamp(25px, 3.6vw, 34px);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.14;
  margin: 0 0 14px; text-wrap: balance;
}
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
h4 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--text-2); text-wrap: pretty; }
.quiet { color: var(--text-2); }
.small { font-size: 14px; color: var(--text-3); }

/* The section label: a tiny uppercase word with a grape dot. Enough for the
   eye to find its place down a long page, not so much that the calm the page
   is built on gets spent. */
.label {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 12px;
  display: flex; align-items: center; gap: 9px;
}
.label::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.centred { text-align: center; }
.centred .label { justify-content: center; }

/* The wordmark. The question mark is the brand's one piece of mischief:
   grape, oversized and tilted, because the whole product exists for a question
   nobody can settle. Everything else stays upright. */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-weight: 800; letter-spacing: -.02em; color: var(--text);
  text-decoration: none;
}
.wordmark i {
  color: var(--primary); font-style: normal;
  font-size: 1.22em; line-height: 0;
  display: inline-block; margin-left: .03em;
  transform: rotate(-6deg); transform-origin: 45% 70%;
}

/* --- navigation --------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav-in {
  width: var(--page); margin-inline: auto;
  display: flex; align-items: center; gap: 24px;
  height: 66px;
}
.nav .wordmark { font-size: 18px; margin-right: auto; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 600;
  transition: color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-cta {
  background: var(--primary); color: #fff !important; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 700;
  transition: transform .12s ease, filter .15s ease;
}
.nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* The menu, and where the desktop nav gives up.

   It used to hold on until 720px, which meant the full name, four links and a
   button spent the whole range from about 900 down shoulder to shoulder. The
   name is five words long and is not going to be shortened, so the honest
   answer is to stop pretending there is room a good deal earlier. */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text-2);
  padding: 8px 4px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { color: var(--text); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  min-width: 200px; display: grid; gap: 2px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 18px 40px -20px rgba(37, 33, 42, .35);
}
.menu-panel a {
  color: var(--text); text-decoration: none; font-size: 16px; font-weight: 600;
  padding: 10px 12px; border-radius: 12px;
}
.menu-panel a:hover { background: var(--primary-soft); color: var(--primary); }

@media (max-width: 959px) {
  .nav-links { display: none; }
  .menu { display: block; margin-left: auto; }
  .nav .wordmark { margin-right: 0; }
}
@media (max-width: 460px) {
  .nav-in { height: 58px; gap: 12px; }
  .nav .wordmark { font-size: 16px; }
  .nav-cta { padding: 8px 13px; font-size: 14px; }
}

/* --- hero --------------------------------------------------------------- */

.hero { padding: 80px 0 72px; min-height: 390px; text-align: center; }
/* Once there is room, the hero stops being a centred column and becomes the
   words beside the thing they describe. */
@media (min-width: 880px) {
  .hero { text-align: left; }
  .hero .lede, .hero .said, .hero .badges { margin-inline: 0; justify-content: flex-start; }
  .hero-split { align-items: center; }
  .hero-split .art { justify-items: end; }
  /* The right column is the taller of the two, so centring them left the
     headline's baseline level with the middle of the card rather than with the
     top of it. Not top aligned, which would strand the headline high; lifted
     just enough that the two halves read as a pair. */
  .hero-split .words { transform: translateY(-24px); }
}
.hero .wordmark { font-size: clamp(19px, 4.4vw, 26px); margin-bottom: 20px; }
.hero .lede { max-width: 34ch; margin-inline: auto; font-size: 18px; line-height: 1.6; }

/* The two things people actually say, either side of the creature that has no
   idea which of them is right. */
.said { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.said span {
  font-size: 14px; font-weight: 600; color: var(--text);
  padding: 7px 13px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.said span:first-child { background: color-mix(in srgb, var(--sky) 35%, transparent); transform: rotate(-3deg); }
.said span:last-child  { background: color-mix(in srgb, var(--pink) 35%, transparent); transform: rotate(3deg); }

svg.muddle { width: 156px; height: auto; display: block; margin-inline: auto; }
svg.muddle.sm { width: 84px; }
svg.muddle.lg { width: 168px; }

/* --- the app's own objects, rebuilt for the web ------------------------- */

/* An agreement, exactly as the app draws one. Upright, untilted, no mascot on
   it, because somebody may have written "I'll pick Mum up from hospital". */
.agreement {
  position: relative; width: 100%;
  background: var(--peach);
  border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: 28px 28px 22px;
  max-width: 440px;
}
.agreement.is-mint { background: var(--mint); }
.agreement .statement {
  font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3;
  margin: 0;
  /* Evens the lines out. Left alone, this one broke after "on" and left
     "Tuesday" alone on the second line, which reads as a mistake rather than
     as a sentence somebody typed. */
  text-wrap: balance;
}
.agreement .meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 18px; font-size: 13.5px; color: var(--text-2);
}
/* Tape and stickers may tilt. The agreement may not. */
.agreement .tape {
  position: absolute; left: 50%; top: -9px;
  transform: translateX(-50%) rotate(-2.5deg);
  width: 78px; height: 18px; background: var(--sunshine); opacity: .5; border-radius: 2px;
}
.agreement .sticker {
  position: absolute; right: -10px; top: -13px; transform: rotate(3deg);
  background: var(--disputed); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  padding: 6px 12px; border-radius: 11px;
}
.agreement .sticker.is-agreed { background: var(--confirmed); }
.agreement .emoji {
  position: absolute; left: -10px; top: -12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  display: grid; place-items: center; font-size: 20px;
}

/* The hero's scene: the app's agreement screen, at rest.

   A single composition rather than a stack of parts, so it holds together as
   one object and reads as a screen somebody could be looking at. The width is
   capped tighter than a card on its own would be, because a statement that
   wraps into an awkward two words on the second line looks like a mistake. */
.scene {
  display: grid; justify-items: center; gap: 26px;
  width: min(460px, 100%);
}
.scene .agreement { max-width: none; }
.scene .line { width: min(345px, 100%); }
.scene svg.muddle { width: 120px; margin: 4px 0 0; }
.scene-caption {
  margin: -12px 0 0; font-size: 15px; font-weight: 600; color: var(--text-2);
  text-align: center;
}

/* The signature object: the line both people end up holding. */
.line { width: min(340px, 100%); margin-inline: auto; }
.line .bar { display: flex; align-items: center; }
.line .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--confirmed); flex: 0 0 auto; }
.line .dot.hollow { background: transparent; border: 2px solid var(--confirmed); }
.line .rule { flex: 1; height: 3.5px; background: var(--confirmed); border-radius: 2px; }
.line .rule.dashed {
  background: repeating-linear-gradient(90deg,
    var(--disputed) 0 7px, transparent 7px 14px);
}
.line.is-waiting .dot, .line.is-waiting .rule { background: var(--disputed); }
.line.is-waiting .dot.hollow { background: transparent; border-color: var(--disputed); }
.line .mark {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--confirmed); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
  box-shadow: 0 0 0 3.5px var(--bg);
}
.line.is-waiting .mark { background: var(--disputed); }
.line .names {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 13px; color: var(--text-3);
}
.line .names b { color: var(--confirmed); font-weight: 600; }
.line.is-waiting .names b { color: var(--disputed); }

/* A phone holding a real screenshot.
   These are genuine iOS simulator captures of the current build, taken with the
   app's own -agState harness, so the page shows what the app actually looks
   like. The status bar and the island are inside the capture, so everything
   here is the hardware: a metal rail, a highlight along the top edge, the two
   volume buttons and the side button. */
.device {
  --rail: 9px;
  position: relative;
  width: 248px; flex: 0 0 auto;
  padding: var(--rail);
  border-radius: 40px;
  background:
    linear-gradient(148deg, #6B6472 0%, #322D3A 18%, #221E28 50%, #3A3441 82%, #17141C 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .13) inset,
    0 1px 1px rgba(255, 255, 255, .22) inset,
    0 2px 4px rgba(37, 33, 42, .22),
    0 34px 54px -26px rgba(37, 33, 42, .62);
  line-height: 0;
  isolation: isolate;
}
/* height:auto is load bearing. The markup carries width and height so the
   browser can reserve the box, and without this the height attribute wins and
   the screenshot renders squashed. */
.device img {
  width: 100%; height: auto; display: block;
  border-radius: 32px;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
}
/* The two volume buttons, and the mute switch above them. */
.device::before {
  content: ""; position: absolute; left: -2px; top: 92px; width: 2px; height: 68px;
  border-radius: 2px 0 0 2px; z-index: -1;
  background: linear-gradient(#4A4450, #2A2532);
  box-shadow: 0 -30px 0 -1px #3E3946, 0 84px 0 8px transparent;
}
/* The side button, longer, lower, on the other edge. */
.device::after {
  content: ""; position: absolute; right: -2px; top: 132px; width: 2px; height: 54px;
  border-radius: 0 2px 2px 0; z-index: -1;
  background: linear-gradient(#4A4450, #2A2532);
}
@media (max-width: 879px) { .device { width: 216px; --rail: 8px; } }
/* Pulled slightly in from the edge so it reads as part of the section rather
   than floating off the right of it. */
@media (min-width: 880px) { .split .art .device { transform: translateX(-14px); } }

/* --- cards and grids ---------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid.two { grid-template-columns: repeat(2, 1fr); } }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
a.card {
  text-decoration: none; color: inherit; display: block;
  transition: transform .16s ease, border-color .16s ease;
}
a.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
a.card .more { color: var(--primary); font-weight: 700; font-size: 15px; }

/* Two columns that stack: words on one side, something to look at on the
   other. Reversed on alternate sections so a long page does not march. */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
.split .art { display: grid; place-items: center; }
.hero-split .art { justify-items: start; }
@media (max-width: 879px) { .hero-split .art { justify-items: center; } }
@media (min-width: 860px) {
  .split.flip .words { order: 2; }
}

/* Numbered steps, as on the current page. */
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps li {
  counter-increment: step; position: relative; padding-left: 48px; margin-bottom: 26px;
}
ol.steps li:last-child { margin-bottom: 0; }
ol.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 700; display: grid; place-items: center;
}

/* --- buttons and badges ------------------------------------------------- */

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.centred .actions { justify-content: center; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff; text-decoration: none;
  padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 16px;
  transition: transform .12s ease, filter .15s ease;
}
.button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.button.ghost {
  background: transparent; color: var(--text); border: 1px solid var(--line);
}
.button.ghost:hover { border-color: var(--primary); color: var(--primary); filter: none; }

/* Store badges, used exactly as Apple and Google ship them, at the same plate
   height. Google's asset carries 41/250 of transparent clear space on every
   side; the negative margin absorbs it so the gap between them stays even. */
.badges { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; --plate: 46px; }
.badge { display: inline-flex; line-height: 0; }
.badge img { height: var(--plate); width: auto; display: block; }
.badge.is-google img { height: calc(var(--plate) / 0.672); margin: calc(var(--plate) / 0.672 * -0.164); }
.badge.is-soon { opacity: .6; cursor: default; }

/* --- faq ---------------------------------------------------------------- */

details.faq {
  border-bottom: 1px solid var(--line); padding: 18px 0;
}
details.faq summary {
  cursor: pointer; font-weight: 700; font-size: 18px; letter-spacing: -.01em;
  list-style: none; display: flex; align-items: flex-start; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; margin-left: auto; color: var(--primary);
  font-size: 22px; line-height: 1; font-weight: 400; transition: transform .2s ease;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .answer { padding-top: 10px; color: var(--text-2); }

/* --- pricing ------------------------------------------------------------ */

.plan { position: relative; }
.plan.featured { border-color: var(--primary); }
.plan .price { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; }
.plan ul { margin: 16px 0 0; padding: 0; list-style: none; }
.plan li { padding-left: 26px; position: relative; margin-bottom: 9px; color: var(--text-2); }
.plan li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--primary); font-weight: 800;
}
.plan .flag {
  position: absolute; top: -11px; right: 18px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 11px; border-radius: 999px;
}

/* --- footer ------------------------------------------------------------- */

.foot { border-top: 1px solid var(--line); padding: 44px 0 40px; margin-top: 20px; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.foot h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.foot a:hover { color: var(--text); }
.foot-base {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap;
  font-size: 14px; color: var(--text-3);
}

/* --- movement ----------------------------------------------------------- */

/* Everything below is decoration. The page is complete and readable with all
   of it switched off, which is what makes it safe to switch off. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}
.reveal.in.d1 { transition-delay: .07s; }
.reveal.in.d2 { transition-delay: .14s; }
.reveal.in.d3 { transition-delay: .21s; }

/* The line closing is the one animation that means something: it is the app's
   signature object doing the thing the product is for. */
.line .rule { transform-origin: left center; }
.reveal.in .line .rule { animation: draw .7s cubic-bezier(.22,.61,.36,1) both; }
.reveal.in .line .mark { animation: land .45s cubic-bezier(.34,1.56,.64,1) .5s both; }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes land { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.float { animation: float 5.5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .reveal.in .line .rule, .reveal.in .line .mark { animation: none; }
  .float { animation: none; }
  .button:hover, a.card:hover, .nav-cta:hover { transform: none; }
}


/* --- analytics consent -------------------------------------------------- */
/* Marketing pages only. Accept and decline are deliberately the same weight. */
.consent {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 14px);
  width: min(680px, calc(100% - 32px)); z-index: 60;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
  box-shadow: 0 18px 44px -16px rgba(37, 33, 42, .38);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.consent.in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
.consent p { margin: 0; flex: 1 1 300px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.consent-buttons { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-buttons button {
  font: 600 14.5px/1 inherit; font-family: inherit; cursor: pointer;
  padding: 11px 16px; border-radius: 12px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
}
.consent-buttons button:hover { border-color: var(--text-3); }
.consent-buttons button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 560px) {
  .consent { flex-direction: column; align-items: stretch; }
  /* The basis in `flex: 1 1 300px` becomes a HEIGHT once this is a column, so
     the paragraph has to give it up or the banner is 300px tall with a void. */
  .consent p { flex: 0 1 auto; }
  .consent-buttons button { flex: 1; }
}