/* urtudu.com, styled from the APP'S OWN UI first (owner 9/30; tokens = daymark/src/ui/theme.ts, "Precision
   Stationery"): warm paper holds the content, graphite is structure and ink, aluminum measures (hairlines, the
   progress track), and kelly appears only where it means something (done, good, the one that matters most).
   Motifs borrowed from the app's screens: the white day card with its progress bar, check circles, the kelly
   underline on the starred task, the dashed "Upcoming" inset, the graphite pill button, the "done" wash, uppercase
   kickers. The store screenshots and carousels are a secondary source. Light only. */
:root {
  --bg: #FAF9F6;          /* paper/50 */
  --surface: #FFFFFF;     /* the page */
  --surface-alt: #F2F0EA; /* inset */
  --ink: #1B1C1F;
  --ink-2: #565A60;
  --ink-3: #696D74;
  --border: #E7E4DC;      /* warm hairline: edges that hold the page */
  --hairline: #E5E7EA;    /* aluminum: lines that measure */
  --track: #C9CDD3;
  --accent: #2F3235;      /* graphite/800: the cover, the pill */
  --accent-pressed: #26282C;
  --kelly: #0DB14B;
  --kelly-ink: #0A6B30;
  --kelly-soft: #E6F7EC;
  --kelly-border: #C2EDD2;
  --wide: 920px;
  --text: 680px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --shadow: 0 1px 2px rgba(27, 28, 31, 0.04), 0 10px 28px rgba(27, 28, 31, 0.06);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-block: 0 48px;
  padding-inline: 20px;
}
a { color: var(--kelly-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Header: the app icon + the wordmark; the graphite pill is the app's primary button */
header.site {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 22px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
header.site .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
header.site .lockup { height: 34px; width: auto; display: block; } /* LOGO-MASTER5, artboard 2, as drawn */
header.site nav { display: flex; align-items: center; gap: 22px; }
header.site nav a { font-size: 15px; color: var(--ink-2); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }
.pillbtn, header.site nav a.navcta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 17px;
  border-radius: 999px;
  text-decoration: none;
}
.pillbtn:hover, header.site nav a.navcta:hover { background: var(--accent-pressed); color: #fff; }

main { max-width: var(--wide); margin: 0 auto; }
.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
/* the app's mark on the task that matters most */
.must { background: linear-gradient(var(--kelly), var(--kelly)) 0 100% / 100% 0.085em no-repeat; padding-bottom: 0.05em; }

/* Hero */
.hero { padding: 32px 0 0; }
.hero h1 {
  font-size: clamp(38px, 6.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 28px;
}
.hero p.lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); margin: 0 0 24px; }
.getrow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.note { color: var(--ink-3); font-size: 15px; margin: 0; }
.getrow .note { max-width: 36ch; line-height: 1.45; }

/* Laptops and desktops only: a browser cannot install an iPhone app, so a QR code hands the store page to the phone.
   (hover + fine pointer = a mouse; phones and tablets go straight to the store from the badge.) */
.qr { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .qr {
    display: flex;
    align-items: center;
    gap: 14px;
    order: 1; /* directly beside the badge; the note follows */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-m);
    padding: 10px 18px 10px 10px;
    box-shadow: var(--shadow);
  }
  .qr img { width: 72px; height: 72px; display: block; }
  .qr p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); max-width: 17ch; }
  .qr strong { display: block; color: var(--ink); }
  .getrow .note { order: 2; }
  article .getrow .note { flex-basis: 100%; max-width: none; }
}

/* Apple's badge as supplied (never restyled; one per page; clear space = 1/4 of its height). */
.badge { display: inline-block; line-height: 0; }
.badge img { display: block; height: 50px; width: auto; }

/* The three days: the real Home screen, cropped by the band, and the day's label beside it.
   The band is the app's "Upcoming" inset: paper/100 with a dashed edge.
   Timing (owner 10/1): a day holds ~2.5 s and changes over 0.4 s; the loop is 8.7 s. The delays put the page
   load on the workday, with its cup still being drawn and the steam already moving. */
