/* All features, light (captain 2026-10-16, after Lusion's Devin site, rebuilt the same night: "they use the
   way nicer looking way to display these things altogether", in our own gradient). A light sheet in an
   otherwise dark page, in two moments (assets/features-light.js moves them):
     the wall   the title sits in the dip of a full-bleed wall of feature tiles in offset columns, outer
                columns high beside it and the middle ones low under it (Devin's tool wall). Under the
                pointer a tile fills with the steel gradient, its name comes in above its glyph and its line
                below. The wall rises in as it arrives and lifts away as you scroll on, outer columns first.
     the deck   once the wall has left, the ten features with a recording fade in as one row of steel cards
                (captain 2026-10-21); a click opens one, which widens and pushes the others narrow, its words
                beside the site's iPhone playing its real screen recording.
   The gradient is the brand's steel ramp (tokens.css --steel-*). Containers carry tone, never borders
   (tokens.css); tiles and panels are cards (shape.css). */

.fl-sec{--fl-bg:#f3f5f8;--fl-tile:#e3eaf1;--fl-ink:#0b0d10;--fl-body:#4b5664;--fl-gap:.5rem;
  /* the steel ramp, blue to blue (captain 2026-10-15: "more blue to blue instead of black to blue"): the
     near-black steels are left out; on white the title runs from steel blue to ice blue, and a lit tile or
     panel is steel blue at the bottom, where its words sit, and lightens upward */
  /* captain 2026-10-18: blue to light blue, not from the near-black steel-4 ("it looks like it's coming from black") */
  --fl-grad-text:linear-gradient(90deg,var(--steel-5),#7699b1 50%,var(--steel-6));
  --fl-grad-fill:linear-gradient(0deg,var(--steel-5),#7699b1 50%,var(--steel-6));
  --fl-ease:cubic-bezier(.17,.67,.1,.99);
  position:relative;color-scheme:light;background:var(--fl-bg);color:var(--fl-ink);padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(3rem,5vw,4.5rem);overflow:clip}
.fl-grad{background:var(--fl-grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* depth.js splits the title into letters; the gradient word moves as one so its fill stays continuous */
.fl-sec #seeTitle .fl-grad.bl-c{padding-right:.04em}

/* ---- the wall --------------------------------------------------------------------------------------- */
/* captain 2026-10-15 r3: "the spacing looks really off ... and the page takes up too much space". Devin's
   wall is dense: many small tiles at one even gap, the title in a dip at the top, the wall running off
   both screen edges. Seven narrow columns on a wide screen, five on a tablet or phone. */
.fl-wall-wrap{position:relative}
.fl-head{position:relative;z-index:1;width:min(40rem,calc(100% - 2 * var(--gutter-wide,1.25rem)));margin:0 auto;text-align:center;will-change:filter,opacity}
.fl-sec #seeTitle{margin:0 auto var(--space-3);font:500 var(--text-section)/1.04 var(--display);letter-spacing:-.03em;color:var(--fl-ink)}
.fl-head p{margin:0;font-size:var(--text-lg);color:var(--fl-body)}
.fl-wall{position:relative;display:flex;gap:var(--fl-gap);width:100vw;margin-left:calc(50% - 50vw)}
.fl-col{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--fl-gap)}
.fl-tile{position:relative;display:block;width:100%;min-width:0;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;will-change:transform,opacity}
.fl-tile-in{position:absolute;inset:0;overflow:hidden;isolation:isolate;border-radius:var(--r-card,24px);background:var(--fl-tile)}
/* the wall runs off both edges of the screen: the outer tiles are square on that side */
.fl-col:first-child .fl-tile-in{border-top-left-radius:0;border-bottom-left-radius:0}
.fl-col:last-child .fl-tile-in{border-top-right-radius:0;border-bottom-right-radius:0}
/* the hover (captain 2026-10-16: "they just kind of look really smooth because it just makes the icon
   bigger"): the tile stays still and only fades to the gradient; nothing in it swings or turns */
.fl-tile-in::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fl-grad-fill);opacity:0;transition:opacity .45s ease}
/* the icons (captain 2026-10-16, round 9: "design little cool icons for them ... more intentionally ... an
   isometric kind of follows the crosshair sort of look"). Each is drawn on one 24-unit grid in two layers: a
   soft back plate and a one-stroke front drawing. features-light.js lifts the two apart in 3D (the plate
   behind, the drawing in front) and turns every icon in the wall toward the pointer, the near ones a little
   and the far ones fully, so the wall reads as one field of small objects facing you. Vector only, so the
   icons are crisp at every size; only transform and opacity move. */
.fl-sec{--fl-plate:#cbd8e5;--fl-glyph:#7894b0;--gw:clamp(2.75rem,4.4vw,4.25rem)}
.fl-tile .fl-glyph{position:absolute;left:50%;top:50%;width:var(--gw);height:auto;transform:translate(-50%,-50%);shape-rendering:geometricPrecision;overflow:visible}
.fl-glyph .fl-gb{fill:var(--fl-plate);stroke:none}
.fl-glyph .fl-gf{fill:none;stroke:var(--fl-glyph);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fl-ico{position:absolute;left:50%;top:50%;width:var(--gw);aspect-ratio:1;transform:translate(-50%,-50%);perspective:calc(var(--gw) * 4);
  transition:transform .9s var(--fl-ease)}
/* at rest the icon turns a little down and to the right, so its plate shows below it like a shadow */
.fl-rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(12deg) rotateY(-14deg)}
.fl-ico .fl-glyph{left:0;top:0;width:100%;height:100%}
.fl-ico .fl-back{transform:translateZ(calc(var(--gw) * -.09));transition:opacity .45s ease}
.fl-ico :is(.fl-front,.fl-draw){transform:translateZ(calc(var(--gw) * .09));transition:opacity .45s ease}
/* the white copy of the drawing fades in over it on hover, so the hover never repaints */
.fl-ico .fl-front.lit .fl-gf{stroke:#fff}
.fl-ico .fl-front.lit{opacity:0}
/* no pointer to follow (phones, tablets): the same resting look drawn flat, the plate offset down and right,
   so 28 icons never become 3D layers on a phone */
@media(hover:none){
  .fl-ico{perspective:none}
  .fl-rig{transform:none!important;transform-style:flat}
  .fl-ico .fl-back{transform:translate(calc(var(--gw) * .035),calc(var(--gw) * .045))}
  .fl-ico :is(.fl-front,.fl-draw){transform:none}
}
/* the diagrams (captain 2026-10-18: "I think more of it as a diagram ... hovering over it should have more
   than just a fill animation and scale. Something happens to this diagram"). A tile marked .fl-dg draws what
   its feature does, on a 64-unit grid, kept minimal (captain: "minimalist at the core"; no dot-matrix plate
   behind it, which "reads like a SIM card"): a line drawing and one steel-blue accent for the feature's key
   fact. When the tile goes live (a mouse over it, or
   on touch as it comes into view or is tapped; features-light.js) the diagram plays the feature once and holds
   its end: the barcode is scanned and its nutrition comes up, the week's calories rise on training days.
   Leaving plays it back. Motion is transform and opacity only, set per element by a small vocabulary below
   (--d is when it starts); the scan and the playhead are the only keyframes. */
/* in Apple's way (captain 2026-10-21: "let's just take from Apple ... the Apple privacy feature icon ... the Apple
   Fitness Timer"): one bold, even line in one steel-blue family, the result in the deeper blue */
.fl-sec{--fl-mid:#c6d7e8;--fl-line:#4f82b0;--fl-accent:#2c67a0}
.fl-dg .fl-tile-in{container-type:size}
/* every diagram in the same box whatever its tile's shape, so the line weight and size match across the wall (captain
   2026-10-24: "consistent like stroke thickness, padding to the outer edges"); each drawing is fitted inside it to one
   live area and centred (its .fl-fit wrapper, which holds the line with --sw); about a tenth smaller than first drawn
   (captain 2026-10-25: "a little bit smaller, they look a little bit big still") */
.fl-dg .fl-ico{--gw:56cqmin}
.fl-ico .fl-dia{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.fl-dia .ln{fill:none;stroke:var(--fl-line);stroke-width:calc(1.9 * var(--sw,1));stroke-linecap:round;stroke-linejoin:round}
.fl-dia .ac{fill:none;stroke:var(--fl-accent);stroke-width:calc(2.2 * var(--sw,1));stroke-linecap:round;stroke-linejoin:round}
.fl-dia :is(.ln,.ac).thin{stroke-width:calc(1.3 * var(--sw,1))}
.fl-dia .ac.thick{stroke-width:calc(2.8 * var(--sw,1))}
.fl-dia .lnf{fill:var(--fl-line)}
.fl-dia .acf{fill:var(--fl-accent)}
/* sleep stages: one accent, deepest strongest, so the stages still read once the drawing turns white */
.fl-dia .st-r{fill-opacity:.7}
.fl-dia .st-l{fill-opacity:.55}
.fl-dia .st-a{fill-opacity:.35}
.fl-dia .sf{fill:var(--fl-mid)}
/* the muscle map's figure is the app's own body art (app-swift SharedUI/Components/BodyMapAssets, his front and her back, small
   corners straightened and outlines thinned to what shows at this size, with a little hair added): the body, and the muscles at the tone a lit one rests at */
.fl-dia .bd{fill:var(--fl-line);fill-opacity:.26}
.fl-dia .mu{fill:var(--fl-accent);fill-opacity:.36}
.fl-dia .hr{fill:var(--fl-line);fill-opacity:.8}
.fl-dia .ink{fill:none;stroke:#fff;stroke-width:calc(1.5 * var(--sw,1));stroke-linecap:round;stroke-linejoin:round}
.fl-dia .inkf{fill:#fff}
/* the app's own check (tora.check-circle): sharp and mitred, knocked out of its disc */
.fl-dia .ckm{fill:none;stroke:#fff;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4}
/* a page (the program guide) */
.fl-dia .pg{fill:#f7f9fb}
.fl-dia .knob{fill:#fff;stroke:var(--fl-accent);stroke-width:calc(1.8 * var(--sw,1))}
.fl-dia .tx{fill:var(--fl-accent);font:600 4.6px/1 var(--sans)}
.fl-dia .tx.big{font-size:10px;letter-spacing:-.02em}
.fl-dia .tx.huge{font-size:13px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* under the pointer the tile fills with the steel gradient: the drawing turns white and the accent ice blue */
.fl-dia :is(.ln,.ac,.lnf,.acf,.sf,.bd,.mu,.hr,.knob,.tx,.inkf,.pg,.ckm){transition:fill .45s ease,stroke .45s ease}
@media(hover:hover){
  .fl-dg:hover .fl-dia .ln{stroke:rgb(255 255 255 / .7)}
  .fl-dg:hover .fl-dia .lnf{fill:rgb(255 255 255 / .45)}
  .fl-dg:hover .fl-dia .ac{stroke:#fff}
  .fl-dg:hover .fl-dia :is(.acf,.tx){fill:#fff}
  .fl-dg:hover .fl-dia .sf{fill:rgb(255 255 255 / .2)}
  .fl-dg:hover .fl-dia :is(.bd,.mu,.hr){fill:#fff}
  .fl-dg:hover .fl-dia .ink{stroke:var(--steel-4)}
  .fl-dg:hover .fl-dia .inkf{fill:var(--steel-4)}
  .fl-dg:hover .fl-dia .ckm{stroke:var(--steel-4)}
  .fl-dg:hover .fl-dia .pg{fill:rgb(255 255 255 / .12)}
  .fl-dg:hover .fl-dia .knob{fill:var(--steel-4);stroke:#fff}
/* a featured card gathered into the row is steel, so its drawing is drawn as under the pointer */
.fl-feat.steel .fl-dia .ln{stroke:rgb(255 255 255 / .7)}
.fl-feat.steel .fl-dia .lnf{fill:rgb(255 255 255 / .45)}
.fl-feat.steel .fl-dia .ac{stroke:#fff}
.fl-feat.steel .fl-dia :is(.acf,.tx){fill:#fff}
.fl-feat.steel .fl-dia .sf{fill:rgb(255 255 255 / .2)}
.fl-feat.steel .fl-dia :is(.bd,.mu,.hr){fill:#fff}
.fl-feat.steel .fl-dia .ink{stroke:var(--steel-4)}
.fl-feat.steel .fl-dia .inkf{fill:var(--steel-4)}
.fl-feat.steel .fl-dia .ckm{stroke:var(--steel-4)}
.fl-feat.steel .fl-dia .pg{fill:rgb(255 255 255 / .12)}
.fl-feat.steel .fl-dia .knob{fill:var(--steel-4);stroke:#fff}
}
/* a diagram is drawn flat and never grows under the pointer: turned in 3D, or scaled by a transition, it was painted
   once as a picture and that picture stretched, so its lines and numbers went soft while it played (captain
   2026-10-23: "when it animates, it has a weird blur to it"); drawn flat it is redrawn sharp every frame */
.fl-dg .fl-ico,.fl-tile.fl-dg:hover .fl-ico{perspective:none;transform:translate(-50%,-50%)}
.fl-dg .fl-rig{transform:none;transform-style:flat}
.fl-dg .fl-ico .fl-draw{transform:none}
/* the icons' theme (captain 2026-10-23, after Solar's line duotone, kept our own): one even round-capped line, the
   secondary parts at half strength, no filled panels, one accent for the result. Weekly check-in and Program library
   are Solar's own calendar and library in this line (captain 2026-10-24). Plate calculator, Sleep score, Nova, Your
   program and Personal records keep their drawings in the same line; Muscle map is a filled figure and keeps its
   fills. A check is the app's: a filled accent disc with a bold white tick knocked out of it (.lck), never a tick in a
   ring of its own colour. Every drawing fills one live area of the 64 box: 48 across a squarish one, 50 a round one,
   54 across a wide one. */
.fl-th :is(.li,.lh,.la){fill:none;stroke-width:calc(2.8 * var(--sw,1));stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s ease}
.fl-th .li{stroke:var(--fl-line)}
.fl-th .lh{stroke:var(--fl-line);stroke-opacity:.5}
.fl-th .la{stroke:var(--fl-accent)}
.fl-th .ld{fill:var(--fl-line);transition:fill .45s ease}
.fl-th .lad{fill:var(--fl-accent);transition:fill .45s ease}
.fl-th .lck{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s ease}
@media(hover:hover){
  .fl-dg:hover .fl-th :is(.li,.lh){stroke:#fff}
  .fl-dg:hover .fl-th .la{stroke:#e6f2fd}
  .fl-dg:hover .fl-th :is(.ld,.lad){fill:#fff}
  .fl-dg:hover .fl-th .tx{fill:#fff}
  .fl-dg:hover .fl-th .lck{stroke:var(--steel-4)}
}
.fl-feat.steel .fl-th :is(.li,.lh){stroke:#fff}
.fl-feat.steel .fl-th .la{stroke:#e6f2fd}
.fl-feat.steel .fl-th :is(.ld,.lad){fill:#fff}
.fl-feat.steel .fl-th .lck{stroke:var(--steel-4)}
/* the target gauge's needle swings up from low to the new target, about its pivot */
.fl-dia .m-needle{transform-origin:0 100%;transform:rotate(-100deg)}
.fl-dg.live .fl-dia .m-needle{transform:none;transition:transform .9s cubic-bezier(.3,1.3,.5,1) var(--d,.1s)}
/* the library's last book tips over against the others, from upright, about its foot */
.fl-dia .m-tip{transform-origin:0 100%;transform:rotate(-15deg)}
.fl-dg.live .fl-dia .m-tip{transform:none;transition:transform .7s cubic-bezier(.3,1.35,.55,1) var(--d,0s)}
/* the motion vocabulary: at rest, then live; leaving plays straight back with no stagger */
.fl-dia [class*="m-"]{transform-box:fill-box;transform-origin:50% 50%;transition:transform .7s var(--fl-ease),opacity .45s ease}
.fl-dg.live .fl-dia [class*="m-"]{transition-delay:var(--d,0s)}
.fl-dia .m-in{opacity:0}
.fl-dg.live .fl-dia .m-in{opacity:1}
.fl-dg.live .fl-dia .m-out{opacity:0}
.fl-dg.live .fl-dia .m-dim{opacity:var(--o,.3)}
.fl-dia .m-up{opacity:0;transform:translate(var(--x,0px),var(--y,4px))}
.fl-dg.live .fl-dia .m-up{opacity:1;transform:none}
.fl-dg.live .fl-dia .m-mv{transform:translate(var(--x,0),var(--y,0))}
.fl-dia .m-sc{opacity:0;transform:scale(var(--s0,.6))}
.fl-dia .m-sc:is(.ln,.keep){opacity:1}
.fl-dg.live .fl-dia .m-sc{opacity:1;transform:none}
.fl-dia .m-sx{transform-origin:0 50%;transform:scaleX(var(--s0,0))}
.fl-dg.live .fl-dia .m-sx{transform:scaleX(var(--s1,1))}
.fl-dia .m-sy{transform-origin:50% 100%;transform:scaleY(var(--s0,0))}
.fl-dg.live .fl-dia .m-sy{transform:none}
/* A small, legible frame remains before hover: selected artwork only, so sequential
   values and completion checks still arrive once. Live rules retain their full payoff. */
.fl-dia .m-rest{opacity:.72}
.fl-dia .m-up.m-rest{transform:none}
.fl-dia .m-lit{opacity:var(--o0,.6)}
.fl-dg.live .fl-dia .m-lit{opacity:1;transition-duration:.7s,.25s}
/* the scan line rests in the middle of the code, then sweeps down, up and away */
.fl-dia .m-scan{opacity:.55}
.fl-dg.live .fl-dia .m-scan{animation:fl-scan .8s cubic-bezier(.45,0,.55,1) .1s both}
@keyframes fl-scan{0%{transform:none;opacity:.55}30%{transform:translateY(7px);opacity:1}75%{transform:translateY(-8px);opacity:1}100%{transform:translateY(-8px);opacity:0}}
/* the warm-up marker climbs the steps and lands on the top set: it moves across at an even pace (fl-hopx) while it
   rises and falls with gravity (fl-hopy), easing out to the top of each hop and in to each landing; the steps it
   lands on spring up just ahead of it */
.fl-dia .m-hopy{opacity:0}
.fl-dg.live .fl-dia .m-hopx{animation:fl-hopx 1.4s linear .35s both}
.fl-dg.live .fl-dia .m-hopy{animation:fl-hopy 1.4s .35s both}
/* leaving (features-light.js holds .leaving for a moment): the same animations, paused where they are, so the marker
   fades out on the spot rather than vanishing or jumping back to the first step */
.fl-dg.leaving .fl-dia .m-hopx{animation:fl-hopx 1.4s linear .35s both paused}
.fl-dg.leaving .fl-dia .m-hopy{animation:fl-hopy 1.4s .35s both paused}
.fl-dia .m-fade{opacity:0;transition:opacity .3s ease}
.fl-dg:is(.live,.leaving) .fl-dia .m-fade{opacity:1}
.fl-dg.leaving .fl-dia .m-fade{opacity:0}
.fl-dg.live .fl-dia .m-sy.spring{transition:transform .65s cubic-bezier(.3,1.35,.55,1) var(--d,0s),opacity .45s ease var(--d,0s)}
@keyframes fl-hopx{0%,8%{transform:none}100%{transform:translateX(40px)}}
@keyframes fl-hopy{0%{transform:none;opacity:0}6%{opacity:1}8%{transform:none;animation-timing-function:cubic-bezier(.3,.7,.45,1)}18.4%{transform:translateY(-13.2px);animation-timing-function:cubic-bezier(.55,0,.7,.35)}31%{transform:translateY(-7.2px);animation-timing-function:cubic-bezier(.3,.7,.45,1)}41.4%{transform:translateY(-18.6px);animation-timing-function:cubic-bezier(.55,0,.7,.35)}54%{transform:translateY(-12.6px);animation-timing-function:cubic-bezier(.3,.7,.45,1)}64.3%{transform:translateY(-24.0px);animation-timing-function:cubic-bezier(.55,0,.7,.35)}77%{transform:translateY(-18px);animation-timing-function:cubic-bezier(.3,.7,.45,1)}87.3%{transform:translateY(-27.6px);animation-timing-function:cubic-bezier(.55,0,.7,.35)}100%{transform:translateY(-21.6px);animation-timing-function:cubic-bezier(.3,.7,.45,1);opacity:1}}
/* her ponytail swings out as the map lights, then settles */
.fl-dia .m-swing{transform-origin:96% 4%}
.fl-dg.live .fl-dia .m-swing{animation:fl-swing 1.6s cubic-bezier(.35,0,.25,1) .1s both}
@keyframes fl-swing{0%{transform:none}30%{transform:rotate(-14deg)}58%{transform:rotate(6deg)}80%{transform:rotate(-2.5deg)}100%{transform:none}}
/* plates slide along the sleeve and seat against the collar: quick at first, slowing as they arrive */
.fl-dg.live .fl-dia .m-up.slide{transition:transform .55s cubic-bezier(.16,1,.3,1) var(--d,0s),opacity .2s ease var(--d,0s)}
/* the plate total: the old number fades fast and the new one rises in just after it, so they never overlap */
.fl-dia .num{transition:transform .4s var(--fl-ease),opacity .15s ease}
.fl-dg.live .fl-dia .num{transition-delay:var(--d,0s)}
/* food drops onto the plate, one piece at a time, and settles with a small bounce; a check or a tick box pops in with
   a slight overshoot (spring) */
.fl-dia .m-drop{opacity:0}
.fl-dg.live .fl-dia .m-drop{animation:fl-drop .75s var(--d,0s) both}
.fl-dg.leaving .fl-dia .m-drop{animation:fl-drop .75s var(--d,0s) both paused}
@keyframes fl-drop{0%{transform:translateY(-16px);opacity:0;animation-timing-function:cubic-bezier(.5,0,.85,.45)}
  15%{opacity:1}55%{transform:none;animation-timing-function:cubic-bezier(.2,.6,.4,1)}72%{transform:translateY(-2.2px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  88%{transform:none;opacity:1}100%{transform:none;opacity:1}}
/* each tile's one payoff lands with Apple's bounce: up past its size and back (SF Symbols' bounce); things that
   simply arrive settle more gently */
.fl-dg.live .fl-dia .m-sc.spring{transition:transform .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s),opacity .18s ease var(--d,0s)}
.fl-dg.live .fl-dia .m-sc.settle{transition:transform .6s cubic-bezier(.3,1.35,.55,1) var(--d,0s),opacity .2s ease var(--d,0s)}
.fl-dg.live .fl-dia .m-mv.settle{transition:transform .6s cubic-bezier(.3,1.35,.55,1) var(--d,0s)}
/* a number rolling up to its value, fast and then slowing into it (the sleep score) */
.fl-dg.live .fl-dia .m-mv.roll{transition:transform 1.3s cubic-bezier(.16,1,.3,1) var(--d,0s)}
/* Nova is typing: three dots bob in turn */
.fl-dg.live .fl-dia .m-bob{animation:fl-bob .6s ease-in-out var(--d,0s) 2}
@keyframes fl-bob{0%,100%{transform:none}45%{transform:translateY(-1.8px)}}
/* the playhead runs once through the night and fades at morning */
.fl-dia .m-sweep{opacity:0}
.fl-dg.live .fl-dia .m-sweep{animation:fl-sweep 1.3s linear both}
@keyframes fl-sweep{0%{transform:none;opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateX(var(--x));opacity:0}}
.fl-top,.fl-bottom{position:absolute;left:50%;width:max-content;max-width:86%;text-align:center;color:#fff;opacity:0;
  transition:transform 1s var(--fl-ease),opacity 1s var(--fl-ease)}
.fl-top{top:0;transform:translate(-50%,-50%);padding-top:.875rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.375rem;font:600 var(--text-sm)/1.2 var(--sans)}
.fl-bottom{bottom:0;transform:translate(-50%,50%);padding-bottom:.875rem;font-size:var(--text-xs);line-height:1.35;color:rgb(255 255 255 / .86)}
@media(hover:hover){
  .fl-tile:hover .fl-tile-in::before{opacity:1}
  .fl-tile:hover .fl-ico{transform:translate(-50%,-50%) scale(1.12)}
  .fl-tile:hover .fl-front{opacity:0}
  .fl-tile:hover .fl-front.lit{opacity:1}
  .fl-tile:hover .fl-back{opacity:.32}
  .fl-tile:hover .fl-top{opacity:1;transform:translate(-50%,0)}
  .fl-tile:hover .fl-bottom{opacity:1;transform:translate(-50%,0)}
}
/* no pointer to hover with: each tile names itself quietly, and a tap opens its feature in the deck */
@media(hover:none){
  .fl-top{opacity:1;transform:translate(-50%,0);color:var(--fl-body);font-weight:500}
  .fl-top .fl-pro{display:none}
}
.fl-pro{display:inline-grid;place-items:center;height:1.25rem;padding:0 .5rem;border-radius:var(--r-pill,999px);font:600 .625rem/1 var(--sans);letter-spacing:.06em;
  color:var(--steel-3);background:#fff}
/* in a tile's name the pill sat half a pixel below the title's capitals and its letters rode high in it: lift the
   pill by about half a pixel and drop its letters by the same, so title, pill and PRO share one centre (captain
   2026-10-19: "misaligned with the title") */
.fl-top .fl-pro{padding-top:1px;transform:translateY(-.6px)}

/* a wide screen: the scene, as Devin's "Able to work with hundreds of tools" (captain 2026-10-21: "we can copy them ...
   I want to be inspired by Devin"; archive-devin-ai.lusion.co). Devin's grid: seven columns across the screen, tall
   cards (5:8) and square ones, the outer columns high and the middle ones low; every column ends in one tall card,
   the seven featured ones. The title holds in a pinned stage while the wall rises past it; then the other cards lift
   away and the seven, the same cards, gather into one row that grows into panels (features-light.js). */
@media(min-width:1024px){
  .fl-wall-wrap{height:440svh}
  .fl-stage{position:sticky;top:0;height:100svh;overflow:hidden}
  .fl-head{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;width:min(40rem,90vw)}
  .fl-head h2,.fl-head p{pointer-events:auto}
  .fl-wall{--s:calc((100vw - 6 * var(--fl-gap)) / 7);position:absolute;left:0;top:100%;z-index:1;width:100%;margin:0;align-items:flex-start}
  .fl-tall{aspect-ratio:5/8}
  .fl-sq{aspect-ratio:1}
  /* Devin's stagger, in card widths: the outer columns highest, the next ones 0.67 lower, the middle three lowest */
  .fl-col{will-change:transform;margin-top:calc(var(--s) * var(--o,0))}
  .fl-col:is(:nth-child(2),:nth-child(6)){--o:.67}
  .fl-col:is(:nth-child(3),:nth-child(5)){--o:1.7}
  .fl-col:nth-child(4){--o:1.48}
  /* the seven featured cards are placed and sized by features-light.js, under their columns, then in the row */
  .fl-feats{position:absolute;inset:0;z-index:2;pointer-events:none}
  .fl-feat{position:absolute;left:0;top:0;width:var(--s);height:calc(var(--s) * 1.6);pointer-events:auto}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){
  .fl-wall-wrap{height:auto}
  .fl-stage{position:relative;height:auto;overflow:visible}
  .fl-head{position:relative;left:auto;top:auto;transform:none;margin:0 auto 2rem}
  .fl-wall{position:relative;top:auto}
  /* no scene: the seven stand as the row of panels under the wall */
  .fl-feats{position:relative;inset:auto;display:flex;gap:var(--fl-gap);height:min(36rem,66svh);margin:clamp(2rem,4.5vw,4rem) var(--gutter-wide,1.25rem) 0}
  .fl-feat{position:relative;flex:1 1 0;width:auto;height:auto;min-width:0}
  .fl-feat.open{flex-grow:6}
}
/* the wall's other cards name themselves on hover but open nothing */
.fl-wall .fl-tile{cursor:default}
/* a tablet or a phone: the title above, then five columns in feature order, the middle ones hung lower */
@media(max-width:1023px){
  .fl-head{margin-bottom:clamp(1.5rem,5vw,2.5rem)}
  .fl-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:calc((100vw - 4 * var(--fl-gap)) / 5 * .5)}
  .fl-col{display:contents}
  .fl-tile{order:var(--k)}
  /* --c5 is the tile's column (0 to 4): the middle one hangs half a tile, its neighbours a quarter */
  .fl-tile-in{transform:translate3d(0,calc(min(var(--c5,0),4 - var(--c5,0)) / 4 * (100vw - 4 * var(--fl-gap)) / 5),0)}
  .fl-sec{--gw:clamp(1.75rem,8vw,3.25rem)}
}
/* a phone: the tiles are icons only; the deck under them names every feature */
@media(max-width:599px){
  .fl-sec{--fl-gap:.375rem}
  .fl-tile .fl-top{display:none}
  .fl-dg .fl-ico{--gw:78cqmin}
  .fl-dia .ln{stroke-width:calc(2.3 * var(--sw,1))}
  .fl-dia .ac{stroke-width:calc(2.6 * var(--sw,1))}
}

/* ---- the featured cards ------------------------------------------------------------------------------- */
/* in the wall a featured card is a tile like the rest; gathered into the row it turns steel (as Devin's turn their
   brand colour) and shows only its drawing; open, it widens and shows its name, its line and the site's iPhone
   playing its real screen recording (features-light.js sets --oh, its height) */
.fl-feat{cursor:pointer}
.fl-feat .fl-tile-in::before{transition:opacity .45s ease}
.fl-feat.steel .fl-tile-in::before{opacity:1}
.fl-feat.steel .fl-front{opacity:0}
.fl-feat.steel .fl-front.lit{opacity:1}
.fl-feat.steel .fl-back{opacity:.32}
.fl-feat.steel :is(.fl-top,.fl-bottom){display:none}
.fl-feat .fl-ico{transition:transform .9s var(--fl-ease),opacity .3s ease}
.fl-feat:is(.open,.chosen) .fl-ico{opacity:0;transition-duration:.9s,.1s}
/* the words and phone keep the open panel's full width (--ow, features-light.js) and centre in the card, so as it
   widens or narrows they are uncovered or covered, never reflowed; they leave quickly and arrive a little raised */
.fl-body{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(1.5rem,3vw,3rem);
  padding:clamp(1.5rem,2.6vw,2.5rem) clamp(1.5rem,3vw,3rem);opacity:0;visibility:hidden;transition:opacity .1s ease,translate .1s ease,visibility 0s .1s;text-align:left;color:#fff}
.fl-feat.open .fl-body{opacity:1;visibility:visible;transition:opacity .4s ease,translate .5s cubic-bezier(.2,.9,.25,1),visibility 0s}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
  .fl-feats .fl-body{left:50%;right:auto;width:var(--ow,100%);translate:-50% .5rem}
  .fl-feats .fl-feat.open .fl-body{translate:-50% 0}
}
.fl-text{display:grid;gap:1rem;max-width:26rem;min-width:min(14rem,100%)}
.fl-title{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font:500 clamp(1.5rem,2.3vw,2.25rem)/1.08 var(--display);letter-spacing:-.02em;color:#fff}
.fl-title .fl-pro{height:1.5rem;font-size:.6875rem}
.fl-desc{font-size:var(--text-lg);line-height:1.5;color:rgb(255 255 255 / .9)}
.fl-media{display:grid;place-items:center}
.fl-phone{--pw:min(13.5rem,calc((var(--oh,32rem) - 4rem) * 71.9 / 150))}
.fl-phone[hidden]{display:none}
/* Your program shows its guide as a real book (captain 2026-10-23, after refactoringui.com's hero: "we can make it more
   like this one"): the app's own cover (ProgramGuidePDF) as a large hardcover tilted across the panel, its page block
   and back board showing at the edges, a crease at the spine and a soft sheen, a glow behind it, and thin lines of
   light running on from its edges, one with a bright streak drifting along it. Nothing scales, so the cover stays
   as sharp as it was drawn (2x art). Tilted flat, not turned in 3D: the captain tried the turned pose and preferred
   this angle (2026-10-23: "just go back to what it was before"). */
/* the words keep their column; the book takes what is left and runs on past it, off the panel's edge */
.fl-body:has(.fl-book){grid-template-columns:minmax(15rem,1fr) minmax(0,.9fr)}
.fl-book{--tilt:9deg;position:relative;display:block;isolation:isolate;justify-self:start;width:calc(var(--oh,32rem) * .7 * 720 / 932);aspect-ratio:720/932;align-self:center}
.fl-book::after{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(205 228 248 / .5),rgb(160 196 228 / .16) 52%,transparent 74%)}
.fl-bk,.fl-bk-lines{position:absolute;inset:0;transform:translate(4%,3%) rotate(var(--tilt))}
.fl-bk{z-index:1;border-radius:2px 5px 5px 2px;box-shadow:3px 4px 0 #16202c,0 2.5rem 3.5rem -1.25rem rgb(5 12 24 / .6),0 .5rem 1rem -.5rem rgb(5 12 24 / .45)}
.fl-bk-cover{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;display:block}
/* the page block under the cover, its edges just showing on the open side and the foot */
.fl-bk::before{content:"";position:absolute;left:1.2%;top:1%;right:-1.6%;bottom:-1.6%;z-index:-1;border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(135deg,#f1f4f7 0 1.5px,#d9e1e9 1.5px 2.5px)}
/* the crease at the spine and a soft sheen across the board */
.fl-bk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgb(0 0 0 / .45),rgb(255 255 255 / .16) 1.8%,rgb(0 0 0 / .28) 3.4%,transparent 6.5%),
    linear-gradient(118deg,transparent 30%,rgb(255 255 255 / .09) 46%,transparent 60%)}
/* the lines of light carry on from the book's edges across the panel */
.fl-bk-lines{z-index:0;pointer-events:none}
.fl-bk-lines i{position:absolute;display:block;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .3) 35%,rgb(255 255 255 / .3) 65%,transparent)}
.fl-bk-lines i:nth-child(1){left:-160%;right:-160%;top:-7%;height:1px}
.fl-bk-lines i:nth-child(2){left:-160%;right:-160%;bottom:-10%;height:1px}
.fl-bk-lines i:nth-child(3){top:-160%;bottom:-160%;left:-8%;width:1px;background:linear-gradient(180deg,transparent,rgb(255 255 255 / .3) 35%,rgb(255 255 255 / .3) 65%,transparent)}
.fl-bk-lines i:nth-child(1)::after{content:"";position:absolute;top:-1px;left:44%;width:9%;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#eaf5ff 55%,transparent);filter:drop-shadow(0 0 4px rgb(214 236 255 / .9))}
/* opening, the book settles in: a little lower and more turned, easing into place (transform only) */
.fl-feat .fl-book .fl-bk{transition:transform .9s cubic-bezier(.2,.9,.25,1)}
.fl-feat:not(.open) .fl-book .fl-bk{transform:translate(6%,8%) rotate(calc(var(--tilt) + 4deg))}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
  .fl-feat.open .fl-bk-lines i:nth-child(1)::after{animation:fl-streak 7s cubic-bezier(.45,0,.55,1) infinite alternate}
}
@keyframes fl-streak{from{transform:translateX(-260%)}to{transform:translateX(260%)}}
.fl-phone .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fl-feat:focus-visible{outline:none}
.fl-feat:focus-visible .fl-tile-in{outline:2px solid var(--steel-5);outline-offset:-4px}
/* a tablet or phone: the seven as a list under the wall; a tap opens one in place, the rest move down */
@media(max-width:1023px){
  .fl-feats{display:flex;flex-direction:column;gap:var(--fl-gap);margin:clamp(1.5rem,5vw,2.5rem) var(--gutter-wide-sm,1rem) 0}
  .fl-feat{position:relative;display:block;width:100%;height:3.5rem;aspect-ratio:auto;padding:0;border:0;background:none}
  .fl-feat .fl-tile-in{display:flex;align-items:center}
  .fl-feat .fl-ico{display:none}
  .fl-feat .fl-top{position:static;transform:none;opacity:1;display:flex;width:auto;max-width:none;padding:0 1.25rem;color:var(--fl-ink);font-weight:500}
  .fl-feat .fl-top .fl-pro{display:inline-grid;color:#fff;background:var(--steel-5)}
  .fl-feat .fl-bottom{display:none}
  .fl-feat.open{height:auto}
  /* (a diagram card's box is a size container; open, it takes its height from what it shows) */
  .fl-feat.open .fl-tile-in{position:relative;display:block;container-type:normal}
  .fl-feat.open .fl-tile-in::before{opacity:1}
  .fl-feat.open .fl-top{display:none}
  .fl-feat .fl-body{display:none}
  .fl-feat.open .fl-body{position:relative;inset:auto;display:grid;padding:1.5rem clamp(1.25rem,4vw,2.5rem)}
  .fl-phone{--pw:min(12rem,30vw)}
  .fl-body:has(.fl-book){grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .fl-book{width:min(18.5rem,60vw);margin:.5rem 0 1rem}
}
@media(max-width:599px){
  .fl-feat.open .fl-body{grid-template-columns:1fr;justify-items:center;gap:1.25rem;padding:1.5rem 1.25rem 1.75rem}
  .fl-feat.open .fl-body:has(.fl-book){grid-template-columns:1fr}
  .fl-book{justify-self:center;margin:1rem 0 2rem}
  /* on a phone the light stays round the book, clear of the words above it */
  .fl-bk-lines i:nth-child(3){display:none}
  .fl-bk-lines i:nth-child(1){top:-9%;left:-40%;right:-40%}
  .fl-bk-lines i:nth-child(2){left:-40%;right:-40%}
  .fl-text{justify-self:stretch;gap:.625rem}
  .fl-desc{font-size:var(--text-base)}
  .fl-phone{--pw:min(11rem,46vw)}
}

/* the viewport's bottom frost is tinted for a dark page; over this sheet it takes the sheet's tone */
html.fl-under .bottom-blur::after{background:linear-gradient(transparent,rgb(243 245 248 / .55))}

/* Reduce Motion: the wall stands still, the fill and the white icon fade, a card opens at once */
@media(prefers-reduced-motion:reduce){
  .fl-tile{transform:none!important;opacity:1!important}
  .fl-head{filter:none!important;opacity:1!important}
  .fl-tile-in::before{transition:opacity .3s ease}
  .fl-ico .fl-glyph,.fl-top,.fl-bottom{transition:opacity .3s ease}
  .fl-tile:hover .fl-ico{transform:translate(-50%,-50%)}
  .fl-dia [class*="m-"]{transition-duration:.3s!important;transition-delay:0s!important;animation:none!important}
  .fl-body,.fl-feat.open .fl-body{transition:none}
}

/* Nova's easter egg (captain 2026-10-19/20): its colours slowly bloom out through the cards and mix
   (features-light.js, assets/nova-mix.js). Two fixed canvases over the wall, cut to the cards in the shader: a faint
   wash, and under it a lighten copy in hues darker than the card, so only the drawings take the colour. */
.fl-nova-mix{position:fixed;inset:0;z-index:40;width:100%;height:100%;pointer-events:none}
.fl-nova-mix.tint{mix-blend-mode:lighten}
/* Nova's tile keeps the steel every tile takes; only the colours it glows are Nova's (captain 2026-10-30: "just make the
   colors that it glows look a little bit more Nova, not ... black"): a soft ring of Ask Nova's pearl (sky, lilac,
   pink) behind its mark under the pointer, or on touch while on screen, and its bloom (nova-mix.js) in the same hues. */
.fl-tile[data-nova] .fl-tile-in::after{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:58%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  pointer-events:none;background:conic-gradient(from 210deg,#9AD7FF,#C6B4FF,#FFC6E3,#C6B4FF,#9AD7FF);filter:blur(14px);opacity:0;transition:opacity .45s ease;
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 44%,#000 60%,transparent 72%);mask:radial-gradient(circle,transparent 30%,#000 44%,#000 60%,transparent 72%)}
@media(hover:hover){.fl-tile[data-nova]:hover .fl-tile-in::after{opacity:.55}}
@media(hover:none){.fl-tile[data-nova].live .fl-tile-in::after{opacity:.5}}
/* PRO's letters sat high in the big card's pill and low in the tile's (captain 2026-10-23: "it seems like it's a
   little bit to the top"): the line box was the font's, ascent and descent, not the capitals'. Trimmed to the cap
   height and the baseline, the letters are the only thing in the pill, set at its centre (an inline block, as a
   grid's text cannot be trimmed), in every chip and at every size. Last in the file, so it wins over each chip's
   own display. */
@supports (text-box:trim-both cap alphabetic) and (height:1cap){
  .fl-pro{--ph:1.25rem;display:inline-block;box-sizing:border-box;height:var(--ph);padding-top:calc((var(--ph) - 1cap) / 2);padding-bottom:0;
    text-box:trim-both cap alphabetic;text-align:center;vertical-align:middle}
  .fl-title .fl-pro{--ph:1.5rem;height:var(--ph)}
  .fl-top .fl-pro{padding-top:calc((var(--ph) - 1cap) / 2)}
  @media(max-width:1023px){.fl-feat .fl-top .fl-pro{display:inline-block}}
}