/* Lampworth's website. The app's own colours ("Hearth"): oat paper, deep teal for the house, apricot lamplight.
   No scripts and no web fonts: the page is this file, the words and a few pictures. */

:root {
  --oat: #F7F2EA;
  --card: #FFFDF9;
  --sunk: #F0E9DE;
  --hairline: #E9E0D2;
  --ink: #1E2B2A;
  --ink2: #56625F;
  --teal: #0F766E;
  --teal-edge: #0B4F4A;
  --on-teal: #FFFFFF;
  --teal-tint: #E2F0EC;
  --clay: #A8481F;
  --apricot: #F2994A;
  --apricot-tint: #FDEBDC;
  --sage-ink: #2F6B55;
  --sage-tint: #E6F2EC;
  --shadow: 0 12px 28px rgba(59, 42, 26, .07), 0 2px 4px rgba(59, 42, 26, .05);
  /* Rounded where the system has it (Apple devices in Safari); elsewhere the system's own face, in the same weights. */
  --rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --plain: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --oat: #101514;
    --card: #1A2120;
    --sunk: #232B2A;
    --hairline: #2A3231;
    --ink: #F4EFE7;
    --ink2: #AEB7B3;
    --teal: #2DD4BF;
    --teal-edge: #1A8F80;
    --on-teal: #0B2F2B;
    --teal-tint: #12302C;
    --clay: #FFB27A;
    --apricot: #FFB27A;
    --apricot-tint: #3A2619;
    --sage-ink: #8CC5B0;
    --sage-tint: #16302A;
    --shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--oat);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--plain);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--rounded); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0; }

.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.narrow { width: min(100% - 2rem, 44rem); margin-inline: auto; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--teal); color: var(--on-teal); padding: .6rem 1rem; border-radius: 12px; font-weight: 700;
}
.skip:focus { top: 1rem; }

/* The bar at the top */
.top { padding: .9rem 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink);
  font: 800 1.3rem/1 var(--rounded);
}
.brand img { border-radius: 9px; }
.top ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.top nav a {
  display: inline-block; padding: .55rem .8rem; border-radius: 999px; text-decoration: none;
  color: var(--ink); font: 600 1rem/1.2 var(--rounded);
}
.top nav a:hover, .top nav a[aria-current="page"] { background: var(--teal-tint); color: var(--teal); }
/* On a phone the bar stays one line: the name, and the three pages. "How it works" is further down the same page. */
@media (max-width: 34rem) {
  .top .wrap { gap: .1rem .5rem; }  /* on the narrowest screens the links drop below the name */
  .brand { font-size: 1.15rem; gap: .5rem; }
  .top ul { flex-wrap: nowrap; gap: 0; }
  .top li:first-child { display: none; }
  .top nav a { padding: .55rem .65rem; font-size: .95rem; }
}

/* Buttons: a face on a darker edge, like the keys in the app */
.button {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--teal); color: var(--on-teal); border: 0; border-radius: 16px;
  padding: .95rem 1.5rem; font: 700 1.0625rem/1.2 var(--rounded);
  box-shadow: 0 4px 0 var(--teal-edge);
}
.button:hover { filter: brightness(1.06); }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--teal-edge); }
.button.quiet { background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--hairline); border: 1px solid var(--hairline); }
/* Until the app is in the store: a small note, and the button beside it becomes the one thing to do. */
.button.waiting {
  background: var(--apricot-tint); color: var(--clay); box-shadow: none; cursor: default;
  border-radius: 999px; padding: .5rem 1rem; font-size: .95rem;
}
.button.waiting + .button.quiet { background: var(--teal); color: var(--on-teal); border: 0; box-shadow: 0 4px 0 var(--teal-edge); }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 34rem) {
  .actions { flex-direction: column; align-items: stretch; gap: 1rem; }
  .actions .waiting { align-self: flex-start; }
}

