/* Duri's site. The app's own colours and type (design/tokens.json): Paper and Ink, the garnet accent,
   Literata for reading and Bricolage Grotesque for display. No framework; one stylesheet. */

:root {
  color-scheme: light dark;
  --paper: #FAF8F2;
  --card: #FFFFFF;
  --ink: #1D1B18;
  --mute: #6E695F;
  --hairline: #E6E1D6;
  --ribbon: #A3224F;
  --ribbon-ink: #FFFFFF;
  --sepia: #F1E7D0;
  --night: #101216;
  --shadow: 0 30px 60px -30px rgba(29, 27, 24, 0.45), 0 10px 24px -14px rgba(29, 27, 24, 0.25);
  --radius: 22px;
  --display: "Bricolage Grotesque", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --reading: "Literata", "Iowan Old Style", "Charter", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1014;
    --card: #181B21;
    --ink: #ECEEF2;
    --mute: #9BA3B2;
    --hairline: #262B34;
    --ribbon: #E8749B;
    --ribbon-ink: #1A0710;
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--reading);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ribbon); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 40px); margin: 0 auto; }
.mute { color: var(--mute); }
.eyebrow { font-family: var(--ui); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ribbon); font-weight: 600; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--mute); max-width: 36rem; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ribbon); color: var(--ribbon-ink); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 12px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; gap: 22px; font-family: var(--ui); font-size: 0.95rem; }
.nav a { color: var(--ink); opacity: 0.85; }
.nav a:hover { opacity: 1; text-decoration: none; color: var(--ribbon); }
/* On a phone the header is two rows and stays put: the brand and the badge, then the section links as a strip
   that scrolls sideways. A tall sticky header would take a fifth of the screen. */
@media (max-width: 720px) {
  .top { position: static; }
  .top .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: 18px; padding: 10px 0 12px; white-space: nowrap; scrollbar-width: none; font-size: 0.9rem; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }
}
.button {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 600; font-size: 0.95rem;
  padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--ribbon); color: var(--ribbon-ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.button:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 24px -12px var(--ribbon); }
.button.quiet { background: transparent; color: var(--ink); border-color: var(--hairline); }
.button.quiet:hover { box-shadow: none; border-color: var(--mute); }
.button svg { width: 18px; height: 18px; }

