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

/* Headlines are set in Fraunces (SIL Open Font Licence, /assets/fraunces-OFL.txt): two small files from our own
   address, the upright one on every page and the italic one for three words on the start page. Until a file has
   arrived the headline stands in Georgia, scaled to the same width, so little moves when it swaps. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 560; font-display: swap; src: url(/assets/fraunces-560.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 480; font-display: swap; src: url(/assets/fraunces-480-italic.woff2) format("woff2"); }
@font-face { font-family: "Fraunces fallback"; src: local("Georgia"); size-adjust: 102.8%; }  /* measured: Fraunces is 2.8% wider */

: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;
  --serif: "Fraunces", "Fraunces fallback", "Iowan Old Style", Georgia, 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, h2 { font-family: var(--serif); font-weight: 560; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.35rem); line-height: 1.1; }
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: a house under our roof and its lamp, an iPhone in front of it, and a card whose clock turns.
   Together they tell a day at home: bedtime, school time, homework. The bar at the top lies over it. */
.home .top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; }
.home .brand, .home .top nav a { color: #FFF8EE; }
.home .top nav a:hover { background: rgba(255, 248, 238, .14); color: #FFF8EE; }
.home .top :focus-visible, .hero-a :focus-visible { outline-color: #FFF8EE; }
.hero-a {
  position: relative; overflow: clip; color: #FFF8EE; padding: 5.2rem 0 0;
  background: linear-gradient(168deg, #0E5F56 0%, #0B4F4A 40%, #062B28 100%);
}
@media (max-width: 34rem) { .hero-a { padding-top: 6.6rem; } }  /* the bar is two lines there */
.hero-a .grid { position: relative; display: grid; gap: clamp(1.5rem, 5vw, 3rem); align-items: start; padding-top: clamp(.6rem, 3vw, 2.2rem); }
@media (min-width: 56rem) { .hero-a .grid { grid-template-columns: 1fr 1fr; } }
.hero-a .words { padding-bottom: clamp(0rem, 4vw, 4rem); }
.hero-a .eyebrow { color: #FFD6AE; }
.hero-a h1 { color: #FFF8EE; font-size: clamp(2.5rem, 6.8vw, 4.15rem); line-height: 1.03; }
.hero-a h1 em { font-style: italic; font-weight: 480; color: #FFC998; }
.hero-a .lead { font-size: clamp(1.1rem, 3.2vw, 1.25rem); color: rgba(255, 248, 238, .92); margin: 1.1rem 0 1.6rem; max-width: 31rem; }
.hero-a .small { margin-top: 1rem; color: rgba(255, 248, 238, .88); font-size: .95rem; }
/* On teal the keys turn round: the main one is cream, the quiet one an outline. */
.hero-a .button { background: #FFF8EE; color: #0B4F4A; box-shadow: 0 4px 0 #06302C; }
.hero-a .button:active { box-shadow: 0 1px 0 #06302C; }
.hero-a .button.quiet { background: transparent; color: #FFF8EE; border: 1px solid rgba(255, 248, 238, .5); box-shadow: none; }
.hero-a .button.waiting { background: rgba(255, 248, 238, .16); color: #FFF8EE; box-shadow: none; }
.hero-a .button.waiting + .button.quiet { background: #FFF8EE; color: #0B4F4A; border: 0; box-shadow: 0 4px 0 #06302C; }
/* The light of each moment lies behind the house and nowhere else, so the words stay on deep teal all day
   (measured in the built page: every line of text is above 4.5 to 1 in all three moments). */
.scene { position: relative; justify-self: center; width: min(100%, 35rem); }
.scene .light { position: absolute; inset: 5% -32% -4% 3%; border-radius: 50%; pointer-events: none; }
.scene .light.lamp { background: radial-gradient(closest-side, rgba(242, 153, 74, .4), rgba(242, 153, 74, 0)); }
.scene .light.school { background: radial-gradient(closest-side, rgba(176, 240, 226, .62), rgba(150, 228, 212, .3) 55%, rgba(150, 228, 212, 0)); }
.scene .light.homework { inset: 42% -32% -30% 3%; background: radial-gradient(closest-side, rgba(250, 190, 128, .62), rgba(247, 183, 119, 0)); }
.scene svg { display: block; width: 100%; height: auto; }
.scene .m2, .scene .m3 { opacity: 0; }
.scene .device {
  position: absolute; right: 1%; bottom: 0; width: 35%; overflow: hidden;
  background: #06302C; border: 7px solid #06302C; border-bottom: 0; border-radius: 2.1rem 2.1rem 0 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .38);
}
.scene .device img { width: 100%; }
.scene .device img + img { position: absolute; inset: 0; opacity: 0; }
/* The card: what the apps are doing now, and until when. Its digits sit in reels that turn. */
.nowcard {
  position: absolute; z-index: 1; left: -14%; bottom: 6%;
  display: flex; align-items: center; gap: .8rem;
  background: #FFFDF9; color: #1E2B2A; border-radius: 22px; padding: .85rem 1.15rem .8rem .9rem;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .32);
}
.nowcard .tile { width: 46px; height: 46px; border-radius: 14px; background: #0B4F4A; display: grid; place-items: center; flex: none; }
.nowcard .tile svg { width: 26px; height: 26px; }
.nowcard .title { font: 700 .98rem/1.2 var(--rounded); }
.nowcard .cap { display: block; font: 500 .8rem/1.2 var(--plain); color: #56625F; margin-top: .1rem; }
.nowcard .clock { display: flex; font: 800 2.35rem/1 var(--rounded); font-variant-numeric: tabular-nums; margin-top: .15rem; }
.reel { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.reel .strip, .reel .strip span { display: block; }
.reel .strip span { height: 1em; }
.title.reel { display: block; height: 1.2em; line-height: 1.2; }
.title.reel .strip span { height: 1.2em; }
@media (max-width: 55.99rem) {
  .scene .device { width: 39%; border-radius: 1.7rem 1.7rem 0 0; }
  .nowcard { left: auto; right: 0; bottom: auto; top: -7%; padding: .6rem .85rem .55rem .65rem; gap: .6rem; border-radius: 18px; }
  .nowcard .tile { width: 38px; height: 38px; border-radius: 12px; }
  .nowcard .clock { font-size: 1.85rem; }
  .nowcard .title { font-size: .9rem; }
  .nowcard .cap { font-size: .74rem; }
}
/* The key that stops the picture: a checkbox, so it works without a script. */
.day-pause { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hero-a .demo-toggle { margin: .5rem 0 0 -1.2rem; color: rgba(255, 248, 238, .88); }
.hero-a .demo-toggle:hover { background: rgba(255, 248, 238, .14); }
.day-pause:focus-visible + .demo-toggle { outline: 3px solid #FFF8EE; outline-offset: 3px; }
.day-pause:checked + .demo-toggle .playing { display: none; }
.day-pause:checked + .demo-toggle .paused { display: inline; }
.hero-a:has(.day-pause:checked) .scene * { animation-play-state: paused; }

/* One loop of 15 seconds, three moments of 5: bedtime, school time, homework, and round again without a jump.
   Still, it is the first moment: the bedtime scene. */
@media (prefers-reduced-motion: no-preference) {
  .hero-a { --loop: 15s; --start: 2s; }
  .reel .strip { animation: reel var(--loop) cubic-bezier(.2, .8, .2, 1) var(--start) infinite; }
  .title .strip { animation-name: reel-title; }
  .clock .reel:nth-child(2) .strip { animation-delay: calc(var(--start) + .07s); }
  .clock .reel:nth-child(4) .strip { animation-delay: calc(var(--start) + .14s); }
  .clock .reel:nth-child(5) .strip { animation-delay: calc(var(--start) + .21s); }
  .nowcard .tile { animation: tile var(--loop) ease var(--start) infinite; }
  .scene .m1 { animation: moment-1 var(--loop) ease-in-out var(--start) infinite; }
  .scene .m2, .scene .device img:nth-child(2) { animation: moment-2 var(--loop) ease-in-out var(--start) infinite; }
  .scene .m3, .scene .device img:nth-child(3) { animation: moment-3 var(--loop) ease-in-out var(--start) infinite; }
  .scene .at-home { animation: at-home var(--loop) ease-in-out var(--start) infinite; }
  .scene .halo { transform-box: fill-box; transform-origin: center; animation: breathe 6s ease-in-out infinite; }
  .scene .star { animation: twinkle 5s ease-in-out infinite; }
  .scene .star:nth-of-type(3n) { animation-delay: -1.7s; }
  .scene .star:nth-of-type(3n + 1) { animation-delay: -3.1s; }
}
@keyframes reel {
  0%, 29% { transform: translateY(0); filter: blur(0); }
  31% { filter: blur(2.5px); }
  33.3%, 62% { transform: translateY(-1em); filter: blur(0); }
  64.3% { filter: blur(2.5px); }
  66.6%, 95.4% { transform: translateY(-2em); filter: blur(0); }
  97.7% { filter: blur(2.5px); }
  100% { transform: translateY(-3em); filter: blur(0); }
}
@keyframes reel-title {
  0%, 29% { transform: translateY(0); }
  33.3%, 62% { transform: translateY(-1.2em); }
  66.6%, 95.4% { transform: translateY(-2.4em); }
  100% { transform: translateY(-3.6em); }
}
@keyframes tile {
  0%, 29% { background: #0B4F4A; }
  33.3%, 62% { background: #14897D; }
  66.6%, 95.4% { background: #D9742B; }
  100% { background: #0B4F4A; }
}
@keyframes moment-1 { 0%, 28% { opacity: 1; } 33.3%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes moment-2 { 0%, 28% { opacity: 0; } 33.3%, 61% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes moment-3 { 0%, 61% { opacity: 0; } 66.6%, 95% { opacity: 1; } 100% { opacity: 0; } }
/* The family is out at school time, and the window is dark. */
@keyframes at-home { 0%, 28% { opacity: 1; } 33.3%, 61% { opacity: 0; } 66.6%, 100% { opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

.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%; }

/* Real screens, side by side: swipe on a phone, all five in view on a wide screen. */
.shots-scroll { margin-top: .4rem; }
.shots {
  display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 1.6rem max(1rem, (100vw - 68rem) / 2) 1.2rem; margin: 0; list-style: none; scrollbar-width: thin;
}
.shots li { flex: 0 0 min(66vw, 12.6rem); scroll-snap-align: center; }
.shots figure { margin: 0; }
.shots .phone { width: 100%; border-width: 6px; border-radius: 2rem; }
.shots figcaption { margin-top: .9rem; color: var(--ink2); font-size: .98rem; }
.shots figcaption strong { display: block; color: var(--ink); font: 700 1.08rem/1.25 var(--rounded); margin-bottom: .15rem; }

/* What is promised, next to the screen that shows it. */
.show { display: grid; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 48rem) { .show { grid-template-columns: .8fr 1.2fr; } }
.show .phone { width: min(100%, 17rem); }
.claims { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.claims li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; padding: 1.05rem 1.2rem; box-shadow: var(--shadow); }
.claims .tile { margin: .1rem 0 0; }
.claims h3 { margin-bottom: .25rem; }
.claims p { color: var(--ink2); }

/* The key under a moving picture that stops it. */
.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-toggle .paused { display: none; }

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: 700 1.2rem/1.15 var(--rounded); letter-spacing: -.01em; }
.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; }
}

/* How it works, as a small wiring diagram (site/build.py draws it): boxes on squared paper, joined by wires. Dashes
   run along the wires, a light travels each one, and the three times of day take turns: School, Homework, Bedtime.
   No script. The checkbox stops it, and it stays still for people who ask their device for less motion. */
.flow-box { position: relative; margin-top: 1.8rem; text-align: center; }
.flow {
  background-color: var(--card); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--shadow);
  background-image: linear-gradient(var(--sunk) 1px, transparent 1px), linear-gradient(90deg, var(--sunk) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; padding: clamp(.8rem, 2.5vw, 1.4rem); overflow: clip;
}
.flow svg { display: block; width: 100%; height: auto; }
.flow .flow-wide { display: none; }
.flow .flow-tall { width: min(100%, 23rem); margin-inline: auto; }
@media (min-width: 60rem) {
  .flow .flow-wide { display: block; }
  .flow .flow-tall { display: none; }
}
.flow text { font-family: var(--rounded); fill: var(--ink); }
.flow .box { fill: var(--card); stroke: var(--hairline); stroke-width: 1.5; }
.flow .node { filter: drop-shadow(0 6px 10px rgba(59, 42, 26, .08)); }
.flow .head.sage { fill: var(--sage-tint); }
.flow .head.teal { fill: var(--teal-tint); }
.flow .head.warm { fill: var(--apricot-tint); }
.flow .title { font-size: 15px; font-weight: 700; }
.flow .lab { font-size: 14px; font-weight: 600; }
.flow .sub { font-size: 12px; font-family: var(--plain); fill: var(--ink2); }
.flow .num { fill: var(--teal); }
.flow .numt { font-size: 12px; font-weight: 800; fill: var(--on-teal); }
.flow .ico { stroke: var(--clay); }
.flow .a1 { fill: #5B7BD5; }
.flow .a2 { fill: #D95B4A; }
.flow .a3 { fill: #2F8FA8; }
.flow .k1 { fill: #8EC5B5; }
.flow .k2 { fill: #F2994A; }
.flow .k3 { fill: #0B4F4A; }
.flow .hl { fill: var(--sunk); }
.flow .now rect { fill: #0F766E; }
.flow .now text { fill: #FFF8EE; }
.flow .now.n2 rect { fill: #FDEBDC; }
.flow .now.n2 text { fill: #1E2B2A; }
.flow .now.n3 rect { fill: #0B4F4A; }
.flow .now .tiny { font-size: 11px; font-weight: 600; opacity: .85; }
.flow .now .big { font-size: 22px; font-weight: 800; }
.flow .now .line { font-size: 12.5px; font-family: var(--plain); opacity: .9; }
.flow .wire { fill: none; stroke: var(--ink2); stroke-width: 2; opacity: .35; }
.flow .wire.flowing { stroke: var(--teal); opacity: 1; stroke-linecap: round; stroke-dasharray: 5 9; animation: flow-dash 1s linear infinite; }
.flow .port { fill: var(--card); stroke: var(--apricot); stroke-width: 2.5; }
.flow .dot { fill: var(--apricot); }
@keyframes flow-dash { to { stroke-dashoffset: -14; } }
/* The three times of day: each shows for four seconds of twelve. */
.flow .s1, .flow .s2, .flow .s3 { opacity: 0; animation: flow-scene 12s infinite; }
.flow .s2 { animation-delay: 4s; }
.flow .s3 { animation-delay: 8s; }
@keyframes flow-scene { 0% { opacity: 0; } 3% { opacity: 1; } 33.3% { opacity: 1; } 36.3% { opacity: 0; } 100% { opacity: 0; } }
.flow-pause { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flow-pause:checked ~ .flow :is(.flowing, .s1, .s2, .s3) { animation-play-state: paused; }
.flow-pause:checked ~ .flow .dot { display: none; }
.flow-pause:focus-visible ~ .demo-toggle { outline: 3px solid var(--teal); outline-offset: 3px; }
.flow-pause:checked ~ .demo-toggle .playing { display: none; }
.flow-pause:checked ~ .demo-toggle .paused { display: inline; }
@media (prefers-color-scheme: dark) {
  .flow .node { filter: none; }
}

/* Things move as the page is scrolled: cards and the diagram's boxes rise into place, the wires appear after the
   boxes they join. This is tied to the scroll position by the browser
   itself (no script), so it follows the finger both ways. Browsers that cannot do it, and people who ask for less
   motion, get everything simply in its place. */
@keyframes rise-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cards .card, .steps li, .plans .plan { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    :is(.cards .card, .steps li, .plans .plan):nth-child(2) { animation-range: entry 12% entry 85%; }
    :is(.cards .card, .steps li, .plans .plan):nth-child(3) { animation-range: entry 24% entry 100%; }
    .flow { view-timeline-name: --flow; }
    .flow .rise { animation: rise-in linear both; animation-timeline: --flow; animation-range: entry 5% entry 45%; }
    .flow .r2 { animation-range: entry 25% entry 65%; }
    .flow .r3 { animation-range: entry 45% entry 85%; }
    .flow .r4 { animation-range: entry 55% entry 95%; }
    .flow .wires { animation: fade-in linear both; animation-timeline: --flow; animation-range: entry 70% cover 32%; }
    /* The screens in the row rise one after another. */
    .shots li, .claims li { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .show .phone { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}

.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); }
.band.dark { background: #0B4F4A; color: #FFF8EE; }
.band.dark h2 { color: #FFF8EE; }
.band.dark .intro { color: rgba(255, 248, 238, .86); }
.band.dark .never li { background: rgba(255, 248, 238, .1); border-color: rgba(255, 248, 238, .22); color: #FFF8EE; }
.band.dark .never li::before { content: "\00d7"; color: #F2994A; font-weight: 800; margin-right: .45rem; }

/* 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; }
.plan h2 { font-family: var(--rounded); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }  /* a plan's name, as on the start page */
.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 diagram stays on its first time of day, with plain wires. */
  .flow .wire.flowing, .flow .s1, .flow .s2, .flow .s3 { animation: none; }
  .flow .s1 { opacity: 1; }
  .flow .dot, .flow-box .demo-toggle, .flow-pause { display: none; }
  .day-pause, .hero-a .demo-toggle { display: none; }  /* nothing moves, so there is nothing to stop */
}