/* DailyWall — the site is the same world as the app.
   Plaster wall, paper cards, tape, ink. Every surface except the app
   screenshots is drawn in CSS, so it stays sharp at any density.
   Palette values are copied from the app, not approximated. */

:root {
  --plaster-1: #f7efe1;
  --plaster-2: #dccbb2;
  --paper: #fefcf6;
  --ink: #1f1d1b;
  --ink-soft: #6b6259;
  --ink-faint: #9c9186;
  --accent: #0b7a70;
  --accent-bright: #15bfae;
  --yellow: #ffe27a;
  --peach: #ffb4a2;
  --mint: #b8e6c9;
  --sky: #a9d6f5;
  --lilac: #e3c4f5;
  --blossom: #ffd6e8;
  --sand: #f5e6c8;
  --radius: 6px;
  --radius-lg: 14px;
  --shadow: 0 12px 28px rgba(74, 58, 36, 0.2);
  --shadow-sm: 0 4px 12px rgba(74, 58, 36, 0.14);
  --shadow-lg: 0 26px 60px rgba(74, 58, 36, 0.3);
  --max: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 90% 55% at 20% 4%, rgba(255, 249, 236, 0.85), transparent 62%),
    linear-gradient(155deg, var(--plaster-1), var(--plaster-2));
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Plaster grain — static, cheap, and it stops a large screen reading as a
   flat gradient. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.5) 0 1px, transparent 1px),
    radial-gradient(circle at 63% 11%, rgba(185,164,136,.45) 0 1px, transparent 1px),
    radial-gradient(circle at 37% 71%, rgba(255,255,255,.45) 0 1px, transparent 1px),
    radial-gradient(circle at 88% 52%, rgba(185,164,136,.4) 0 1px, transparent 1px),
    radial-gradient(circle at 8% 88%, rgba(255,255,255,.4) 0 1px, transparent 1px);
  background-size: 140px 140px, 190px 190px, 170px 170px, 210px 210px, 160px 160px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* `height: auto` is not optional here. The width/height attributes on the
   screenshots are there so the browser can reserve the right space before the
   image loads — but they also act as a presentational height, and without this
   the picture keeps its full pixel height while the width is squeezed to fit,
   which stretched the hero phone to two thousand pixels tall. */
img { max-width: 100%; height: auto; display: block; }

/* ── Header ─────────────────────────────────────────────────────────── */

header { padding: 26px 0 6px; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { width: 44px; height: 44px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.brand span { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }

.langs {
  display: flex;
  gap: 4px;
  background: rgba(255, 253, 246, 0.75);
  padding: 4px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.langs a {
  padding: 5px 14px; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); font-size: 0.85rem; font-weight: 600;
}
.langs a[aria-current="true"] { background: var(--accent); color: #fff; }

/* ── Type ───────────────────────────────────────────────────────────── */

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.14; }

.hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); margin: 0 0 20px; }
h2.big { font-size: clamp(1.75rem, 3.9vw, 2.5rem); margin: 0 0 16px; max-width: 20ch; }
.lede { font-size: 1.16rem; color: var(--ink-soft); margin: 0 0 30px; max-width: 36ch; }
.sub { color: var(--ink-soft); max-width: 54ch; margin: 0 0 28px; }

.tape-title {
  display: inline-block; position: relative; background: var(--paper);
  padding: 8px 22px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  font-weight: 700; font-size: 0.95rem; margin: 0 0 22px;
  transform: rotate(-1.2deg); letter-spacing: 0.01em;
}
.tape-title::before {
  content: ""; position: absolute; top: -8px; left: -14px;
  width: 48px; height: 18px; transform: rotate(-15deg);
  background: repeating-linear-gradient(-45deg,
    rgba(255,226,122,.9) 0 6px, rgba(255,253,244,.9) 6px 12px);
  box-shadow: 0 2px 4px rgba(74,58,36,.14);
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 700;
  padding: 15px 30px; border-radius: 999px; box-shadow: var(--shadow);
  transition: transform .18s ease, background .18s ease;
}
.cta:hover { transform: translateY(-2px); background: #0d8a7f; }
.cta.soon { background: rgba(255,253,246,.9); color: var(--ink); cursor: default; }
.cta.soon:hover { transform: none; background: rgba(255,253,246,.9); }
.note-under { margin: 14px 0 0; font-size: .9rem; color: var(--ink-soft); }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: center;
  padding: 44px 0 84px;
}

/* ── The phone ──────────────────────────────────────────────────────── */

.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(160deg, #4a453f, #241f1b 40%, #514a42);
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.16);
}
.phone::after {                 /* the notch */
  content: ""; position: absolute; top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 22px; border-radius: 999px; background: #16120f;
  z-index: 2;
}
.phone img { border-radius: 35px; width: 100%; }