/* Hero */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px); position: relative; min-height: calc(100svh - 64px); display: flex; align-items: center; }
@media (max-width: 860px) { .hero { min-height: 0; } .hero h1 { max-width: none; } }
.hero > .wrap { width: min(1120px, 100% - 40px); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero h1 { margin: 14px 0 20px; max-width: 12ch; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .small { font-family: var(--ui); font-size: 0.85rem; color: var(--mute); margin-top: 14px; }
.hero-art { position: relative; display: flex; justify-content: center; }

/* A phone, to an iPhone's proportions. The screen is exactly 402 by 874 and sets the size; the bezel and the
   titanium edge wrap it with the same thin margin on every side, as the real thing has, so there is no dark
   band above or below the screen. The corners are elliptical percentages that come out circular at this shape. */
.phone {
  width: min(256px, 66vw);
  padding: 3px;
  border-radius: 18% / 8.3%;
  background: linear-gradient(160deg, #4b4e55, #1c1e23 35%, #2f3238 70%, #55585f);
  box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,0.6);
  position: relative;
}
.phone .bezel { padding: 7px; border-radius: 17.2% / 7.9%; background: #050506; }
.phone .screen { position: relative; width: 100%; aspect-ratio: 402 / 874; border-radius: 14.6% / 6.7%; overflow: hidden; background: #050506; }
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .island { position: absolute; top: calc(10px + 2.4%); left: 50%; width: 27%; height: 3.4%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 3; }
/* The keys: action and volume on the left, the side button on the right, drawn just outside the edge. */
.phone .keys { position: absolute; inset: -2px; pointer-events: none; z-index: -1;
  background:
    linear-gradient(#3a3d44, #1a1c20) 0 18% / 3px 4% no-repeat,
    linear-gradient(#3a3d44, #1a1c20) 0 27% / 3px 7.5% no-repeat,
    linear-gradient(#3a3d44, #1a1c20) 0 37% / 3px 7.5% no-repeat,
    linear-gradient(#3a3d44, #1a1c20) 100% 30% / 3px 11% no-repeat;
  border-radius: inherit; }
.float { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(-0.4deg); } }

/* The corner of a page, lifting: a hint of the curl. */
.curl {
  position: absolute; right: 4px; bottom: 4px; width: 26%; aspect-ratio: 1;
  background: linear-gradient(135deg, transparent 48%, rgba(0,0,0,0.06) 49%, #ECE6D8 50%, #F7F3EA 58%, #FFFFFF 72%);
  border-bottom-right-radius: 34px; box-shadow: -8px -8px 18px -10px rgba(0,0,0,0.35);
  transform-origin: bottom right;
  animation: curl 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes curl {
  0%, 20% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
  45%, 60% { clip-path: polygon(100% 0, 0 100%, 100% 100%); }
  85%, 100% { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .float, .curl, .reveal, .screens img { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Sections */
section { padding: clamp(56px, 8vw, 110px) 0; }
section + section { border-top: 1px solid var(--hairline); }
.head { max-width: 40rem; margin-bottom: clamp(28px, 4vw, 48px); }
.head h2 { margin: 10px 0 14px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ribbon) 12%, transparent); color: var(--ribbon); }
.card .icon svg { width: 22px; height: 22px; }
.card p { color: var(--mute); font-size: 1rem; }

/* Two columns: words beside a picture */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.split h2 { margin: 10px 0 16px; }
.split p + p { margin-top: 12px; }
.split ul { padding-left: 1.1em; margin: 14px 0 0; color: var(--mute); }
.split li + li { margin-top: 6px; }
/* An iPad, lying on its side: the same thin titanium edge and black bezel as the phone, a camera on the long edge,
   and a 4:3 screen. The screenshot is portrait; its top, where the content is, fills the screen. */
.ipad { padding: 3px; border-radius: 22px; background: linear-gradient(160deg, #4b4e55, #1c1e23 35%, #2f3238 70%, #55585f); box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.6); }
.ipad .bezel { padding: 2.4%; border-radius: 19px; background: #050506; position: relative; }
.ipad .bezel::before { content: ""; position: absolute; top: 0.85%; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #15171c; box-shadow: inset 0 0 0 1.5px #23262d; transform: translateX(-50%); }
.ipad .screen { border-radius: 10px; overflow: hidden; background: #050506; }
.ipad .screen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; display: block; }

.duo .points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 720px) { .duo .points { grid-template-columns: 1fr; } }
.duo .points div { border-top: 1px solid var(--hairline); padding-top: 16px; }
.duo .points h3 { font-size: 1.05rem; margin-bottom: 6px; }
.duo .points p { color: var(--mute); font-size: 0.98rem; }
/* The Duo, closed and open: the simulator's own pictures, the closed one standing beside the open one at the same height. */
.duo-pics { display: grid; grid-template-columns: 532fr 972fr; gap: clamp(16px, 3vw, 36px); align-items: end; max-width: 980px; margin: 0 auto; }
.duo-pics figure { margin: 0; }
/* The pictures are cut out of the simulator's window: the device on a transparent ground, so the page shows through. */
.duo-pics img { width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35)); }
.duo-pics figcaption { font-family: var(--ui); font-size: 0.86rem; color: var(--mute); text-align: center; margin-top: 12px; }
@media (max-width: 600px) { .duo-pics { grid-template-columns: 1fr; align-items: start; } .duo-pics figure:first-child { max-width: 62%; margin: 0 auto; } }

/* Formats */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { font-family: var(--ui); font-size: 0.92rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--card); }

/* Screens strip */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 8px; }
@media (max-width: 1000px) { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.strip figure { margin: 0; }
.strip .frame { border-radius: 26px; }
.strip figcaption { font-family: var(--ui); font-size: 0.86rem; color: var(--mute); margin-top: 10px; text-align: center; }

/* Pro */
.pro { background: var(--sepia); }
@media (prefers-color-scheme: dark) { .pro { background: #1B2233; } }
.pro .plan { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
@media (max-width: 720px) { .pro .plan { grid-template-columns: 1fr; } }
.pro .card ul { padding-left: 1.1em; margin: 8px 0 0; color: var(--mute); }
.pro .card li + li { margin-top: 6px; }
.price { font-family: var(--display); font-size: 2rem; }
.price small { font-family: var(--ui); font-size: 0.9rem; font-weight: 500; color: var(--mute); margin-left: 6px; }
/* The Pro card wears a crown: a garnet mark before its name, and a hairline of the accent round the card. */
.pro .card:last-child { border-color: color-mix(in srgb, var(--ribbon) 45%, var(--hairline)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ribbon) 25%, transparent); }
.crown { width: 18px; height: 18px; vertical-align: -3px; margin-right: 7px; color: var(--ribbon); }

/* FAQ */
.faq details { border-top: 1px solid var(--hairline); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; font-family: var(--ui); font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ribbon); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--mute); }

.mail span { font-style: italic; }

/* Footer */
footer { border-top: 1px solid var(--hairline); padding: 40px 0 60px; font-family: var(--ui); font-size: 0.9rem; color: var(--mute); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--mute); display: inline-block; padding: 8px 0; }
footer a:hover { color: var(--ribbon); }

/* Legal pages */
.doc { max-width: 40rem; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 20px 100px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.doc .when { font-family: var(--ui); color: var(--mute); font-size: 0.9rem; margin-bottom: 36px; }
.doc h2 { font-size: 1.35rem; margin: 36px 0 10px; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc dt { font-weight: 600; font-family: var(--ui); margin-top: 18px; }
.doc dd { margin: 4px 0 0; color: var(--mute); }

/* Everything is visible from the start: content that fades in only once the browser reports it on screen was
   found blank when a reader jumped to a section, and a page that looks empty is worse than one that does not fade. */
.reveal { opacity: 1; transform: none; }

/* The hero's screens: the current one shown, the next fading in. The dots below say which. */
#hero-screens { touch-action: pan-y; }
#hero-screens img { -webkit-user-drag: none; user-select: none; }
picture { display: contents; }
.dots { position: absolute; bottom: -30px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); opacity: 0.35; transition: opacity 0.3s, transform 0.3s; }
.dots i.on { opacity: 1; transform: scale(1.35); background: var(--ribbon); }
/* The App Store badge is Apple's own artwork (images/app-store-badge.svg, from Apple's marketing tools), used as
   Apple asks: unchanged, on its own, at least 40 pixels tall. */
.badge { display: inline-block; line-height: 0; border-radius: 6px; transition: transform 0.18s ease, opacity 0.18s ease; }
.badge img { height: 40px; width: auto; display: block; }
.badge.large img { height: 54px; }
.badge:hover { transform: translateY(-1px); text-decoration: none; }
span.badge { opacity: 0.6; }
/* Beside the badge, never on it (Apple's badge is not to be altered): a small note until the app is on the store. */
.store { display: inline-flex; align-items: center; gap: 12px; }
.store.stacked { flex-direction: column; gap: 10px; }
.pending { font-family: var(--ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
@media (max-width: 560px) { .top .pending { display: none; } }

/* The walkthrough: words on the left, the phone held still on the right. */
.walk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.steps { display: flex; flex-direction: column; gap: clamp(28vh, 36vh, 44vh); padding: 20vh 0 30vh; }
.step { max-width: 30rem; opacity: 0.55; transition: opacity 0.5s ease; }
.step.now { opacity: 1; }
.step h3 { font-size: 1.5rem; margin-bottom: 10px; }
.step p { color: var(--mute); }
.sticky { position: sticky; top: 96px; display: flex; justify-content: center; }
.screens { position: relative; }
.screens img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.screens img.on { opacity: 1; }
/* On a narrow screen a phone held still would cover the words: each step shows its own screen instead. */
.step-shot { display: none; }
@media (max-width: 860px) {
  .walk-grid { grid-template-columns: 1fr; }
  .sticky { display: none; }
  .steps { gap: 56px; padding: 0 0 8px; }
  .step { opacity: 1; }
  .step-shot { display: block; width: min(240px, 64vw); margin: 0 auto 18px; border-radius: 28px; border: 6px solid #111318; box-shadow: var(--shadow); }
  .step { max-width: none; }
}

/* Get */
.get { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.get .lede { margin: 0 auto; }
.get .app-icon { border-radius: 22px; box-shadow: var(--shadow); }
.button[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }