/* LuxMeter landing page, "mockup A · Toolbox". Hand-written and committed (not generated); the pages that use it
   are generated by tool/landing_page.dart. The Hosting CSP is style-src 'self': no inline style anywhere.
   Colours are the app's Field Lab (B) tokens, light and the derived dark, plus the toolbox materials and the try-it
   panel's night tent (always dark, in either page theme). */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Outfit-Regular.woff2") format("woff2") }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Outfit-Medium.woff2") format("woff2") }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Outfit-SemiBold.woff2") format("woff2") }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Outfit-Bold.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2") }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/JetBrainsMono-SemiBold.woff2") format("woff2") }

:root {
  color-scheme: light dark;
  --bg: #F2EDE2; --bg2: #EAE3D4; --card: #FFFDF8; --card2: #F7F2E7;
  --ink: #1C1D16; --muted: #4F4C3D; --faint: #6B6752; --line: #DDD4C0; --line2: #C5BBA3;
  --green: #17663C; --green-d: #0F4D2C; --green-tint: #DDEFD9; --clay: #B4501A; --blue: #2A62A8; --ochre: #84600F;
  --light-on: #EDB94C; --face: #FFFDF8; --face-edge: #C5BBA3; --dial-lux: #A3271B; --dial-cover: #16170F;
  --bezel-hi: #6E6C5F; --bezel-lo: #3A392F; --on-accent: #FFFDF8; --window-ink: #FFFDF8; --dial-glow: rgb(255 255 255 / .5);
  --tb-lid-top: #6A8A5B; --tb-lid-bot: #4A5E40; --tb-body-top: #587049; --tb-body-bot: #3A4A30;
  --tb-metal-hi: #E4E1D8; --tb-metal-lo: #9C988C; --tb-plate-hi: #D9D6CE; --tb-plate-lo: #A9A59A; --tb-plate-ink: #1C1D15;
  --tb-mouth: #090A06; --tb-wall-top: #23291C; --tb-wall-bot: #0A0B07; --tb-glow: 214 154 46; --tb-frame: #3A3A27;
  --tb-shadow: rgb(0 0 0 / .45);
  --f-display: "Outfit", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0F100A; --bg2: #17180F; --card: #1C1D15; --card2: #25261C;
  --ink: #F2EDE2; --muted: #CFC6AE; --faint: #A39B84; --line: #38372A; --line2: #57533F;
  --green: #72CB8C; --green-d: #95DDA9; --green-tint: #1D3524; --clay: #E88A4E; --blue: #7CA9E6; --ochre: #E3B25A;
  --light-on: #E5B04A; --face: #2B2C1F; --face-edge: #15160F; --dial-lux: #EF6F62; --dial-cover: #0B0C07;
  --bezel-hi: #4A4B3E; --bezel-lo: #22231A; --on-accent: #0F100A; --window-ink: #FFFDF8;
  --tb-lid-top: #56704A; --tb-lid-bot: #3A4A32; --tb-body-top: #46593B; --tb-body-bot: #2C3823;
  --tb-glow: 227 178 90; --tb-frame: #2B2C1F; --tb-shadow: rgb(0 0 0 / .8) } }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-display); font-size: 16px; line-height: 1.55 }
h1, h2, h3 { text-wrap: balance; margin: 0; hyphens: auto; overflow-wrap: break-word }
p { margin: 0 }
a { color: inherit }
button { font: inherit }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* Shared bits */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .22em; color: var(--muted) }
.eyebrow svg { width: 16px; height: 16px }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid var(--ink); cursor: pointer; background: transparent; color: var(--ink) }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--on-accent) }
.btn small { font-weight: 400; opacity: .8 }
/* Not on Google Play yet: a notice that looks like the badge, not a control. */
.btn.badge { cursor: default; user-select: none }
.ctas { display: flex; flex-wrap: wrap; gap: 12px }
.note { font-family: var(--f-mono); font-size: 12px; color: var(--faint) }
.cta-note { margin-top: 14px }
footer.foot { border-top: 1px solid var(--line); padding-block: 28px; font-size: 14px; color: var(--faint) }
footer.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between }
footer.foot .legal { display: flex; flex-wrap: wrap; gap: 8px 20px }
footer.foot .langs { margin-top: 16px; justify-content: flex-start; align-items: baseline; gap: 6px 16px }
footer.foot .langs nav { display: flex; flex-wrap: wrap; gap: 6px 14px }
footer.foot .langs a { text-decoration: none; color: var(--muted) }
footer.foot .langs a:hover { text-decoration: underline }
footer.foot .langs a[aria-current="page"] { color: var(--ink); font-weight: 600 }