.phone.tilt { transform: rotate(-2.5deg); }
.phone.tilt-r { transform: rotate(2.5deg); }

/* A caption taped under a phone. */
.phone-note {
  margin: 20px auto 0; max-width: 240px; text-align: center;
  background: var(--paper); border-radius: var(--radius); padding: 10px 16px;
  box-shadow: var(--shadow-sm); font-size: .88rem; color: var(--ink-soft);
  position: relative; transform: rotate(-1deg);
}

/* ── Sections ───────────────────────────────────────────────────────── */

section { padding: 62px 0; position: relative; }

.split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: center;
}
.split.flip { grid-template-columns: 360px 1fr; }
.split.flip > .copy { order: 2; }
.split.flip > .art { order: 1; }

/* ── Cards ──────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.card {
  background: var(--paper); border-radius: var(--radius);
  padding: 26px 24px 24px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.card::after {                  /* the app's lifted corner */
  content: ""; position: absolute; right: 0; bottom: 0;
  border-width: 0 0 26px 26px; border-style: solid;
  border-color: transparent transparent rgba(0,0,0,.055) transparent;
}
.card h3 { margin: 0 0 8px; font-size: 1.06rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* Line icons, drawn to match the app's ink. */
.ic { width: 30px; height: 30px; display: block; margin-bottom: 14px; color: var(--accent); }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
          stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Steps ──────────────────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }

.step {
  background: var(--paper); border-radius: var(--radius); padding: 30px 24px 24px;
  box-shadow: var(--shadow-sm); position: relative; text-align: left;
}
.step::before {                 /* tape across the top-left */
  content: ""; position: absolute; top: -9px; left: 22px;
  width: 58px; height: 20px; transform: rotate(-8deg);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(201,180,146,.4));
  box-shadow: 0 2px 5px rgba(74,58,36,.16);
}
.step .n {
  font-size: 2.1rem; font-weight: 700; color: var(--accent);
  line-height: 1; margin-bottom: 10px; display: block;
}
.step h3 { margin: 0 0 6px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .94rem; }

/* ── Swatch galleries ───────────────────────────────────────────────── */

.swatches { display: flex; flex-wrap: wrap; gap: 14px; }

.swatch { text-align: center; width: 96px; }
.swatch .chip {
  height: 66px; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 7px; position: relative; overflow: hidden;
}
.swatch span { font-size: .8rem; color: var(--ink-soft); }

/* Paper shape samples: the silhouette matters, so each is clipped. */
.papers { display: flex; flex-wrap: wrap; gap: 14px; }
.paper-s {
  width: 78px; height: 78px; background: var(--yellow);
  box-shadow: var(--shadow-sm); position: relative;
}
.paper-s.classic  { border-radius: 4px; }
.paper-s.torn     { border-radius: 4px; clip-path: polygon(0 7%,8% 3%,16% 8%,24% 3%,32% 8%,40% 3%,48% 8%,56% 3%,64% 8%,72% 3%,80% 8%,88% 3%,96% 8%,100% 5%,100% 100%,0 100%); }
.paper-s.chamfer  { clip-path: polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); }
.paper-s.ticket   { border-radius: 4px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 92%,6% 88%,0 84%,0 66%,6% 62%,0 58%,0 0); }
.paper-s.notebook { border-radius: 4px; }
.paper-s.notebook::before {
  content: ""; position: absolute; left: 12%; top: 10%; bottom: 10%; width: 2px;
  background: repeating-linear-gradient(rgba(31,29,27,.28) 0 5px, transparent 5px 13px);
}
.paper-s.curled   { border-radius: 4px; clip-path: polygon(0 0,100% 0,100% 88%,50% 100%,0 92%); }
.paper-s.tag      { clip-path: polygon(0 13%,28% 0,72% 0,100% 13%,100% 100%,0 100%); }
.paper-s.list     { border-radius: 4px; clip-path: inset(0 14% 0 14% round 4px); }
.paper-s.bubble   { border-radius: 8px; clip-path: polygon(0 0,100% 0,100% 82%,44% 82%,30% 100%,24% 82%,0 82%); }
.paper-s.sidetorn { border-radius: 4px; clip-path: polygon(0 0,93% 0,100% 9%,93% 18%,100% 27%,93% 36%,100% 45%,93% 55%,100% 64%,93% 73%,100% 82%,93% 91%,100% 100%,0 100%); }

