/* Dotwatt page CSS: the app's panel drawn in HTML (inside visuals), and the text pages. Everything
   else is the kit's (system.css, cards.css, layout.css). */

/* ---------- the panel ---------- */
.dw { --dw-tint: color-mix(in oklab, var(--p-accent) 62%, white); --dw-ink: #f4f4f5; --dw-muted: #a3a3a8;
  width: 26.5em; font: 400 13px/1.38 var(--font-text); color: var(--dw-ink); text-align: left;
  display: grid; gap: .85em; padding: 1.1em; border-radius: 1.7em;
  background: #323236; border: 1px solid rgb(255 255 255 / .09); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
.dw--bare { padding: 0; background: none; border: 0; box-shadow: none; width: 100%; }
.dw p { margin: 0; max-width: none; }
.dw-head, .dw-row { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.dw-row--start { justify-content: flex-start; }
.dw-head { padding: .3em .9em 0; }
.dw-brand { display: inline-flex; align-items: center; gap: .7em; font: 500 1em/1 var(--font-mono); letter-spacing: .14em; }
.dw-brand i { width: .55em; height: .55em; border-radius: 50%; background: #d7342d; }
.dw-seg { display: inline-flex; padding: .2em; border-radius: 99em; background: rgb(255 255 255 / .09); }
.dw-seg b { padding: .45em 1em; border-radius: 99em; font: 500 .92em/1 var(--font-mono); color: var(--dw-muted); }
.dw-seg b.on { background: #f4f4f5; color: #1b1b1d; }
.dw-seg--s b { padding: .4em .8em; }
.dw-headline { padding: 0 .9em; display: grid; gap: .15em; }
.dw-title { font-size: 1.23em; font-weight: 500; letter-spacing: -.01em; }
.dw-title--s { font-size: 1.08em; }
.dw-note { color: var(--dw-muted); font-size: .92em; }
.dw-tint { color: var(--dw-tint); }
.dw-caps { font: 400 .88em/1 var(--font-mono); letter-spacing: .14em; color: var(--dw-muted); }
.dw-card { display: grid; gap: .65em; padding: 1.05em; border-radius: 1.35em; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .07); }
.dw-card b { font-weight: 500; white-space: nowrap; }
.dw-num { font-variant-numeric: tabular-nums; margin-left: auto; }
.dw-pill { padding: .5em .95em; border-radius: 99em; background: rgb(255 255 255 / .1); font: 500 .88em/1 var(--font-mono); letter-spacing: .04em; }
.dw-pill--on { background: #f4f4f5; color: #1b1b1d; }
.dw-dots { display: block; }
.dw-dots .on, .dw-chart .on { fill: #fff; }
.dw-dots .off, .dw-ring .off, .dw-chart .off { fill: rgb(255 255 255 / .1); }
.dw svg .tint { fill: var(--dw-tint); }
.dw-chart .mid { fill: rgb(255 255 255 / .55); }
.dw-now { display: grid; grid-template-columns: 12.6em minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .85em; height: 12.6em; }
.dw-ring { grid-row: 1 / 3; position: relative; place-items: center; padding: .9em; }
.dw-now > .dw-card { padding-block: .7em; }
.dw-ring > svg { width: 100%; height: 100%; }
.dw-ring__value { position: absolute; display: flex; align-items: flex-start; gap: .3em; }
.dw-ring__value small { font: 400 .85em/1 var(--font-mono); color: #d6d6da; }
.dw-left, .dw-low { align-content: center; }
.dw-switch { width: 2.4em; height: 1.4em; border-radius: 99em; background: rgb(255 255 255 / .16); position: relative; flex: none; }
.dw-switch::after { content: ""; position: absolute; left: .15em; top: .15em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #d9d9dc; }
.dw-app { display: grid; grid-template-columns: 1.55em minmax(0, 1fr); gap: .85em; align-items: start; }
.dw-app > div { display: grid; gap: .2em; }
.dw-app img, .dw-use img, .dw-sys { width: 1.55em; height: 1.55em; object-fit: contain; }
.dw-sys { border-radius: .4em; background: rgb(255 255 255 / .14); }
.dw-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em .6em; margin: 0; }
.dw-facts div { display: grid; gap: .35em; }
.dw-facts dd { margin: 0; font-size: 1.12em; font-weight: 500; font-variant-numeric: tabular-nums; }
.dw-facts dt { font: 400 .85em/1 var(--font-mono); letter-spacing: .12em; color: var(--dw-muted); }
.dw-slider { position: relative; display: flex; justify-content: space-between; align-items: center; height: 1.5em; }
.dw-slider::before { content: ""; position: absolute; inset: calc(50% - .15em) 0 auto; height: .3em; border-radius: 99em; background: rgb(255 255 255 / .14); }
.dw-slider i { position: relative; width: .15em; height: .75em; background: rgb(255 255 255 / .28); }
.dw-slider b { position: absolute; left: -.1em; width: .6em; height: 1.5em; border-radius: .3em; background: #f4f4f5; }
.dw-chart { width: 100%; height: auto; }
.dw-use { display: grid; grid-template-columns: 1.55em minmax(0, 1fr) auto 2.6em; gap: .85em; align-items: center; }
.dw-use .dw-num { text-align: right; }
.dw-bar { display: inline-flex; gap: .28em; }
.dw-bar i { width: .32em; height: .32em; border-radius: 50%; background: rgb(255 255 255 / .16); }
.dw-bar i.on { background: var(--dw-tint); }
.dw-key { padding: .7em .85em; border-radius: .7em; background: rgb(0 0 0 / .28); font: 400 .92em/1.3 var(--font-mono); color: var(--dw-ink); overflow: hidden; white-space: nowrap; text-overflow: clip; }

/* ---------- grounds inside visuals: a dark desktop under one soft light ---------- */
.hero__art, .shots, #features .panel, #steps .panel, .menu-card .panel { background:
    radial-gradient(70% 55% at 22% 8%, color-mix(in oklab, var(--p-accent) 46%, #1b1b1d), transparent 72%),
    radial-gradient(60% 50% at 96% 100%, color-mix(in oklab, var(--p-accent) 22%, #101011), transparent 70%),
    #19191b; }
.hero__proof { font-size: var(--t-small); color: color-mix(in oklab, var(--ink) 74%, var(--bg)); }

/* the hero: a corner of the desktop, the menu bar across its top and the panel hanging from the dot */
.hero__art .bar { position: absolute; inset: 0 0 auto 0; height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  padding: 0 20px; background: rgb(0 0 0 / .28); color: #f4f4f5; font: 500 13px/1 var(--font-text); }
.hero__art .bar i { width: 9px; height: 9px; border-radius: 50%; background: #f4f4f5; }
.hero__art .bar span { display: inline-flex; align-items: center; gap: 7px; }
.hero__art > .ly-piece--main { left: auto; right: 32px; top: 44px; width: auto; font-size: 16px; }
.hero__art > .ly-piece--main .dw { font-size: inherit; }
.hero__art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 96px; background: linear-gradient(transparent, #161617); pointer-events: none; }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px;
  padding: 14px 16px; border-radius: 18px; background: #3a3a3e; border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .8); color: #f4f4f5; font-size: 13px; line-height: 1.38; }
.hero__art > .ly-piece--note > i { width: 36px; height: 36px; border-radius: 9px; background: #111; display: grid; place-items: center; }
.hero__art > .ly-piece--note > i::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #f4f4f5; }
.hero__art > .ly-piece--note b { font-weight: 500; display: block; }
.hero__art > .ly-piece--note span { color: #b4b4b9; }
@media (max-width: 1279px) { .hero__art > .ly-piece--main { font-size: 14px; right: 24px; } }
@media (max-width: 1023px) { .hero__art > .ly-piece--main { left: 50%; right: auto; translate: -50% 0; font-size: 15px; } }
@media (max-width: 639px) { .hero__art > .ly-piece--main { font-size: 12px; top: 44px; } .hero__art::after { height: 40px; } }

/* the product section: three views of the panel at true size, cut by the frame's foot */
.shots { margin-top: var(--s-7); position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; gap: var(--s-7); padding: var(--s-7) var(--s-5) 0;
  border-radius: var(--r-lg); border: 1px solid var(--line); }
.shots::after { content: ""; position: absolute; inset: auto 0 0 0; height: 88px; background: linear-gradient(transparent, #161617); pointer-events: none; }
.shots .dw { flex: none; }
@media (max-width: 1279px) { .shots > .dw:nth-child(3) { display: none; } }
@media (max-width: 767px) { .shots > .dw:nth-child(2) { display: none; } }
@media (max-width: 639px) { .shots { padding: var(--s-5) var(--s-4) 0; } .shots .dw { width: 100%; font-size: 12px; } }

/* feature and step cards: one piece of the panel on the lit ground, cut by the panel's foot */
#features .panel { --p-h: 300px; }
#steps .panel { --p-h: 240px; }
.stage > .dw-piece { left: max(24px, 50% - 215px); right: max(24px, 50% - 215px); top: 40px; }
.stage > .dw-piece .dw { width: 100%; font-size: var(--dw-fs, 15px); }
#steps .stage > .dw-piece { left: 20px; right: 20px; top: 32px; --dw-fs: 13px; display: grid; gap: 12px; }
.menu-card .stage > .dw-piece { --dw-fs: 12px; }
.dw-menubar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 32px; padding: 0 14px; border-radius: 10px; background: rgb(0 0 0 / .4); color: #f4f4f5; font: 500 13px/1 var(--font-text); }
.dw-menubar span { display: inline-flex; align-items: center; gap: 7px; }
.dw-menubar i { width: 9px; height: 9px; border-radius: 50%; background: #f4f4f5; }
@media (max-width: 639px) { .stage > .dw-piece { left: 16px; right: 16px; top: 24px; --dw-fs: 13px; } }
.dw-mail { display: grid; gap: .6em; padding: 1.1em; border-radius: 1.2em; background: #f4f4f5; color: #1b1b1d; font: 400 13px/1.4 var(--font-text); }
.dw-mail b { font-weight: 500; } .dw-mail small { font-size: 12px; color: #5c5c61; }
.dw-mail code { display: block; padding: .7em .8em; border-radius: .6em; background: #e4e4e7; font: 400 12px/1.3 var(--font-mono); overflow: hidden; white-space: nowrap; }
.dw-file { display: flex; align-items: center; gap: 1em; padding: 1.1em; border-radius: 1.2em; background: #323236; border: 1px solid rgb(255 255 255 / .09); color: #f4f4f5; font: 400 13px/1.4 var(--font-text); }
.dw-file > i { flex: none; width: 52px; height: 52px; border-radius: 13px; background: #111; display: grid; place-items: center; }
.dw-file > i::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #f4f4f5; }
.dw-file b { font-weight: 500; display: block; } .dw-file small { font-size: 12px; color: #a3a3a8; }

/* pricing: the price ladder */
.card--plan .plan__left { color: var(--ink); min-height: 1lh; }
.card--plan:not(.is-featured) .price .t-stat { color: var(--muted); }
.includes { margin-top: var(--s-6); }

/* ---------- text pages: blog, download, lost key, legal ---------- */
.page { padding: calc(var(--nav) + var(--s-9)) 0 var(--s-10); }
.page h1 { font-size: var(--t-h2); max-width: 20ch; }
.page .page__lead { font-size: var(--t-lead); line-height: 1.5; margin-top: var(--s-5); max-width: 56ch; }
.page .page__meta { color: var(--muted); font-size: var(--t-small); margin-top: var(--s-4); }
.prose { margin-top: var(--s-8); max-width: 62ch; font-size: 17px; line-height: 1.65; }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-8); }
.prose h3 { font: 500 var(--t-lead)/1.4 var(--font-text); margin-top: var(--s-7); letter-spacing: 0; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: currentColor; }
.prose code { font: 400 .92em var(--font-mono); padding: .1em .35em; border-radius: 4px; background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose :is(th, td) { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 500; }
.posts { margin-top: var(--s-8); display: grid; }
.posts a { display: grid; gap: var(--s-2); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); max-width: 760px; }
.posts a h2 { font: 500 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.posts a p { max-width: 60ch; }
.posts a time { color: var(--muted); font-size: var(--t-small); }
.posts a:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.page .form { margin-top: var(--s-7); max-width: 480px; grid-template-columns: minmax(0, 1fr); }
.page .form [role="status"] { min-height: 1lh; }

/* ---------- heights ----------
   The kit fixes a section to whole screens from 1280 and on a phone, which overlaps the next section in a
   short window (a 13-inch MacBook shows about 800px). Here a section keeps its screens and grows past
   them instead, as the kit itself does from 640 to 1279. At 1440x900 nothing changes. */
@media (min-width: 1280px), (max-width: 639px) {
  main > section.section:not(.hero), footer.closing { height: auto; min-height: calc(var(--h, 1) * 100svh); display: flex; flex-direction: column; }
  main > section.section:not(.hero) > .wrap, footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
}
.shots { min-height: 440px; }
@media (min-width: 1024px) and (max-width: 1279px) { #features .panel { --p-h: 216px; } }
@media (min-width: 640px) and (max-width: 1023px) {
  #steps { --h: 2; }
  #questions .faq > .faq__item { padding: var(--s-4) 0; }
}
@media (max-width: 639px) { #features .panel, #steps .panel { --p-h: 228px; } }
/* the two feature rows are never shorter than their cards, so a short window grows the section instead of spilling */
#features > .wrap { grid-template-rows: repeat(2, minmax(min-content, 1fr)); }