/* The first screenful */
.hero { padding: clamp(1.5rem, 5vw, 4rem) 0 clamp(2rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(1.8rem, 5vw, 2.5rem); align-items: center; }
@media (min-width: 56rem) { .hero .wrap { grid-template-columns: 1.1fr .9fr; } }
.hero p.lead { font-size: clamp(1.1rem, 3.2vw, 1.2rem); color: var(--ink2); margin: 1.1rem 0 1.6rem; max-width: 34rem; }
.hero .small { margin-top: 1rem; color: var(--ink2); font-size: .95rem; }
.phone {
  justify-self: center; width: min(100%, 19rem); border-radius: 2.6rem; overflow: hidden;
  border: 8px solid #1E2B2A; background: #1E2B2A; box-shadow: var(--shadow);
}
.phone img { width: 100%; }

/* The phone that shows how it works: three screens in six seconds, with no script. The first picture is always
   there; the other two fade in over it in turn, and a line below says which step it is. The checkbox stops it, and
   it does not move at all for people who ask their device for less motion. */
.demo { justify-self: center; width: min(100%, 17.5rem); position: relative; isolation: isolate; text-align: center; }
@media (min-width: 56rem) { .demo { width: min(100%, 19rem); } }
.demo::before {
  content: ""; position: absolute; z-index: -1; inset: 6% -22% 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 153, 74, .32), rgba(242, 153, 74, 0));
}
.demo .phone { position: relative; width: 100%; }
.demo .f2, .demo .f3 { position: absolute; inset: 0; opacity: 0; animation: demo-show 6s infinite; }
.demo .f2 { animation-delay: 2s; }
.demo .f3 { animation-delay: 4s; }
@keyframes demo-show { 0% { opacity: 0; } 5% { opacity: 1; } 33.3% { opacity: 1; } 38.3% { opacity: 0; } 100% { opacity: 0; } }
.demo-steps { list-style: none; margin: 1.1rem 0 0; padding: 0; position: relative; height: 2.2rem; font: 700 1.05rem/1.2 var(--rounded); }
.demo-steps li { position: absolute; inset: 0; display: flex; gap: .55rem; align-items: center; justify-content: center; opacity: 0; animation: demo-say 6s infinite; }
.demo-steps li:nth-child(2) { animation-delay: 2s; }
.demo-steps li:nth-child(3) { animation-delay: 4s; }
.demo-steps span {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: none;
  background: var(--teal); color: var(--on-teal); font-size: .9rem;
}
@keyframes demo-say { 0% { opacity: 0; } 4% { opacity: 1; } 29% { opacity: 1; } 33.3% { opacity: 0; } 100% { opacity: 0; } }
.demo-pause { position: absolute; opacity: 0; width: 1px; height: 1px; }
.demo-pause:checked ~ .phone .frame, .demo-pause:checked ~ .demo-steps li { animation-play-state: paused; }
.demo-toggle {
  display: inline-block; margin-top: .3rem; padding: .85rem 1.2rem; border-radius: 999px; cursor: pointer;
  color: var(--ink2); font: 600 .9rem/1.2 var(--rounded);
}
.demo-toggle:hover { background: var(--sunk); }
.demo-pause:focus-visible ~ .demo-toggle { outline: 3px solid var(--teal); outline-offset: 3px; }
.demo-toggle .paused, .demo-pause:checked ~ .demo-toggle .playing { display: none; }
.demo-pause:checked ~ .demo-toggle .paused { display: inline; }

section { padding: clamp(2rem, 6vw, 4rem) 0; }
.eyebrow { font: 700 .85rem/1 var(--rounded); color: var(--clay); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .7rem; }
.intro { color: var(--ink2); font-size: 1.1rem; margin-top: .8rem; max-width: 40rem; }

.cards { display: grid; gap: 1rem; margin-top: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; padding: 1.4rem;
  box-shadow: var(--shadow);
}
.card h3, .card h2 { margin-bottom: .4rem; }
/* A card's title is an h2 on the guides page (it follows the page's h1), drawn like the h3 on the start page. */
.card h2 { font-size: 1.2rem; font-weight: 700; }
.card p { color: var(--ink2); }
.tile {
  width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; margin-bottom: .9rem;
  background: var(--teal-tint); color: var(--teal);
}
.tile.warm { background: var(--apricot-tint); color: var(--clay); }
.tile.soft { background: var(--sage-tint); color: var(--sage-ink); }
.tile svg { width: 1.4rem; height: 1.4rem; }
/* On a phone a card is a row: its mark on the left, its words beside it. */
@media (max-width: 34rem) {
  .card:has(> .tile) { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.15rem 1.2rem; }
  .card > .tile { grid-row: span 2; margin: .1rem 0 0; }
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; padding: 1.4rem; box-shadow: var(--shadow); }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--teal); color: var(--on-teal); font: 800 1.05rem/1 var(--rounded); margin-bottom: .8rem;
}
.steps p { color: var(--ink2); margin-top: .3rem; }
@media (max-width: 34rem) {
  .steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.15rem 1.2rem; }
  .steps li::before { grid-row: span 2; margin: .1rem 0 0; }
}

