/* The LEV demo's try page, in the TR19 demo's look (demo.smartsolutionsltd.com/try/, Eddie 3 November 2026):
   its rules below, unchanged, then the LEV page's own at the end. Fonts are served from this site, never fetched. */
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url("/try/fonts/dm-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url("/try/fonts/dm-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:600;font-display:swap;src:url("/try/fonts/dm-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url("/try/fonts/dm-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-weight:500;font-display:swap;src:url("/try/fonts/dm-mono-latin-500-normal.woff2") format("woff2")}

/* GUIDED /try (Eddie, 30 September 2026) - docs/design/try-guided-redesign.html
   is the design; docs/DEMO_GUIDED_PHASE1.md the forks and their rulings. The
   design's framed screens were drawn stand-ins. Both frames here are the
   REAL app. */
:root{
  /* THE WEBSITE'S LOOK (BRIEF_TRY_ORDER_LOOK_21OCT): navy #0B1F3A, blue
     #2563EB, body text #2B3A52, small print #4A5568. */
  --navy:#0B1F3A;--ink:#0B1F3A;--line:rgba(255,255,255,.07);
  --blue:#2563EB;--text:#2B3A52;--muted:#4A5568;--body:#2B3A52;--small:#4A5568;
  --amber:#f2a51a;
  --on-navy:#ffffff;--on-navy-2:#c9d2ee;--on-navy-3:#93a3d3;
  /* SOFT BLUEPRINT (Eddie, 2 October 2026, BRIEF_TRY_BLUEPRINT): the page's
     own colours. Navy text and grey secondary text on a pale grid; white
     boxes with a hairline; the frames' dark edges. */
  --bp-bg:#EEF2F9;--bp-grid:rgba(11,31,58,.05);--bp-text:#0B1F3A;--bp-grey:#4A5568;
  --bp-join:#B9C3D8;--bp-edge:#1E2A4A;--bp-hair:#D6DDEA;--bp-icon:#5B6788;--bp-keep:#2E7D32;
  --bp-box-shadow:0 10px 30px -20px rgba(11,31,58,.35);
  /* Amber text on the pale page reads at 4.5:1 only in the guide's own
     darker amber (.g-c). */
  --bp-amber-text:#8a5a00;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background-color:var(--bp-bg);background-image:linear-gradient(var(--bp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bp-grid) 1px,transparent 1px);background-size:40px 40px;color:var(--body);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* N44 (plain navy, no grid) is replaced by the soft blueprint: a 40px grid,
   two 1px lines, across and down, on the pale page. */
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mono{font-family:"DM Sans",system-ui,sans-serif}
/* N34 - THE OFFICE, THE GAP AND THE PHONE ARE ONE BLOCK, CENTRED ON THE
   SCREEN, the empty space either side of the pair equal. The page's top -
   header, headline, subheading, stage bar, the office and the guide box -
   is moved left by --shift to stand on the office's left edge; the
   sections under the stage are moved back by the same, so they stay
   centred as they were. The office keeps its size. */
.wrap{position:relative;left:calc(var(--shift,0px) * -1);max-width:1180px;margin:0 auto;padding:0 24px}
.below,footer{position:relative;left:var(--shift,0px)}
/* N46 - EVERYTHING UNDER THE TOP BAR ON ONE CENTRE LINE: the headline, its
   underline, the line under it and the "What it does" strip are moved back
   by --shift like the sections under the stage, one centred column the
   sections' width, its text centred. */
.hero{position:relative;left:var(--shift,0px);text-align:center}
/* N47 - the top bar, the live page's: across the whole page, its spacing. */
header.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:22px 32px 0}
.brand{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--bp-grey)}
.brand b{color:var(--bp-text);font-weight:700;font-size:16px}
.brand small{font-size:12px;color:var(--small)}
.logo{width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.tag{font-size:12px;color:var(--bp-grey);letter-spacing:.06em}
/* The top bar: a hairline beneath, the pale page behind it. */
header.top{border-bottom:1px solid var(--bp-hair);background:rgba(238,242,249,.9)}
/* N42 - IN THE STYLE OF THE LIVE PAGE (origin/demo-next before the guided
   build, 0208982): its headline and short blue underline, its "What it
   does" strip, its icon-tile list, its blue-edged price box, its savings
   card with mono figures, its buttons. Its colours, by name: */
:root{--live-muted:#a9b3c9;--live-accent:#2563EB;--live-link:#9db4e8}
.hero{padding:34px 0 6px}
h1{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 auto;font-weight:700;letter-spacing:-.01em;max-width:30ch;color:var(--bp-text)}
h1::after{content:"";display:block;width:72px;height:4px;margin:18px auto 0;background:var(--live-accent);border-radius:2px}
.kicker{font-family:"DM Sans",system-ui,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bp-grey);margin:24px 0 12px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);margin:0 0 8px;position:relative}
.flow::before{content:"";position:absolute;left:10%;right:10%;top:24px;height:2px;background:var(--bp-join)}
.fstep{position:relative;padding:0 8px}
.fstep .fic{width:48px;height:48px;border-radius:14px;background:var(--live-accent);display:grid;place-items:center;position:relative;margin:0 auto;box-shadow:0 8px 18px -10px rgba(11,31,58,.55)}
.fstep .fic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fstep b{display:block;font-size:14px;font-weight:600;margin-top:10px}
.fstep span{display:block;font-size:12.5px;line-height:1.4;color:var(--body);margin-top:3px}
.lede{color:var(--body);font-size:17px;line-height:1.55;margin:14px auto 0;max-width:56ch}
.tour{background:var(--blue);color:#fff;border:none;border-radius:12px;padding:10px 20px;font-weight:600;font-size:15px;white-space:nowrap}

/* stage bar */
.bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:20px 0 12px}
.stp{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--bp-grey);font-size:13px;border:1px solid transparent}
.stp svg{flex:0 0 auto}
.stp .n{font-weight:500}
.stp.done{background:var(--blue);color:#fff}
.stp.on{background:#fff;color:var(--navy);border-color:#fff}
.stp.on .ic{background:var(--blue);color:#fff}
.ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);flex:0 0 30px}
.stp.done .ic{background:rgba(255,255,255,.18)}

/* THE STAGE (the layout ruling, 30 September): the back office spans the
   full content width - the real app laid out at 1280 and scaled to fit -
   and the phone overlaps its bottom-right corner. FREE PLAY BY DEFAULT
   (N32): on arrival there is no guide box, no ring and no stage bar, and
   both frames are fully clickable. On the tour the phone is lit when the
   step is the engineer's and dimmed otherwise. */
body[data-mode="free"] #bar,body[data-mode="free"] #guide{display:none}
body[data-mode="choose"] #bar,body[data-mode="choose"] #guide{display:none}
/* CHOOSER A (Eddie, 18 October 2026) - a light panel, dark text, where the
   guide box stands; never over "The back office" (placeChooser). */
.chooser{display:none;position:sticky;bottom:12px;z-index:5;margin:14px var(--guide-right,0px) 0 0;background:#fff;color:var(--text);border:1px solid #d5ddef;border-radius:12px;padding:18px 18px 14px;box-shadow:0 10px 30px rgba(8,14,34,.18);overflow-y:auto;overscroll-behavior:contain}
body[data-mode="choose"] .chooser{display:block}
.chooser h2{font-size:22px;font-weight:600;margin:0 0 10px;letter-spacing:-.005em;color:var(--ink,#16244a)}
.ch-q{margin:0 0 8px;font-size:14px;font-weight:600}
.ch-trades{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ch-trade-b{border:1px solid #c9d3ec;background:#fff;color:var(--text);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.ch-trade-b[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.ch-list{display:grid;gap:6px}
.ch-list[hidden]{display:none}
.ch-head{margin:8px 0 0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ch-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:10px 12px;border:1px solid #e1e7f3;border-radius:10px;background:#f6f8fc}
.ch-row.first{background:#eef3ff;border-color:#c9d6f5}
.ch-row.soon{opacity:.55}
.ch-open{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.ch-row.soon .ch-open{cursor:default}
.ch-title{font-size:15px;font-weight:600}
.ch-line{font-size:13px;color:var(--muted)}
.ch-more{grid-column:1 / -1;margin:2px 0 0;font-size:13px;line-height:1.45}
.ch-more[hidden]{display:none}
.ch-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-top:10px;border-top:1px solid #e1e7f3}
.ch-foot p{margin:0;font-size:13px;color:var(--muted)}
.stage{position:relative}
.frame-label{font-size:12px;color:var(--bp-grey);letter-spacing:.06em;margin:0 0 8px;display:flex;justify-content:space-between;gap:12px}
.frame-label .live{color:var(--amber)}
.laptop{background:var(--bp-edge);border-radius:14px;padding:10px 10px 14px;box-shadow:0 40px 70px -40px rgba(11,31,58,.45)}
.screen{position:relative;overflow:hidden;background:#f3f5fa}
.lap-screen{border-radius:6px}
.screen iframe{display:block;border:0;transform-origin:0 0;background:#f3f5fa}
/* A dimmed frame is shown, not used: the veil takes the clicks. */
.veil{position:absolute;inset:0;background:rgba(15,26,58,.62);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:3}
.frame.dim .veil{opacity:1;pointer-events:auto}
/* The ring is the page's, drawn over the frame from the real control's
   own rectangle (F2) - nothing is written into the app's document. F2 is
   amended for one static style only, the frames' hidden scroll bar
   (Eddie, 2 October 2026; hideBar, below). */
.ring{position:absolute;left:0;top:0;width:0;height:0;border-radius:8px;outline:3px solid var(--amber);outline-offset:3px;pointer-events:none;z-index:2;display:none;animation:pulse 1.6s ease-in-out infinite}
/* LIVE WALK MUST 1 (Eddie, 19 October 2026) - a sign of life while a step
   sets itself up or a send is made: the amber dot turns, never a greyed box. */
.g-c.wait::before{background:none;border:2px solid var(--amber);border-right-color:transparent;animation:gspin .8s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{outline-color:var(--amber)}50%{outline-color:rgba(242,165,26,.35)}}
.hot{outline:3px solid var(--amber);outline-offset:3px;animation:pulse 1.6s ease-in-out infinite}
/* N37 - at the tour's end the mark shows where to look, and asks for no
   click: it does not pulse. */
.ring.mark{animation:none}

/* N33 - the phone's screen 260 wide (the app at 390, scaled), standing to
   the RIGHT of the office, in the page's side margin, its top level with
   the office's. Placed by the script: left and top. */
#fPhone{position:absolute;left:0;top:0;width:280px;z-index:4;transform-origin:100% 0;transition:transform .3s ease,top .3s ease}
/* N42 - no caption over the phone: the view pill, centred above it (and on
   the tour, "You are here" in its place). */
#fPhone .frame-label{justify-content:center;align-items:center;gap:6px;margin:0 0 6px;min-height:42px;letter-spacing:.02em;flex-wrap:nowrap}
#fPhone .frame-label .live:empty{display:none}
#fPhone .frame-label .live:not(:empty){background:var(--ink);border-radius:6px;padding:3px 6px;white-space:nowrap}
#fPhone.dim,#fPhone.compact{transform:scale(var(--small,.62))}
/* N43 - beside the office, drawn back towards its bottom corner, so its
   bottom stays level with the office's. */
#stage.side #fPhone{transform-origin:100% 100%}
/* Where the phone lies over the office's edge, the office's own label
   keeps clear of it. */
#fOffice .frame-head{padding-right:var(--label-clear,0px)}
/* N45 - each frame under a heading in the section-heading style: the
   office's to the left, the phone's centred, the tour's button under it. */
.frame-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px}
.frame-head h2,.phone-head h2{font-size:22px;font-weight:600;letter-spacing:-.005em;color:var(--bp-text);margin:0;line-height:1.2}
.frame-head .live{font-size:12px;letter-spacing:.06em;color:var(--bp-amber-text)}
.phone-head{position:absolute;left:0;top:0;width:280px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 0 10px}
/* Hanging from the office's corner (881 to 1279), the heading, the button
   and the pill stand over the office's screen: on the page's navy, so they
   read. */
#stage:not(.side):not(.below) .phone-head{background:var(--bp-bg);border-radius:14px 14px 0 0;padding:12px 0 10px}
#stage:not(.side):not(.below) #fPhone .frame-label{background:var(--bp-bg);margin:0;padding:0 0 6px;border-radius:0 0 14px 14px}
/* Drawn back, the phone is smaller than the heading's panel: the panel
   closes on itself, and the phone's own label row goes clear. */
#stage:not(.side):not(.below):has(#fPhone.dim) .phone-head{border-radius:14px}
#stage:not(.side):not(.below) #fPhone.dim .frame-label{background:none}
.phone{background:var(--bp-edge);border-radius:34px;padding:10px;box-shadow:0 40px 70px -40px rgba(11,31,58,.45)}
.ph-screen{border-radius:26px}
/* The two phone views share the one screen; the one not shown is hidden,
   never removed, so it keeps its place (fork 5). */
.screen iframe[hidden]{display:none}
.screen iframe.aside{position:absolute;left:0;top:100%}
/* N32 (restores N15's switch, on the phone) - whose view the phone shows. */
/* N33 - above the phone, beside its label. */
/* N42 - the live page's large pill, the chosen view a blue pill. */
.view-toggle{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);font-family:"DM Sans",system-ui,sans-serif;letter-spacing:0}
.view-toggle button{font-size:14px;font-weight:600;padding:8px 16px;border:0;border-radius:999px;background:none;color:var(--bp-grey);white-space:nowrap}
.view-toggle button[aria-pressed="true"]{background:var(--live-accent);color:#fff}
.view-toggle button:disabled{cursor:default}
body[data-mode="tour"] .view-toggle{display:none}

/* guide */
.guide{position:sticky;bottom:12px;z-index:5;margin:14px var(--guide-right,0px) 0 0;background:#fff;color:var(--text);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;box-shadow:0 10px 30px rgba(8,14,34,.35)}
.guide .gi{width:46px;height:46px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center}
.g-k{font-size:12px;color:var(--muted)}
.g-t{font-size:18px;font-weight:600;margin:2px 0 4px}
.g-x{font-size:14px;color:var(--body);line-height:1.5;max-width:70ch}
.g-x q{font-style:italic;color:var(--text)}
/* D402 M1 - tour 3's end: the line with the way to get in touch. */
.g-x .g-more{display:block;margin-top:6px}
.g-x a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.g-c{margin-top:8px;font-size:14px;font-weight:500;color:#8a5a00;display:flex;gap:8px;align-items:center}
.g-c::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--amber);flex:0 0 10px}
/* THE AIR TOUR ON /try (Eddie, 2 November 2026) - its end card has no click line: none drawn, not an empty dot. */
.g-c:empty{display:none}
.g-h{margin-top:6px;font-size:13px;color:var(--muted)}
.g-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* N56 - "Leave the tour and explore" an outlined button in the row, left of
   Back. */
.g-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* THE BACK ROUND (Eddie, 2 November 2026, item 3) - why Back is grey, under the buttons. */
.g-saved{margin:0;font-size:13px;color:var(--muted);text-align:right}
.g-saved[hidden]{display:none}
/* N37 - the tour's last box: the paper of the job just sent, the way to
   buy, and the way round again. */
.g-end{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:440px}
.g-end[hidden]{display:none}
/* TOUR D0 (Eddie, 18 October 2026) - the recap of what the visitor did. */
.g-recap{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;font-size:13px;color:var(--text)}
.g-recap[hidden]{display:none}
.g-recap li::before{content:"\2713";color:var(--blue);font-weight:700;margin-right:6px}
.g-recap b{font-weight:600}
.btn.buy{background:var(--blue);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:12px;padding:9px 14px;font-weight:600;font-size:13px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.btn:disabled{opacity:.45;cursor:default}
.btn[hidden]{display:none}
.reset{background:none;border:none;color:var(--bp-grey);text-decoration:underline;font-size:12.5px;margin:6px auto 0;padding:4px 0;display:block}

/* bottom sections */
/* N42 - under the screens, two blocks side by side: the icon-tile list and
   the price box on the left, the savings card on the right. */
.below{display:block;padding:32px 0 8px}
.blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 28px}
.block{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.block h2{font-size:15px;font-weight:600;color:var(--bp-text);margin:0 0 3px}
.block p{margin:0;font-size:14px;line-height:1.45;color:var(--body)}
.hi{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--bp-hair);box-shadow:var(--bp-box-shadow);display:grid;place-items:center;flex:none}
.hi svg{width:22px;height:22px;stroke:var(--bp-icon);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* N42 - the foot, the live page's buttons. */
footer{padding:0 0 48px;margin-top:40px;text-align:center}
/* N51 - the foot a closing panel, the savings card's rounded card. */
.cta{padding:36px 24px 30px;border-radius:12px;background:#fff;border:1px solid var(--bp-hair);box-shadow:var(--bp-box-shadow)}
.cta h2{font-size:22px;font-weight:600;letter-spacing:-.005em;color:var(--bp-text);margin:0 0 8px}
.cta-sub{margin:0 0 22px;color:var(--body);font-size:15px}
.start-wrap{margin:0}
/* BRIEF_TRY_ORDER_LOOK_21OCT - the website's primary button: filled blue,
   white text, 12px corners, weight 600 (was N52's amber pill). */
.start{display:inline-block;padding:16px 34px;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;font-size:18px;text-decoration:none;box-shadow:0 8px 22px -8px rgba(37,99,235,.55),0 2px 6px rgba(8,14,34,.25);transition:transform .15s ease,box-shadow .15s ease}
.start:hover{background:#1d4fd0;transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(37,99,235,.65),0 4px 10px rgba(8,14,34,.3)}
@media (prefers-reduced-motion:reduce){.start{transition:none}.start:hover{transform:none}}
.start-q{margin:14px 0 0;font-size:13.5px;color:var(--small)}
.start-q a{color:var(--live-accent)}
.samples{position:relative;left:var(--shift,0px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0 0}
.samples{flex-direction:column;align-items:center}
.papers-btn{padding:10px 18px;border:none;border-radius:12px;background:var(--live-accent);color:#fff;font-weight:600;font-size:15px;cursor:pointer}
.papers-btn:hover{filter:brightness(1.1)}
/* THE AIR TOUR ON /try (Eddie, 2 November 2026, 9c) - three cards, TR19 Air the third. OLD repeat(2,minmax(0,220px)). */
.papers{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:12px;justify-content:center}
.papers[hidden]{display:none}
.pg{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:#fff;border:1px solid var(--bp-hair);box-shadow:var(--bp-box-shadow)}
.pg h3{margin:0 0 2px;font-size:14px}
.pg a{display:block;padding:9px 12px;border-radius:12px;background:var(--live-accent);color:#fff;font-weight:600;font-size:14px;text-decoration:none;text-align:center}
.pg a:hover{filter:brightness(1.1)}
@media (max-width:520px){.papers{grid-template-columns:1fr}}
/* The report-type labels: the app's outlined labels (lib/function-colours.ts). */
.types{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 0}
.rt{display:inline-block;padding:0 7px;line-height:20px;font-size:12px;font-weight:600;border:1.5px solid;border-radius:4px;background:#fff}
.rt-grease{color:#0D9488;border-color:#0D9488}
.rt-dampers{color:#7C3AED;border-color:#8B5CF6}
.rt-air{color:#075985;border-color:#38BDF8}
/* BUILD YOUR PLAN (Eddie, 16 October 2026 17:17, option A). */
.plan{position:relative;left:var(--shift,0px);padding:8px 0 8px}
.plan-h{font-size:22px;font-weight:600;letter-spacing:-.005em;color:var(--bp-text);margin:0 0 14px}
.plan-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.plan-in{display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:12px;background:#fff;border:1px solid var(--bp-hair);box-shadow:var(--bp-box-shadow)}
.plan-set{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plan-set legend{font-size:15px;font-weight:600;color:var(--bp-text);padding:0;margin:0 0 8px}
.plan-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.plan-ladder{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--small)}
.plan-tile{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:10px;border-radius:10px;border:1.5px solid var(--bp-hair);background:#fff;font:inherit;color:var(--body);cursor:pointer}
.plan-tile[aria-pressed="true"]{border-color:var(--live-accent);background:#f2f5fc}
.plan-tile .tick{flex:none;width:18px;height:18px;border-radius:4px;border:1.5px solid #9aa6c4;margin-top:1px;display:grid;place-items:center}
.plan-tile[aria-pressed="true"] .tick{background:var(--live-accent);border-color:var(--live-accent)}
.plan-tile[aria-pressed="true"] .tick::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.plan-tw{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.plan-tw b{font-size:14px;font-weight:600;line-height:1.3}
.plan-sub{font-size:12.5px;color:var(--bp-grey);font-weight:400}
.plan-tw .rt{line-height:1.35;padding:2px 7px}
.plan-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plan-step{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:600;color:var(--bp-text)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--bp-hair);border-radius:10px;overflow:hidden}
.stepper button{width:36px;height:36px;border:0;background:#f2f5fc;color:var(--bp-text);font-size:18px;cursor:pointer}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:36px;text-align:center;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:15px}
.plan-radio,.plan-check{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--body)}
.plan-radio .plan-sub{margin-left:2px}
.plan-own{display:flex;flex-direction:column;gap:8px;padding:0 0 0 24px;font-size:14px}
.plan-own[hidden]{display:none}
.plan-own input[type=number]{width:80px;padding:6px 8px;border:1px solid var(--bp-hair);border-radius:8px;font:inherit}
.plan-out{padding:22px;border-radius:12px;background:var(--navy);color:#fff;box-shadow:0 10px 30px rgba(8,14,34,.25)}
.plan-price{font-size:16px;color:#d6ddee}
.plan-price b{font-size:40px;font-weight:700;color:#fff;letter-spacing:-.01em;margin-right:4px}
.plan-figs{margin:16px 0 0;display:flex;flex-direction:column}
.plan-figs div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.14)}
.plan-figs dt{color:#d6ddee;font-size:14px}
.plan-figs dd{margin:0;font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:15px}
.plan-keep{margin:14px 0 18px;font-size:20px;font-weight:700;color:#fff}
.plan-keep.more{color:#ffd27a}
.plan-start{font-size:16px;padding:13px 28px}
.plan-terms{margin:16px 0 0;font-size:13.5px;line-height:1.45;color:#e8ecf6}
.plan-note{margin:8px 0 0;font-size:12px;color:#aab6d3}
@media (max-width:880px){.plan-grid{grid-template-columns:1fr}.plan-tiles{grid-template-columns:1fr}.plan-steps{grid-template-columns:1fr}}
.demo-note{margin:22px 0 0;font-size:12.5px;color:var(--small)}
@media (prefers-reduced-motion:reduce){.ring,.hot{animation:none}.veil,#fPhone{transition:none}}

/* PHONE-WIDTH SCREENS: the active frame only (the layout ruling; F4 (a)).
   The office is then the real phone layout of the office, at its own
   width. The frame not in use is moved off the screen, never display:none,
   so it keeps its size and its place. */
@media (max-width:980px){header.top{padding:16px 20px 0}}
@media (max-width:880px){
  .wrap{padding:0 16px}
  .flow{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .flow::before{display:none}
  .fstep:last-child:nth-child(odd){grid-column:1/-1}
  .blocks{grid-template-columns:1fr;gap:14px}
  .bar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stage{min-height:0 !important}
  .wrap{left:0}
  #fPhone{position:static;width:auto;transform:none !important;margin-top:18px}
  body[data-mode="tour"] #fPhone{margin-top:0}
  #fPhone .frame-label{justify-content:center;margin:0 0 8px}
  #fPhone .frame-label .live:not(:empty){background:none;padding:0;color:var(--bp-amber-text)}
  #fPhone .frame-label{letter-spacing:.06em}
  #fOffice .frame-head{padding-right:0}
  .phone-head{position:static;width:auto;margin:22px 0 4px}
  #stage:has(#fPhone.dim) .phone-head h2{display:none}
  .phone{max-width:410px;margin:0 auto}
  .frame.dim{position:absolute !important;left:-200vw;top:0;width:calc(100vw - 32px) !important;visibility:hidden}
  .guide{grid-template-columns:1fr;gap:10px;padding:14px;margin-right:0 !important}
  .chooser{margin-right:0 !important;padding:14px}
  .g-side{align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:8px 14px}
  .g-end{justify-content:flex-start}
  .guide .gi{display:none}
  .g-t{font-size:17px}
}

#ss-cb{position:fixed;left:16px;right:16px;bottom:16px;z-index:2147483000;max-width:760px;margin:0 auto;background:#fff;color:#0B1F3A;border:1px solid #E2E8F0;border-radius:16px;box-shadow:0 10px 30px rgba(11,31,58,.12);padding:16px 18px;font-family:"DM Sans",system-ui,sans-serif;font-size:14px;line-height:1.5;display:none}
#ss-cb.ss-show{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
#ss-cb p{margin:0;flex:1 1 320px;color:#4A5568}
#ss-cb .ss-cb-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#ss-cb button{font:500 14px/1 "DM Sans",system-ui,sans-serif;background:#0B1F3A;color:#fff;border:0;border-radius:980px;padding:11px 0;width:104px;cursor:pointer}
#ss-cb button:focus-visible,#ss-cb a:focus-visible{outline:2px solid #2563EB;outline-offset:2px}
#ss-cb a{color:#0B1F3A;font-size:13px;text-decoration:underline}
.ss-ft-legal a{color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:520px){#ss-cb{left:10px;right:10px;bottom:10px;padding:14px}#ss-cb .ss-cb-act{width:100%}#ss-cb button{flex:1}}

/* ---- The LEV page's own ---- */
body[data-mode="tour"] .view-toggle{display:inline-flex}
body[data-mode="tour"] .view-toggle button{pointer-events:none}
.screen iframe{width:100%}
/* The hidden view that holds the sample firm: off screen, so it runs as an ordinary page. */
.host{position:absolute;left:-10000px;top:0;width:390px;height:600px;border:0;visibility:hidden}
.rt-lev{color:#B45309;border-color:#F59E0B}
.plan-tiles.one{grid-template-columns:1fr}
.plan-tiles.one .plan-tile{cursor:default}
.ch-soon{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.ch-row.soon .ch-open:disabled{opacity:1}
/* The guide and the tour menu keep clear of the cookie bar. */
body[data-mode="tour"] #ss-cb,body[data-mode="choose"] #ss-cb{display:none}
/* What the tour points at, on the page itself (the price at the end). */
.lev-ring-page{outline:3px solid var(--amber);outline-offset:4px;border-radius:12px;animation:pulse 1.6s ease-in-out infinite}