/* Tape samples. */
.tapes { display: flex; flex-wrap: wrap; gap: 12px; }
.tape-s {
  width: 84px; height: 28px; box-shadow: var(--shadow-sm);
  transform: rotate(-4deg); position: relative;
}
.t-frost   { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,216,199,.75)); }
.t-washi   { background: repeating-linear-gradient(-45deg, #ffe27a 0 7px, #fffdf4 7px 14px); }
.t-polka   { background: #fff3dc; }
.t-polka::after { content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, #e8845c 1.6px, transparent 1.7px);
  background-size: 13px 13px; }
.t-kraft   { background: linear-gradient(180deg, #d9ab72, #c18f52); }
.t-sunset  { background: linear-gradient(90deg, #ffb4a2, #ffd6a2); }
.t-checker { background: repeating-conic-gradient(#2b2b2e 0 25%, #fdfbf5 0 50%) 0 0/14px 14px; }
.t-hearts  { background: #ffd6e8; }
.t-hearts::after { content:"♥ ♥ ♥"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:#e0439b; font-size:.72rem; letter-spacing:2px; }
.t-stars   { background: #e3c4f5; }
.t-stars::after { content:"✦ ✦ ✦"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:#6a4cd8; font-size:.72rem; letter-spacing:2px; }
.t-mint    { background: linear-gradient(180deg, #cdf0dc, #a9dcc0); }
.t-neon    { background: linear-gradient(90deg, #7ef9c0, #7ec8f9); }
.t-warning { background: repeating-linear-gradient(-45deg, #f2c744 0 8px, #2b2b2e 8px 16px); }

/* ── Trust / privacy strip ──────────────────────────────────────────── */

.trust {
  background: var(--paper); border-radius: var(--radius-lg); padding: 38px 36px;
  box-shadow: var(--shadow); position: relative;
}
.trust ul { list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 26px; }
.trust li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; }
.trust li b { color: var(--ink); font-weight: 700; }
.tick { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.tick svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
            stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Pricing ────────────────────────────────────────────────────────── */

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.price {
  background: var(--paper); border-radius: var(--radius); padding: 26px 22px;
  box-shadow: var(--shadow-sm); text-align: center; position: relative;
}
.price.best { outline: 2px solid var(--accent); outline-offset: -2px; }
.price.best::before {
  content: attr(data-flag); position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.price .term { font-size: .92rem; color: var(--ink-soft); }
.price .amount { font-size: 1.8rem; font-weight: 700; margin: 6px 0 2px; }
.price .per { font-size: .84rem; color: var(--ink-soft); }
.fine { margin-top: 22px; font-size: .85rem; color: var(--ink-soft); max-width: 64ch; }

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 12px; max-width: 74ch; }
.faq details {
  background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 20px;
}
.faq summary {
  cursor: pointer; font-weight: 700; list-style: none; position: relative;
  padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 2px; top: -2px;
  font-size: 1.35rem; font-weight: 400; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 10px 0 2px; color: var(--ink-soft); font-size: .95rem; }
.faq a { color: var(--accent); }

/* ── Prose (privacy, support) ───────────────────────────────────────── */

.prose {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 44px 44px 48px; margin: 30px 0 60px; max-width: 76ch;
}
.prose h1 { font-size: 1.9rem; margin: 0 0 6px; }
.prose .updated { color: var(--ink-soft); font-size: .88rem; margin: 0 0 30px; }
.prose h2 { font-size: 1.16rem; margin: 32px 0 10px; }
.prose p, .prose li { color: #35312c; }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--accent); }
.prose .callout {
  background: rgba(255,226,122,.28); border-left: 3px solid var(--yellow);
  padding: 14px 18px; border-radius: 4px; margin: 20px 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .94rem; }
.prose th, .prose td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid rgba(31,29,27,.1); vertical-align: top;
}
.prose th { font-weight: 700; }
.scroller { overflow-x: auto; }

/* ── Footer ─────────────────────────────────────────────────────────── */

footer {
  padding: 40px 0 56px; border-top: 1px solid rgba(31,29,27,.1);
  margin-top: 20px; font-size: .9rem; color: var(--ink-soft);
}
footer .links { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── Narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding: 30px 0 56px; text-align: left; }
  .hero .art { order: 2; }
  .split, .split.flip { grid-template-columns: 1fr; gap: 34px; }
  .split.flip > .copy, .split.flip > .art { order: 0; }
  .phone.tilt, .phone.tilt-r { transform: none; }
  section { padding: 48px 0; }
  .trust { padding: 28px 22px; }
  .prose { padding: 30px 24px 34px; }
}

@media (max-width: 480px) {
  .swatch { width: calc(33.333% - 10px); }
  .paper-s { width: 64px; height: 64px; }
  .tape-s { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
}