.band { background: var(--teal-tint); }
.never { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.never li { background: var(--card); border: 1px solid var(--hairline); border-radius: 999px; padding: .5rem 1rem; font: 600 1rem/1.2 var(--rounded); }

/* Plans */
.plans { display: grid; gap: 1rem; margin-top: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.plan { background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; padding: 1.5rem; box-shadow: var(--shadow); }
.plan h2, .plan h3 { font-size: 1.7rem; }
.chip { display: inline-block; border-radius: 999px; padding: .25rem .7rem; font: 700 .8rem/1.2 var(--rounded); background: var(--teal-tint); color: var(--teal); margin-left: .4rem; vertical-align: middle; }
.chip.warm { background: var(--apricot-tint); color: var(--clay); }
.chip.soft { background: var(--sage-tint); color: var(--sage-ink); }
.price { font: 800 2rem/1.1 var(--rounded); margin: .9rem 0 .2rem; }
.price small { font: 600 1rem/1.3 var(--plain); color: var(--ink2); display: block; margin-top: .3rem; }
.plan ul { padding: 0; margin: 1rem 0 0; list-style: none; }
.plan li { padding: .55rem 0 .55rem 1.7rem; border-top: 1px solid var(--hairline); position: relative; }
.plan li::before { content: ""; position: absolute; left: .15rem; top: 1.05rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--teal); }
.plan.pro li::before { background: var(--apricot); }
.plan.max li::before { background: var(--sage-ink); }
.plan li span { display: block; color: var(--ink2); font-size: .95rem; }

.promise { background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; padding: 1.5rem; margin-top: 1.5rem; }
.promise ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.promise li { margin: .35rem 0; }

/* Questions and answers, legal pages */
.prose h1 { margin-bottom: .8rem; }
.prose h2 { font-size: 1.45rem; margin: 2.2rem 0 .6rem; }
.prose h3 { margin: 1.4rem 0 .3rem; }
.prose p, .prose ul, .prose ol { margin: .7rem 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .3rem 0; }
.prose .meta { color: var(--ink2); }
details { background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 0 1.2rem; margin: .7rem 0; }
summary { cursor: pointer; padding: 1rem 0; font: 700 1.1rem/1.3 var(--rounded); }
details[open] summary { border-bottom: 1px solid var(--hairline); }
details p { margin: .9rem 0; color: var(--ink2); }

/* The two questions */
form.survey fieldset { border: 1px solid var(--hairline); background: var(--card); border-radius: 24px; padding: 1.2rem 1.4rem 1rem; margin: 1.2rem 0; }
/* A legend normally sits on the box's edge; floated, it becomes the box's first line, even when it wraps. */
form.survey legend { float: left; width: 100%; font: 800 1.2rem/1.3 var(--rounded); padding: 0 0 .5rem; }
form.survey label { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem .2rem; border-top: 1px solid var(--hairline); cursor: pointer; }
form.survey label:first-of-type { clear: both; }
form.survey input[type="radio"] { width: 1.35rem; height: 1.35rem; margin: .15rem 0 0; accent-color: var(--teal); flex: none; }
form.survey label > span { display: block; }
form.survey label strong { display: block; font: 700 1.05rem/1.35 var(--rounded); }
form.survey label span span { display: block; color: var(--ink2); font-size: .95rem; }
.trap { position: absolute; left: -100rem; }
.note { color: var(--ink2); font-size: .95rem; margin-top: 1rem; }

.more { margin-top: 1.4rem; }

.closing { text-align: center; }
.closing .intro { margin-inline: auto; }
.closing .actions { justify-content: center; margin-top: 1.5rem; }
.closing .actions .waiting { align-self: center; }

footer { border-top: 1px solid var(--hairline); padding: 2rem 0 3rem; color: var(--ink2); font-size: .95rem; }
footer .wrap { display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: space-between; }
footer ul { list-style: none; display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0; padding: 0; }
footer a { color: var(--ink2); }
/* Lampworth elsewhere: plain links, each with that site's own mark. */
footer .social { gap: .15rem; margin: .5rem 0 0 -11px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.social a:hover { background: var(--teal-tint); color: var(--teal); }
.social svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button:active { transform: none; }
  /* The phone stays on its first picture, and the three steps are simply listed. */
  .demo .frame, .demo-steps li { animation: none; }
  .demo .f2, .demo .f3, .demo-toggle, .demo-pause { display: none; }
  .demo-steps { height: auto; display: grid; gap: .5rem; }
  .demo-steps li { position: static; opacity: 1; justify-content: flex-start; }
}