.days {
  position: relative;
  height: 278px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px dashed #D9D5CA;
  margin: 0 0 30px;
}
/* A generic phone in a soft case, one case colour per day (owner 10/1: navy, orange, lime). No island, no side
   buttons, no cut-outs: nothing unique to an Apple product, so it is ours to light and to crop (Apple's rules for
   illustrated generic devices; a case on an actual iPhone image is NOT allowed). It runs to the band's bottom
   edge at every size. */
.phone {
  position: absolute;
  left: calc(50% - 270px); /* phone + label sit as one centred group */
  top: 26px;
  bottom: 0;
  width: 254px;
  padding: 13px 13px 0;
  border-radius: 50px 50px 0 0;
  background: #20222a; /* only ever seen for a frame, under the fading cases */
  box-shadow: 0 34px 54px -16px rgba(27, 28, 31, 0.42), 0 12px 22px rgba(27, 28, 31, 0.16), 0 2px 3px rgba(27, 28, 31, 0.18);
}
/* The case: one flat colour, lit from the top left. All of the light is drawn with shadows that follow the
   rounded shape (straight gradients left a seam in the corners): a bright top edge, a lit left side, a shaded
   right side, and a soft crest of light along the middle of the rim. */
.case {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  animation: dayfade 8.7s infinite;
  background: radial-gradient(190px 110px at 18% 0, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%), var(--case);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.62),
    inset 3px 0 4px rgba(255, 255, 255, 0.24),
    inset -5px 0 6px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.case::before {
  content: "";
  position: absolute;
  inset: 4px 4px -6px;
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 46px 46px 0 0;
  filter: blur(1.6px);
  -webkit-mask-image: linear-gradient(105deg, #000 0, rgba(0, 0, 0, 0.5) 34%, transparent 62%);
  mask-image: linear-gradient(105deg, #000 0, rgba(0, 0, 0, 0.5) 34%, transparent 62%);
}
.case.s1 { --case: #263F7A; } /* workday: navy */
.case.s2 { --case: #FF6A1F; } /* school day: orange */
.case.s3 { --case: #C9EE32; } /* reset Sunday: lime */
/* the phone inside the case: a black border around the glass, sitting below the case's lip */
.bezel {
  position: relative;
  height: 100%;
  padding: 4px 4px 0;
  border-radius: 38px 38px 0 0;
  background: #0A0A0C;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.42), 0 0 4px 3px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.screen {
  position: relative;
  height: 100%;
  border-radius: 34px 34px 0 0;
  overflow: hidden;
  background: var(--bg);
}
/* a faint sheen across the glass, light enough to leave the list readable */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.05) 22%, rgba(255, 255, 255, 0) 38%);
}
.shot { position: absolute; inset: 0; opacity: 0; animation: dayfade 8.7s infinite; }
.shot img { display: block; width: 100%; height: auto; }
.time { position: absolute; top: 12px; left: 23px; font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--ink); }
.status { position: absolute; top: 12px; right: 19px; display: flex; gap: 3px; align-items: center; line-height: 0; }
.status svg { height: 8px; width: auto; fill: var(--ink); }

/* The label: "For a" stays, the day word swaps with a small slide, and each line drawing draws itself and moves */
.daylabels { position: absolute; left: calc(50% + 30px); right: 24px; top: 0; bottom: 0; display: grid; align-items: center; justify-items: start; }
.daylabel { text-align: center; }
.draws { display: grid; justify-items: center; }
.draw {
  grid-area: 1 / 1;
  width: 52px;
  height: 52px;
  overflow: visible;
  fill: none;
  stroke: var(--kelly);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: dayshow 8.7s infinite;
}
.draw path { stroke-dasharray: 1; animation: daydraw 8.7s infinite both; }
.daylabel p { color: var(--ink); font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; margin: 10px 0 0; }
.words { display: grid; justify-items: center; }
.word { grid-area: 1 / 1; white-space: nowrap; opacity: 0; animation: dayword 8.7s infinite; }

/* one slot = 33.33 % of the loop; s1 is already in when the page loads */
.s1, .s1 path { animation-delay: -0.8s; }
.s2, .s2 path { animation-delay: -6.6s; }
.s3, .s3 path { animation-delay: -3.7s; }
/* the phone's layers are opaque: the next one fades in on top, and only then does the old one let go */
@keyframes dayfade {
  0% { opacity: 0; }
  4.6% { opacity: 1; }
  37.93% { opacity: 1; }
  42.53% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes dayshow {
  0% { opacity: 0; }
  3% { opacity: 1; }
  33.33% { opacity: 1; }
  36.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes dayword {
  0% { opacity: 0; transform: translateY(0.42em); }
  4.6% { opacity: 1; transform: none; }
  33.33% { opacity: 1; transform: none; }
  37.93% { opacity: 0; transform: translateY(-0.42em); }
  100% { opacity: 0; transform: translateY(-0.42em); }
}
@keyframes daydraw {
  0%, 3% { stroke-dashoffset: 1; }
  17% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
/* the cup: steam keeps rising */
.draw .steam { animation: daydraw 8.7s infinite both, steam 2.4s ease-in-out infinite; animation-delay: -0.8s, 0s; }
.draw .steam.b { animation-delay: -0.8s, -1.2s; }
@keyframes steam {
  0% { transform: translateY(2.6px); opacity: 0; }
  28% { opacity: 1; }
  68% { opacity: 1; }
  100% { transform: translateY(-3.4px); opacity: 0; }
}
/* the pencil: it writes a line, lifts, and writes it again */
.draw .pen { animation: penmove 2.6s ease-in-out infinite; }
.draw .ink { stroke-width: 2.4; stroke-dasharray: 1; animation: penink 2.6s ease-in-out infinite; }
@keyframes penmove {
  0%, 8% { transform: translate(-7px, 2.6px); }
  56% { transform: translate(9px, 2.6px); }
  70% { transform: translate(10px, 0.6px); }
  100% { transform: translate(-7px, 2.6px); }
}
@keyframes penink {
  0%, 8% { stroke-dashoffset: 1; opacity: 1; }
  56% { stroke-dashoffset: 0; opacity: 1; }
  76% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* the plant: a third leaf grows each time Sunday comes round, and the leaves stir */
.draw .leaf { stroke-dasharray: none; transform-box: view-box; transform-origin: 24px 28.5px; animation: leafgrow 8.7s infinite both; animation-delay: -3.7s; }
.draw .sway { transform-box: view-box; transform-origin: 24px 22px; animation: sway 3.2s ease-in-out infinite; }
@keyframes leafgrow {
  0%, 12% { transform: scale(0); }
  21% { transform: scale(1.12); }
  25%, 100% { transform: scale(1); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .case, .shot, .draw, .draw path, .word, .draw .pen, .draw .sway { animation: none; }
  .case.s1, .shot.s1, .draw.s1, .word.s1 { opacity: 1; }
  .draw path { stroke-dashoffset: 0; }
}

/* The testers' lines, in the app's "done" wash with its check circle: two checked rows, side by side on
   wide screens (equal height), stacked on phones */
.quotes { margin: 44px 0 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .quotes { grid-template-columns: 1fr 1fr; }
  /* the names sit on one line across both boxes, whatever the quotes' lengths */
  .quotes .quote { padding: 24px 24px 22px; gap: 4px 16px; grid-template-rows: 1fr auto; }
  .quotes .quote blockquote { font-size: 20px; text-wrap: balance; }
}
.quote {
  margin: 0;
  padding: 26px 28px;
  background: var(--kelly-soft);
  border: 1px solid var(--kelly-border);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: start;
}
.check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--kelly);
  display: inline-grid;
  place-items: center;
  flex: none;
}
.check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.quote .check { grid-row: 1 / span 2; width: 40px; height: 40px; margin-top: 2px; }
.quote .check svg { width: 20px; height: 20px; }
.quote blockquote { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); font-weight: 500; }
.quote .nb { white-space: nowrap; }
.quote figcaption { color: var(--kelly-ink); font-size: 15px; font-weight: 400; margin-top: 6px; }
.quote figcaption .who { font-weight: 600; }

/* Sections */
main > section { margin-top: 72px; }
main > section.hero { margin-top: 0; }
main > section > h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 18px; }

/* The app's card: the white page on paper */
.card, .listcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr 1fr; } }
.card { padding: 24px; }
.card svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.card h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.card p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.5; }

/* Private by design, laid out as the app's day card: a title, the progress bar, checked rows */
.listcard { padding: 30px 32px 28px; }
.listcard h2 { font-size: clamp(24px, 3.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 16px; }
.track { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; margin: 0 0 8px; }
.track span { display: block; height: 100%; border-radius: 999px; background: var(--kelly); }
.checks { list-style: none; padding: 0; margin: 0 0 18px; }
.checks li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 18px; font-weight: 500; }
.listcard p { margin: 0; color: var(--ink-2); }

/* Questions */
.faq { margin: 0; }
.faq dt { font-weight: 600; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: var(--ink-2); }
.questions .faq { border-top: 1px solid var(--hairline); }
.questions .faq dt { margin: 0; padding-top: 20px; font-size: 18px; letter-spacing: -0.01em; }
.questions .faq dd { margin: 6px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); max-width: 74ch; }

/* More about Urtudu: the app's list rows */
.more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .more ul { grid-template-columns: 1fr 1fr; } }
.more li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 17px 20px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.more li a::after { content: "›"; color: var(--ink-3); font-weight: 400; font-size: 22px; line-height: 1; }
.more li a:hover { border-color: var(--track); color: var(--ink); }

/* Closing: the inset again, with the lockup and the pill */
.closing {
  background: var(--surface-alt);
  border: 1px dashed #D9D5CA;
  border-radius: var(--r-xl);
  padding: 44px 28px 42px;
  text-align: center;
}
.closing .lockup { height: 48px; width: auto; display: inline-block; }
.closing p { font-size: clamp(22px, 3.4vw, 28px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 18px 0 22px; }
.closing .pillbtn { padding: 13px 24px; }

/* Article pages (privacy, support, the four question pages) */
article { max-width: var(--text); }
article h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; margin: 44px 0 8px; }
article .meta { color: var(--ink-3); font-size: 15px; margin: 0 0 28px; }
article h2 { font-size: 22px; letter-spacing: -0.01em; margin: 40px 0 10px; }
article h3 { font-size: 17px; margin: 24px 0 8px; }
article p, article li { color: var(--ink); }
article ul { padding-left: 22px; }
article li { margin: 6px 0; }
article li::marker { color: var(--kelly); }
article .lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin: 12px 0 8px; }
article .get { margin: 36px 0 12px; }
article .source { color: var(--ink-3); font-size: 15px; }
.summary { background: var(--kelly-soft); border: 1px solid var(--kelly-border); border-radius: var(--r-l); padding: 18px 20px; margin: 0 0 8px; }
.summary ul { margin: 8px 0 0; }
.tablewrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
th { background: var(--surface-alt); font-weight: 600; }
tr:last-child td { border-bottom: none; }
code { font: 15px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }

footer.site {
  max-width: var(--wide);
  margin: 64px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}
footer.site a { color: var(--ink-3); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .legal { flex-basis: 100%; font-size: 12.5px; }

/* Phones */
@media (max-width: 640px) {
  header.site nav { gap: 16px; }
  header.site .lockup { height: 30px; }
  header.site nav a.navcta { display: none; }
  .hero { padding-top: 28px; }
  .hero h1 { margin-bottom: 22px; }
  .hero p.lede { font-size: 19px; }
  .days { height: 232px; margin-bottom: 24px; }
  .phone { left: 16px; top: 22px; width: 166px; padding: 9px 9px 0; border-radius: 34px 34px 0 0; }
  .case::before { inset: 3px 3px -6px; border-width: 2px; border-radius: 31px 31px 0 0; filter: blur(1.2px); }
  .bezel { padding: 3px 3px 0; border-radius: 26px 26px 0 0; }
  .screen { border-radius: 23px 23px 0 0; }
  .time { top: 8px; left: 15px; font-size: 7px; }
  .status { display: none; }
  .daylabels { left: 190px; right: 8px; justify-items: center; }
  .draw { width: 38px; height: 38px; }
  .daylabel p { font-size: 23px; margin-top: 6px; }
  .quotes { margin-top: 32px; gap: 12px; }
  .quote { padding: 22px 20px; grid-template-columns: 1fr; }
  .quote .check { grid-row: auto; margin: 0 0 8px; }
  .quote blockquote { font-size: 20px; }
  main > section { margin-top: 56px; }
  .listcard { padding: 24px 20px 22px; }
  .closing { padding: 36px 20px; }
}