/* wallday.app (Design, Oct 31 2026): the wall's linen and ink, Quicksand for the titles, Inter for the text. Tokens on :root; dark by prefers-color-scheme, or by data-theme (?dark, ?light) for reviews. */
@font-face { font-family: "Quicksand"; src: url("/fonts/quicksand_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("/fonts/quicksand_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
:root {
  --linen: #EFEAE0; --paper: #FBF9F4; --ink: #1C2324; --soft: #5F6668; --hair: #D9D3C5; --orange: #FF7043;
  --shadow: 0 1px 2px rgba(28,35,36,.08), 0 16px 40px rgba(28,35,36,.08); --frame: #1C2324; --frame-edge: #3A4446;
  --display: "Quicksand", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --linen: #17202A; --paper: #1F2B36; --ink: #F3F5F7; --soft: #B9C5CE; --hair: #34495A; --shadow: none; --frame: #0C1116; --frame-edge: #34495A; color-scheme: dark; } }
:root[data-theme="dark"] { --linen: #17202A; --paper: #1F2B36; --ink: #F3F5F7; --soft: #B9C5CE; --hair: #34495A; --shadow: none; --frame: #0C1116; --frame-edge: #34495A; color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--linen); }
body { margin: 0; background: var(--linen); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--ink); }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 24px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
/* The header: the A6 icon and the name, exactly as on Google's consent screen; Privacy on the right. */
header { padding-block: 24px; }
header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand span { font: 500 28px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
nav { margin-left: auto; display: flex; gap: 24px; font-size: 15px; }
/* Home */
.hero { padding-block: 40px 24px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 56px); max-width: 16em; }
.hero .lead { font-size: clamp(17px, 2vw, 21px); color: var(--soft); max-width: 36em; margin-top: 16px; }
.wall { margin-top: 40px; }
/* The tablet's frame: the listing's first capture, an ink edge, a 16:10 screen. */
.tablet { background: var(--frame); border: 1.5px solid var(--frame-edge); border-radius: 24px; padding: 14px; box-shadow: var(--shadow); max-width: 960px; margin-inline: auto; }
.tablet img { border-radius: 10px; aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: #000; }
.tablet img.dark { display: none; }
:root[data-theme="dark"] .tablet img.light { display: none; } :root[data-theme="dark"] .tablet img.dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tablet img.light { display: none; } :root:not([data-theme="light"]) .tablet img.dark { display: block; } }
.caption { text-align: center; color: var(--soft); font-size: 15px; margin-top: 16px; }
/* What the wall shows: a block per place on a hairline, as many columns as places (Lists joins with its tab). */
.three { padding-block: 48px; margin-top: 40px; border-top: 1px solid var(--hair); }
.three .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 32px; }
.three h2 { font-size: 22px; }
.three p { color: var(--soft); margin-top: 8px; }
/* What Wallday reads: the sentence Google reads, in full ink, then the link. */
.data { padding-block: 40px; border-top: 1px solid var(--hair); }
.data h2 { font-size: 24px; }
.data p { color: var(--ink); margin-top: 8px; max-width: 44em; }
.data p a { color: var(--ink); }
/* Google Play: words until the listing is out, then the official badge; the Free line beside. */
.store { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.store p { color: var(--soft); }
.store .soon { font: 500 21px/1.3 var(--display); color: var(--ink); }
footer { padding-block: 32px 48px; border-top: 1px solid var(--hair); color: var(--soft); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* Privacy and terms: one reading column, 44 em, full ink. */
.doc { max-width: 44em; padding-block: 24px 64px; overflow-wrap: break-word; }
.doc h1 { font-size: clamp(30px, 4vw, 40px); }
.doc .meta { color: var(--soft); margin-top: 12px; font-size: 15px; }
.doc h2 { font-size: 24px; margin-top: 2em; }
.doc p, .doc li { margin-top: 0.8em; }
.doc ul { padding-left: 1.2em; margin: 0; }
.doc li::marker { color: var(--soft); }
@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }
  header { padding-block: 16px; } .brand span { font-size: 24px; } .brand img { width: 32px; height: 32px; }
  .hero { padding-block: 24px 16px; } .wall { margin-top: 28px; }
  .tablet { padding: 8px; border-radius: 16px; } .tablet img { border-radius: 6px; }
  .three .cols { grid-template-columns: 1fr; gap: 24px; } .three { padding-block: 32px; margin-top: 28px; }
  .data { padding-block: 28px; }
}
/* At 200 % on a phone the header wraps: Privacy under the name, the name a size down. */
@media (max-width: 359px) { .brand span { font-size: 22px; } }