/* TICKLETOAST website. Warm, quiet, a little bit toast. */
:root {
  --bg: #f6f0e5;
  --paper: #fffaf1;
  --ink: #2b231b;
  --muted: #7d6e5e;
  --line: #e6d9c6;
  --accent: #b8662b;
  --accent-soft: #f3dfc4;
  --crust-a: #d98a3d;
  --crust-b: #a65a24;
  --bread-a: #fff1cf;
  --bread-b: #f7d79a;
  --lcd-a: #cfd8b6;
  --lcd-b: #b7c49b;
  --bezel: #3a2d24;
  --max: 1040px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110e; --paper: #1d1813; --ink: #f2e9dc; --muted: #a8998a; --line: #322a22;
    --accent: #e8a468; --accent-soft: #3a2a1c; --crust-a: #c27632; --crust-b: #7f4119; --bread-a: #f6dfad; --bread-b: #dcb46c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14110e; --paper: #1d1813; --ink: #f2e9dc; --muted: #a8998a; --line: #322a22;
  --accent: #e8a468; --accent-soft: #3a2a1c; --crust-a: #c27632; --crust-b: #7f4119; --bread-a: #f6dfad; --bread-b: #dcb46c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
.wrap { width: min(var(--max), 100% - 32px); margin: 0 auto; }
.display { font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; letter-spacing: -0.02em; }

/* ---- Header ---- */
.top { padding: 22px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-weight: 800; letter-spacing: .28em; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.wordmark canvas { width: 26px; height: 26px; }
.nav { display: flex; gap: 22px; font-size: 15px; color: var(--muted); }
.nav a { text-decoration: none; }

/* ---- Hero ---- */
.hero { padding: 40px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.04; margin: 0 0 22px; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); margin: 0 0 30px; max-width: 34ch; }
.soon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px;
  background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; line-height: 1.2;
}
.badge small { display: block; font-weight: 500; opacity: .7; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.badge svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.hello { font-size: 15px; color: var(--muted); margin-left: 6px; }

/* ---- The little device in the hero ---- */
.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 50px; }
.device {
  position: relative; width: min(340px, 100%); padding: 13% 6% 9%;
  border-radius: 46% 46% 16% 16% / 30% 30% 12% 12%;
  background: radial-gradient(120% 80% at 30% 18%, rgba(255,255,255,.55), transparent 45%), linear-gradient(160deg, var(--bread-a), var(--bread-b));
  border: 13px solid var(--crust-a);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--crust-b) 35%, transparent), inset 0 -18px 30px rgba(160, 90, 30, .18), 0 2px 0 6px var(--crust-b), 0 40px 70px rgba(90, 45, 10, .25);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transform: rotate(-3deg); transition: transform .5s ease;
}
.device:hover { transform: rotate(0deg); }
.device .brandmark { font-weight: 800; letter-spacing: .3em; font-size: 10px; color: color-mix(in srgb, var(--crust-b) 70%, transparent); margin-right: -.3em; }
.bezel { width: 100%; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, #4a3a2e, var(--bezel)); box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.6); }
.lcd { position: relative; border-radius: 9px; padding: 7px; background: linear-gradient(170deg, var(--lcd-a), var(--lcd-b)); box-shadow: inset 0 3px 8px rgba(0,0,0,.28); overflow: hidden; }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.28), transparent 38%); }
#demo { display: block; width: 100%; aspect-ratio: 2 / 1; cursor: pointer; touch-action: manipulation; }
.buttons { display: flex; gap: 20px; }
.buttons span { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, #fff7ea 45%, #f1d3a6); box-shadow: 0 4px 0 #b9824f, 0 8px 14px rgba(80,40,10,.22); }
.buttons span:nth-child(2) { margin-top: 10px; }
.keyring { position: absolute; top: -66px; left: 50%; width: 96px; height: 80px; margin-left: -48px; overflow: visible; }
.keyring .coil { fill: none; stroke: url(#metal); stroke-width: 2.9; stroke-linecap: round; }
.keyring .eyelet { fill: none; stroke: url(#metal); stroke-width: 2.4; stroke-linecap: round; }
.keyring .coil-edge { fill: none; stroke: rgba(40,42,46,.55); stroke-width: 3.6; stroke-linecap: round; }
.keyring .shine { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1; stroke-linecap: round; }
.keyring .rivet { fill: url(#metal); stroke: rgba(40,42,46,.5); stroke-width: .8; }
.keyring .seat { fill: color-mix(in srgb, var(--crust-b) 70%, black); opacity: .55; }
.stage .caption { font-size: 14px; color: var(--muted); margin: 6px 0 0; text-align: center; }

/* ---- Sections ---- */
section { padding: 72px 0; }
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 10px; }
h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; margin: 0 0 14px; font-weight: 800; }
.intro { color: var(--muted); max-width: 52ch; margin: 0 0 40px; font-size: 18px; }

.steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.step canvas { width: 64px; height: 48px; display: block; margin-bottom: 14px; border-radius: 10px; }
.step h3 { margin: 0 0 6px; font-size: 19px; }
.step p { margin: 0; color: var(--muted); font-size: 16px; }
.step b { color: var(--ink); font-weight: 650; }

.forms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.form { text-align: center; }
.form canvas { width: 100%; max-width: 92px; aspect-ratio: 17 / 15; display: block; margin: 0 auto 8px; border-radius: 12px; }
.form b { display: block; font-size: 13px; letter-spacing: .12em; }
.form span { font-size: 13px; color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nots li { padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; display: flex; gap: 12px; align-items: baseline; }
.nots li::before { content: "✕"; color: var(--accent); font-weight: 700; }

.faq { display: grid; gap: 12px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 10px 0 0; }

.cta { text-align: center; padding: 88px 0 96px; }
.cta h2 { margin-bottom: 12px; }
.cta p { color: var(--muted); margin: 0 auto 26px; max-width: 46ch; }
.cta .soon { justify-content: center; }
.mail { display: inline-block; margin-top: 18px; font-weight: 650; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 20px; }
footer a { text-decoration: none; }

/* ---- Legal pages ---- */
.legal { padding: 40px 0 80px; }
.legal .wrap { max-width: 720px; }
.legal h1 { font-size: clamp(34px, 5vw, 48px); margin: 0 0 6px; font-weight: 800; }
.legal .updated { color: var(--muted); margin: 0 0 28px; font-size: 15px; }
.legal .tldr { background: var(--accent-soft); border-radius: 18px; padding: 18px 22px; margin: 0 0 32px; }
.legal .tldr p { margin: 0; }
.legal h2 { font-size: 21px; margin: 32px 0 8px; }
.legal p, .legal li { color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.legal ul { padding-left: 20px; }

@media (max-width: 860px) {
  .hero .wrap, .split { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding-top: 16px; }
  .stage { order: -1; padding-top: 70px; }
  .forms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { .device { transform: none; transition: none; } }