/* ---------- Toolbox reveal (port of lib/widgets/onboarding/toolbox_reveal.dart) ---------- */
.tb-frame { position: relative; width: 100%; max-width: 440px; aspect-ratio: 390 / 362; cursor: pointer }
/* landing.js scales the 390x362 stage to the frame; these steps are the scale before it runs (or without it). */
.tb-stage { position: absolute; left: 0; top: 0; width: 390px; height: 362px; transform-origin: 0 0; transform: scale(1.1282) }
@media (max-width: 471px) { .tb-stage { transform: scale(.88) } }
@media (max-width: 390px) { .tb-stage { transform: scale(.78) } }
.tb-stage > *, .tb-inner > * { position: absolute }
.tb-glow { left: 20px; top: 20px; width: 350px; height: 300px;
  background: radial-gradient(ellipse 88% 88% at 50% 66%, rgb(var(--tb-glow) / .5) 0%, rgb(var(--tb-glow) / .14) 36%, rgb(var(--tb-glow) / 0) 62%) }
.tb-lid { left: 66px; top: 194px; width: 258px; height: 62px; transform-origin: 50% 0;
  border-radius: 14px 14px 4px 4px; background: linear-gradient(var(--tb-lid-top), var(--tb-lid-bot)); border-top: 1px solid rgb(255 255 255 / .18) }
.tb-lid::after { content: ""; position: absolute; left: 81px; top: 16px; width: 96px; height: 12px; border-radius: 8px; background: linear-gradient(var(--tb-metal-hi), var(--tb-metal-lo)) }
.tb-inner { left: 0; top: 0; width: 390px; height: 254px; overflow: hidden }
.tb-wall { left: 74px; top: 222px; width: 242px; height: 32px; border-radius: 10px 10px 0 0; background: linear-gradient(var(--tb-wall-top), var(--tb-wall-bot)); border-top: 2px solid rgb(255 255 255 / .06) }
.tb-card { left: 111px; top: 36px; width: 168px; height: 214px; border-radius: 18px; border: 3px solid var(--tb-frame); background: var(--bg); overflow: hidden; box-shadow: 0 12px 28px -10px var(--tb-shadow) }
.tb-shade { left: 70px; top: 214px; width: 250px; height: 40px; background: linear-gradient(rgb(9 10 6 / 0), rgb(9 10 6 / .85)); pointer-events: none }
.tb-rim { left: 70px; top: 248px; width: 250px; height: 12px; border-radius: 4px; background: var(--tb-mouth) }
.tb-body { left: 70px; top: 256px; width: 250px; height: 100px; border-radius: 4px 4px 18px 18px; background: linear-gradient(var(--tb-body-top), var(--tb-body-bot));
  border-top: 1px solid rgb(255 255 255 / .12); box-shadow: 0 18px 30px -12px var(--tb-shadow); display: grid; place-items: center }
.tb-plate { padding: 6px 22px; border-radius: 10px; background: linear-gradient(var(--tb-plate-hi), var(--tb-plate-lo)); border-top: 1px solid rgb(255 255 255 / .7);
  font: 600 11px/1.2 var(--f-mono); letter-spacing: 3px; color: var(--tb-plate-ink) }
.tb-latch { top: 244px; width: 22px; height: 26px; border-radius: 4px; background: linear-gradient(var(--tb-metal-hi), var(--tb-metal-lo)); transform-origin: 50% 0 }
.tb-latch-l { left: 100px }
.tb-latch-r { left: 268px }
.tb-replay { position: absolute; right: 0; bottom: 0; font: 500 12px var(--f-mono); color: var(--faint); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer }

@keyframes tb-latch { to { transform: translateY(7px) scaleY(.35); opacity: .7 } }
@keyframes tb-lid { to { transform: perspective(560px) rotateX(-112deg) } }
@keyframes tb-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tb-glow { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: scale(1) } }
@keyframes tb-rise { from { transform: translateY(224px) } to { transform: translateY(0) } }
/* The headline only slides; it never fades, so it is readable in the first frame. */
@keyframes tb-in-top { from { transform: translateY(-8px) } to { transform: none } }
/* Resting state (closed box) is the first frame; .play runs the reveal; .done shows the end state at once. */
.tb .tb-glow, .tb .tb-wall, .tb .tb-shade { opacity: 0 }
.tb .tb-card { transform: translateY(224px) }
.tb.play .tb-latch { animation: tb-latch var(--latch-d) cubic-bezier(.42,0,1,1) var(--latch-s) both }
.tb.play .tb-lid { animation: tb-lid var(--lid-d) cubic-bezier(.3,.7,.2,1) var(--lid-s) both }
.tb.play .tb-wall, .tb.play .tb-shade { animation: tb-fade var(--wall-d) ease-out var(--wall-s) both }
.tb.play .tb-glow { animation: tb-glow var(--glow-d) ease-out var(--glow-s) both }
.tb.play .tb-card { animation: tb-rise var(--card-d) cubic-bezier(.2,.9,.3,1.15) var(--card-s) both }
.tb.done .tb-latch { transform: translateY(7px) scaleY(.35); opacity: .7 }
.tb.done .tb-lid { transform: perspective(560px) rotateX(-112deg) }
.tb.done .tb-glow, .tb.done .tb-wall, .tb.done .tb-shade { opacity: 1 }
.tb.done .tb-card { transform: none }
.reveal-top.play { animation: tb-in-top var(--d) ease-out var(--s) both }

/* The screen card inside the toolbox */
.mini { height: 100%; display: flex; flex-direction: column; padding: 10px 10px 12px; gap: 6px; background: radial-gradient(circle at 50% 30%, var(--card), var(--bg)) }
.mini .top { display: flex; justify-content: space-between; gap: 6px; font: 500 8px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint) }
.mini svg { width: 100%; height: auto }
.mini .val { text-align: center; font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums }
.mini .unit { text-align: center; font: 9px var(--f-mono); color: var(--muted) }
.mini .chip { align-self: center; font: 600 9px var(--f-mono); text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--green-tint); color: var(--green-d) }

/* ---------- A · Toolbox ---------- */
.a-hero { padding-block: 56px 40px; background: radial-gradient(ellipse 70% 80% at 72% 40%, var(--card), var(--bg) 70%); overflow-x: clip }
[dir="rtl"] .a-hero { background: radial-gradient(ellipse 70% 80% at 28% 40%, var(--card), var(--bg) 70%) }
.a-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px 48px; align-items: center }
.a-hero h1 { font-size: clamp(38px, 5.6vw, 66px); line-height: 1.02; font-weight: 700; letter-spacing: -.02em; margin-block: 18px 20px }
.a-hero h1 em { font-style: normal; color: var(--green) }
.a-hero .lede { font-size: 19px; color: var(--muted); max-width: 34em; margin-bottom: 28px }
.a-hero .copy { min-width: 0 }
.a-hero .art { display: grid; justify-items: center; gap: 8px; min-width: 0 }
.a-strip { border-block: 1px solid var(--line); background: var(--card) }
.a-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 22px; gap: 16px }
.a-strip div { min-width: 0 }
.a-strip b { display: block; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums }
.a-strip span { font-size: 13px; color: var(--faint) }
.a-tools { padding-block: 64px }
.a-tools h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -.01em; max-width: 18em; margin-bottom: 36px }
.a-tools .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.tool { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 10px; align-content: start; min-width: 0 }
.tool .tag { font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green) }
.tool h3 { font-size: 21px; font-weight: 600 }
.tool p { color: var(--muted); font-size: 15px }
.tool .viz { height: 96px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); overflow: hidden }
.tool .viz svg { width: 100%; height: 100% }
.a-platform { padding-block: 0 72px }
.a-platform .wrap > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
.plat { border-top: 2px solid var(--ink); padding-top: 16px; display: grid; gap: 6px; min-width: 0 }
.plat h3 { font-size: 19px; font-weight: 600 }
.plat p { color: var(--muted); font-size: 15px; max-width: 40em }

/* ---------- Try-it panel (#try): mockup B's night tent at about 75 % ---------- */
.a-demo { padding-block: 44px 0 }
.a-demo h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -.01em; max-width: 18em; margin-bottom: 12px }
.a-demo .lede { color: var(--muted); font-size: 17px; max-width: 40em; margin-bottom: 28px }
/* The bench redefines the page tokens with the night palette, so the shared vintage dial and the text in it turn
   dark without a second implementation. */
.d-bench {
  --ink: #F2EDE2; --muted: #CFC6AE; --faint: #A39B84; --line: #38372A; --green: #72CB8C; --ochre: #E3B25A;
  --clay: #E88A4E; --blue: #7CA9E6; --face: #2B2C1F; --face-edge: #15160F; --dial-lux: #EF6F62; --dial-cover: #0B0C07;
  --bezel-hi: #4A4B3E; --bezel-lo: #22231A; --window-ink: #F2EDE2; --dial-glow: rgb(229 176 74 / .10);
  --n-bg: #0B0C07; --n-bg2: #15160F;
  color-scheme: dark; color: var(--ink); max-width: 840px; padding: 16px; border-radius: 24px;
  background: radial-gradient(ellipse 60% 55% at 30% 0%, rgb(229 176 74 / .16), transparent 70%), var(--n-bg);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch }
.d-dial, .d-ctrl { background: var(--n-bg2); border: 1px solid var(--line); border-radius: 18px; min-width: 0 }
.d-dial { padding: 14px; display: grid; gap: 10px; align-content: center }
.d-face { max-width: 420px }
.d-face svg { width: 100%; height: auto; display: block }
.d-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 11px var(--f-mono); color: var(--faint) }
.d-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--ink); vertical-align: middle; margin-inline-end: 6px }
.d-legend i.lux { border-top: 2px dashed var(--dial-lux) }
.d-legend i.tgt { border-top: 4px solid var(--green) }
.d-ctrl { padding: 16px; display: grid; gap: 16px; align-content: start }
.d-ctrl h3 { font: 600 11px var(--f-mono); letter-spacing: .16em; color: var(--faint); text-transform: uppercase; margin-bottom: 8px }
.d-fx { display: grid; gap: 6px }
.d-fx button { text-align: start; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: pointer }
.d-fx button > span { font: 11px var(--f-mono); color: var(--faint); align-self: center }
.d-fx button[aria-pressed="true"] { border-color: var(--ochre); color: var(--ink); background: rgb(229 176 74 / .08) }
.d-fx button:focus-visible, .d-ctrl input:focus-visible { outline-color: var(--ochre) }
.d-ctrl input[type="range"] { width: 100%; margin: 6px 0 0; accent-color: var(--ochre) }
.d-ctrl label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted) }
.d-cm { font-family: var(--f-mono); font-variant-numeric: tabular-nums }
.d-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--line); padding-top: 12px }
.d-read div { min-width: 0 }
.d-read b { display: block; font: 600 21px var(--f-mono); font-variant-numeric: tabular-nums }
.d-read div > span { font-size: 12px; color: var(--faint) }
.d-zone { grid-column: 1 / -1; justify-self: start; font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; background: rgb(255 255 255 / .06) }
.d-zone[data-zone="under"] { color: var(--blue) }
.d-zone[data-zone="target"] { color: var(--green) }
.d-zone[data-zone="high"] { color: var(--ochre) }
.d-zone[data-zone="over"] { color: var(--clay) }
.d-ctrl .note { font-size: 11px }

/* ---------- Everything in the box (#box) ---------- */
.a-box { padding-block: 0 64px }
.a-box h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -.01em; max-width: 18em; margin-bottom: 28px }
.box-group + .box-group { margin-top: 28px }
.box-group h3 { font: 600 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 12px }
.box-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px }
.box-group li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0 }
.box-group h4 { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: break-word; hyphens: auto }
.box-group p { color: var(--muted); font-size: 14px; line-height: 1.45 }
.box-group .os { justify-self: start; margin-top: 4px; font: 600 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: var(--green-tint); color: var(--green-d) }

/* Scripts that join their letters (Arabic) or stack marks (Devanagari) break under letter-spacing; the negative
   tracking of the Latin display sizes also crowds them. */
:is(:lang(ar), :lang(hi)) :is(.tool .tag, .mini .top, .a-hero h1, .a-tools h2, .a-demo h2, .a-box h2, .d-ctrl h3,
  .d-zone, .box-group h3, .box-group .os) { letter-spacing: 0 }
/* The mono face has no Arabic or Devanagari: their small captions take the display face instead of a fallback. */
:is(:lang(ar), :lang(hi)) :is(.d-legend, .d-zone, .d-ctrl h3, .d-ctrl .note, .box-group h3, .box-group .os) { font-family: var(--f-display) }

@media (max-width: 860px) {
  .a-hero .wrap { grid-template-columns: minmax(0, 1fr) }
  .a-tools .grid { grid-template-columns: minmax(0, 1fr) }
  .a-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .a-platform .wrap > div { grid-template-columns: minmax(0, 1fr) }
  .d-bench { grid-template-columns: minmax(0, 1fr); max-width: 452px }
}
@media (max-width: 400px) { .d-bench { padding: 10px; gap: 10px } .d-dial, .d-ctrl { padding: 12px } }
@media (prefers-reduced-motion: reduce) {
  .tb.play *, .reveal-top.play { animation-duration: 1ms !important; animation-delay: 0ms !important }
}