/* The /how-it-works/ page. Geometry follows the Figma frame "C02 How it works, website" (file xTJteo18I97yz8sLG6AKyR, node 41:1101,
   800 x 1240 including the drawn browser window; the page itself is 800 x 1162): a 32 px padding, a 40 px header (wordmark left,
   three links right), a 104 px intro (eyebrow, 32/40 title, one line), a 2 x 2 grid of 360 x 320 cards 16 px apart, the wide banner
   (174 px in the frame; 198 with the owner's words of 12 Oct 2026, design-lock/thresholds.json OWNER-QA5-H03) and one legal link,
   24 px between the blocks. Narrower than 640 px the cards stack in one column and keep their
   content. Colour, type, space and radius come from /lil-tokens.css (WP-10), so this file holds no colour value of its own except
   the arrow stroke the design draws off the token set (#3D3D3B). The wordmark, the banner and the promo button are the shared
   controls (.ll-wordmark, .ll-banner--wide, .ll-btn--promo). */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--lil-neutral-canvas);color:var(--lil-neutral-ink);font:var(--ll-type-body)}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
img{display:block}
a{color:inherit}
:focus-visible{outline:var(--lil-focus-ring);outline-offset:var(--lil-focus-offset)}
.skip-link{position:absolute;z-index:20;top:-100px;left:16px;padding:12px 16px;border-radius:var(--ll-radius-8);background:var(--lil-neutral-ink);color:var(--lil-neutral-surface);font:var(--ll-type-label);text-decoration:none}
.skip-link:focus{top:12px}

/* The column: 800 px wide with the 32 px padding, so 736 px of content, centred on wider windows. */
.page{display:flex;flex-direction:column;gap:var(--ll-space-24);width:min(100%,800px);min-height:100vh;min-height:100dvh;margin-inline:auto;padding:var(--ll-space-32)}

/* Header. The links are 28 px high hit areas; the current page is ink with a 1 px ink underline, and its box is 33 px high as drawn
   (node 41:1101, navHowItWorks y 35.5, height 33). Inside that box the label is not at the top: the frame puts its cap top 4 px lower
   than a plain 20 px line at the top of the box would (label line 4 px under the box top, underline 8 px under the label: 4 + 20 + 8 +
   1 = 33), which is what a pixel comparison of the frame shows. On a narrow screen the links wrap under the wordmark. */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ll-space-12) var(--ll-space-16);min-height:40px}
.site-nav{display:flex;align-items:center;gap:var(--ll-space-16)}
.nav-link{display:inline-flex;align-items:center;min-height:var(--ll-size-control-sm);border-radius:var(--ll-radius-8);color:var(--lil-neutral-muted);font:var(--ll-type-label);text-decoration:none;white-space:nowrap}
.nav-link:hover{color:var(--lil-neutral-ink);text-decoration:underline}
.nav-link[aria-current='page']{padding:var(--ll-space-4) 0 var(--ll-space-8);border-bottom:var(--ll-stroke-1) solid var(--lil-neutral-ink);border-radius:0;color:var(--lil-neutral-ink)}
.nav-link[aria-current='page']:hover{text-decoration:none}
.ll-wordmark__mark path{stroke:var(--ll-primitive-color-purple)}

.how-it-works{display:flex;flex-direction:column;gap:var(--ll-space-24)}
.intro{display:flex;flex-direction:column;gap:var(--ll-space-12)}
.eyebrow{align-self:flex-start;color:var(--lil-neutral-muted);font:var(--ll-type-small-label)}
h1{font:var(--ll-type-hero);letter-spacing:var(--ll-tracking-hero);overflow-wrap:anywhere}
.lead{color:var(--lil-neutral-muted);font:var(--ll-type-body)}

/* The cards: 360 x 320 in the design, so a 320 px floor on the height; the two in a row share the taller one. The design sets the
   content 1 px in from the top and left of the border and 328 wide, which leaves 15 px on the right: the padding reproduces that.
   A card is not a link (nothing to open yet), but the panel's rows point at one by its id: the target gets an ink border
   (derived, not drawn). */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ll-space-16)}
.cards>li{display:flex;min-width:0}
.card{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--ll-space-16);min-width:0;min-height:320px;padding:var(--ll-space-16) calc(var(--ll-space-16) - 2 * var(--ll-stroke-1)) calc(var(--ll-space-16) - var(--ll-stroke-1)) var(--ll-space-16);border:var(--ll-stroke-1) solid var(--lil-neutral-border);border-radius:var(--ll-radius-12);background:var(--lil-neutral-surface);scroll-margin-top:var(--ll-space-32)}
.card:target{border-color:var(--lil-neutral-ink)}
.card-copy{display:flex;flex-direction:column;gap:var(--ll-space-8)}
.card-category{color:var(--lil-neutral-muted);font:var(--ll-type-small-label)}
.card-title{font:var(--ll-type-section)}
.card-description{color:var(--lil-neutral-muted);font:var(--ll-type-body)}

/* The preview well: 328 x 136 in the design, scaled with the card. The drawing is SVG so it stays sharp at any width. */
.preview{flex:none;aspect-ratio:328/136;overflow:hidden;border-radius:var(--ll-radius-8);background:var(--lil-neutral-subtle)}
.preview-art{display:block;width:100%;height:100%}
.preview-art .sheet,.preview-art .field{fill:var(--lil-neutral-surface);stroke:var(--lil-neutral-border);stroke-width:1}
.preview-art .plain{fill:var(--lil-neutral-surface)}
.preview-art .ink{fill:var(--lil-neutral-ink)}
.preview-art .bar{fill:var(--lil-neutral-border)}
.preview-art .well{fill:var(--lil-neutral-subtle)}
.preview-art .arrow,.preview-art .mic{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.preview-art .arrow{stroke:#3d3d3b}
.preview-art .mic{stroke:var(--lil-neutral-ink)}
.preview-art text{font:var(--ll-type-caption)}
.preview-art .say{fill:var(--lil-neutral-ink);font:var(--ll-type-small-label)}
.preview-art .note{fill:var(--lil-neutral-muted)}

/* The banner is the shared wide one; this page only gives it the 24 px rhythm of the column, and the sentence under its title
   (the owner's words of 12 Oct 2026) the muted body type. */
.ll-banner--wide .banner-text{margin:0;color:var(--lil-neutral-muted);font:var(--ll-type-body);max-width:56ch}
/* The booking dialog (/booking-dialog.js): the browser's modal <dialog>, the page dimmed under it, the booking page framed in it. */
.booking-dialog{width:min(560px,calc(100% - 32px));height:min(720px,calc(100dvh - 64px));padding:0;border:var(--ll-stroke-1) solid var(--lil-neutral-border);border-radius:var(--ll-radius-12);background:var(--lil-neutral-surface);color:var(--lil-neutral-ink)}
.booking-dialog[open]{display:flex;flex-direction:column}
.booking-dialog::backdrop{background:rgba(32,33,36,.32)}
.booking-dialog-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:var(--ll-space-12);padding:var(--ll-space-12) var(--ll-space-16) var(--ll-space-12) var(--ll-space-24);border-bottom:var(--ll-stroke-1) solid var(--lil-neutral-border)}
.booking-dialog-title{margin:0;font:var(--ll-type-section)}
.booking-dialog-title:focus{outline:none}
.booking-dialog-title:focus-visible{outline:2px solid var(--lil-neutral-ink);outline-offset:4px}
.booking-dialog-frame{display:flex;flex:1 1 auto;min-height:0}
.booking-frame{display:block;flex:1 1 auto;width:100%;min-height:0;border:0}
.booking-dialog-foot{display:flex;flex:none;justify-content:center;margin:0;padding:var(--ll-space-8) var(--ll-space-16);border-top:var(--ll-stroke-1) solid var(--lil-neutral-border)}
.legal{display:flex;justify-content:center;min-height:var(--ll-size-control-sm);margin-top:auto}
/* Privacy and Terms (QA round 2, D-H), spaced like the header's links. */
.legal nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ll-space-16)}

@media(max-width:639px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
}
@media(max-width:560px){
  .page{padding:var(--ll-space-20) var(--ll-space-16)}
  h1{font:var(--ll-type-title);letter-spacing:0}
}
@media(forced-colors:active){
  .nav-link[aria-current='page']{border-bottom-color:CanvasText}
  .card,.preview{border:var(--ll-stroke-1) solid CanvasText}
  .card:target{outline:2px solid Highlight}
  .preview-art .sheet,.preview-art .field{stroke:CanvasText}
  .booking-dialog{border-color:CanvasText}
}