/* Eto landing: chrome and sections. Mobile first.
   Spacing measured from the sites: hyperspell.com container 1280 / px 48 /
   py 80, h1 mb 24, rows gap 80, boxes p 32; generaltranslation.com hairline
   #e4e4e7 rails, hatch band 33px (45deg, 1px ink at 8.6%, 8px step), 38px
   buttons; radiusbrowser.com 56px nav, 32px glow grid, 474px footer band
   with the mark in hairlines; aside.com 22px window radius, section py 64;
   replicas.dev footer pt 70. */

.lp-main { position: relative; z-index: 1; }
.lp-container { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.lp-rails { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lp-rails-inner { max-width: var(--container); height: 100%; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.lp-section { position: relative; padding: 48px 0; border-top: 1px solid var(--line); }
.lp-hatch { height: 33px; border-top: 1px solid var(--line); background: repeating-linear-gradient(45deg, rgba(7, 7, 7, 0.086) 0px, rgba(7, 7, 7, 0.086) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 8px); }
.lp-head { max-width: 768px; }
.lp-head .lp-h2 { margin-bottom: 16px; }
.lp-head .lp-lede { margin: 0; }
.lp-row-head { display: flex; flex-direction: column; gap: 20px; }

/* Cell grids: hairline cells, square. Hover = generaltranslation.com's
   group-hover/item: fill ink 5%, border emphasis. Nothing scales. */
.lp-cells { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); background: var(--bg); }
.lp-cell { position: relative; padding: 24px; border-bottom: 1px solid var(--line); min-width: 0; transition: background-color 0.2s, box-shadow 0.2s; }
.lp-cell:last-child { border-bottom: 0; }
.lp-cell:hover { background: var(--ink-5); box-shadow: inset 0 0 0 1px var(--ink); z-index: 1; }
.lp-cell-head { display: flex; align-items: center; gap: 10px; }
.lp-cell-head .li { color: var(--ink); }

/* ---------- Framed product screenshot. One component, rendered only through
   {% lp_shot "<id>" %}. The screenshot floats on a panel carrying the hero's
   noise gradient: noise.js paints the canvas from the same shader the hero
   windows use, and the CSS gradient below it (the .lp-sq-window colours, plus
   a tiled grain) is what shows without WebGL. Natural aspect, never cropped.

   No two frames on a page carry the same field. noise.js numbers the frames in
   document order (data-field 0 to 7, repeating) and hands each one its own
   still of the shader in --lp-field-i; the numbered rules below are the flat
   gradients that stand in for those stills without WebGL, moved through the
   same range of angles and depths so the variety survives the fallback. */

/* A frame is as wide as its column unless one of the max-width clamps below
   holds it in, and a clamp is a size, not an alignment: without the auto
   inline margins every clamped frame sat hard against the left rail with all
   of its slack piled on the right (64px on a 1120 clamp, 360px on is-sm).
   The explicit width keeps the box definite inside a grid cell, so the auto
   margins centre it there too instead of shrinking it to fit. */
.lp-shot, .lp-shot-row, .lp-shot-duo { width: 100%; margin-inline: auto; }
.lp-shot { position: relative; display: block; }
.lp-shot-frame { position: relative; isolation: isolate; padding: 12px; border-radius: 12px; overflow: hidden; background-color: #e88040; --lp-flat: linear-gradient(135deg, #f9ceaf, #e88040 55%, #e85840); background-image: var(--lp-field-i, var(--lp-flat)); background-size: cover; background-position: center; }
.lp-shot-frame[data-field="1"] { background-color: #ea8f52; --lp-flat: linear-gradient(108deg, #fbdcc6, #ea8f52 58%, #e77a4a); }
.lp-shot-frame[data-field="2"] { background-color: #e2673c; --lp-flat: linear-gradient(196deg, #f3b489, #e2673c 48%, #cf4630); }
.lp-shot-frame[data-field="3"] { background-color: #e8813f; --lp-flat: linear-gradient(72deg, #f7c9a6, #e8813f 52%, #e2603c); }
.lp-shot-frame[data-field="4"] { background-color: #de5c36; --lp-flat: linear-gradient(248deg, #efa87c, #de5c36 46%, #c94028); }
.lp-shot-frame[data-field="5"] { background-color: #eda062; --lp-flat: linear-gradient(160deg, #fce3d0, #eda062 60%, #e8804a); }
.lp-shot-frame[data-field="6"] { background-color: #e7783e; --lp-flat: linear-gradient(300deg, #f6c39d, #e7783e 50%, #dd5c38); }
.lp-shot-frame[data-field="7"] { background-color: #e56e3c; --lp-flat: linear-gradient(24deg, #f4bb93, #e56e3c 54%, #d84e30); }
/* Film grain at device resolution. The still fields are rendered smooth (cover
   would smear grain baked into them, and a smooth field encodes to a fraction
   of the bytes), so this layer is the print grain for every frame. */
.lp-shot-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.34; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 160px 160px; }
.lp-shot-frame[data-field-ready]::before { opacity: 0.3; }
.lp-shot-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: inherit; }
.lp-shot-img { position: relative; z-index: 2; width: 100%; max-width: 100%; height: auto; margin-inline: auto; display: block; border-radius: 8px; background: var(--bg-2); box-shadow: 0 0 0 1px rgba(7, 7, 7, 0.12); }
.lp-shot-cap { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); }
/* The second beat of a section. It holds a 1:1 crop of one part of a screen,
   never a whole screen shrunk down, so it can sit narrower than the full-width
   captures and still be read. */
.lp-shot.is-sm { max-width: 760px; }
/* Portrait phone capture. The capture is already a screen: it carries the
   app's own ground, its status bar and its notch, so a field panel around it
   reads as a second border rather than a frame. The phone stands on the page
   on its own -- 28px corners and one hairline -- and the field is left to the
   landscape frames. */
/* The bezel is drawn, not baked in: an ink shell one screenshot-corner wider
   than the screen, a hairline where it meets the page, and a faint inner ring
   where glass meets metal. The capture already carries the status bar and the
   Dynamic Island, so nothing is painted over it. */
.lp-shot.is-phone .lp-shot-frame { padding: 9px; background: #121214; border-radius: 42px; border: 1px solid var(--line-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); max-width: 262px; margin: 0 auto; }
.lp-shot.is-phone .lp-shot-frame::before, .lp-shot.is-phone .lp-shot-frame::after { display: none; }
.lp-shot.is-phone .lp-shot-img { max-width: 100%; margin: 0; border-radius: 33px; box-shadow: none; display: block; }
/* Two frames in one beat, stacked at every width. A desktop capture put in
   half a column is a big screen on a small screen: nobody can read it. And a
   panel stretched to match its neighbour letterboxes a short image (the
   assistant admin is 1920x624), so each frame is its image plus the inset. */
.lp-shot-row, .lp-shot-duo { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Icon list */
.lp-list { display: grid; gap: 12px; }
.lp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--text); }
.lp-list li .li { margin-top: 3px; color: var(--ink); }

/* ---------- Header: 56px bar cut into hairline cells that sit on the page
   rails (generaltranslation.com cells, radiusbrowser.com height and pills).
   The CTA cell is solid ink and sweeps orange on hover. ---------- */
.lp-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.lp-nav { max-width: var(--container); margin: 0 auto; height: 56px; display: flex; align-items: stretch; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.lp-nav-cell { display: flex; align-items: center; padding: 0 20px; border-right: 1px solid var(--line); }
.lp-nav-cell.is-spacer { flex: 1; border-right: 0; padding: 0; }
.lp-brand { display: flex; align-items: center; gap: 9px; }
.lp-brand img { width: 22px; height: 22px; }
.lp-brand span { font-family: var(--font-mark); font-size: 24px; line-height: 1; color: var(--ink); transform: translateY(1px); }
.lp-nav-links { display: none; align-items: stretch; }
.lp-nav-links a { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.15s, background-color 0.15s; }
.lp-nav-links a:hover { color: var(--ink); background: var(--ink-5); }
.lp-nav-links a .li { width: 15px; height: 15px; }
.lp-nav-login { display: none; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.15s, background-color 0.15s; }
.lp-nav-login:hover { color: var(--ink); background: var(--ink-5); }
.lp-nav-login .li { width: 15px; height: 15px; }
.lp .lp-nav-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.lp .lp-nav-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateX(-101%); transition: transform 0.42s var(--ease-out); }
.lp .lp-nav-cta:hover::before { transform: translateX(0); }
.lp .lp-nav-cta .li { width: 15px; height: 15px; transition: transform 0.3s var(--ease-out); }
.lp .lp-nav-cta:hover .li { transform: translateX(4px); }
.lp-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 100%; color: var(--ink); }
.lp-menu-btn:hover { background: var(--ink-5); }
.lp-menu { position: fixed; inset: 0; z-index: 80; background: var(--bg); padding: 0 var(--gutter) 32px; display: none; flex-direction: column; }
.lp-menu.is-open { display: flex; }
.lp-menu-top { height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.lp-menu-links { margin-top: 8px; display: flex; flex-direction: column; }
.lp-menu-links a { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 26px; letter-spacing: -0.01em; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line); }
.lp-menu-links a .li { width: 20px; height: 20px; color: var(--muted); }
.lp-menu-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.lp-menu-actions .lp-btn, .lp-menu-actions .lp-btn-line { height: 50px; font-size: 16px; }

/* ---------- Hero: the copy centred in the band, the radiusbrowser.com glow
   grid across the whole band with windows onto the Eto noise gradient in the
   gutters either side of the copy (below it on phones). One layer, nothing
   boxed. ---------- */
.lp-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.lp-hero-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lp-hero-grid canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-sq { position: absolute; transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.lp-sq-outline { border: 1px solid color-mix(in srgb, var(--line), var(--glow) calc(var(--i, 0) * 100%)); background-color: color-mix(in srgb, transparent, var(--glow) calc(var(--i, 0) * 26%)); }
.lp-sq-window { background: linear-gradient(135deg, #f9ceaf, #e88040 55%, #e85840); }
.lp-hero-grid.has-gl .lp-sq-window { background: none; }
.lp-sq-window::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: calc(0.22 * (1 - var(--i, 0))); transition: opacity 160ms ease-out; }
.lp-sq-window::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.6), var(--glow) calc(var(--i, 0) * 100%)); transition: border-color 160ms ease-out; }
.lp-hero-inner { position: relative; z-index: 1; padding: 48px var(--gutter) 248px; }
.lp-hero-copy { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; cursor: default; }
/* Kicker: inline (not flex) so the icon rides the first line and a wrapped
   kicker centres line by line on phones. */
.lp-hero-kicker { text-align: center; text-wrap: balance; font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); }
.lp-hero-kicker .li { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -3px; color: var(--accent); }
.lp-hero .lp-h1 { margin: 2px 0 0; text-wrap: balance; }
.lp-typer { min-height: 3.2em; max-width: 100%; text-align: left; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--ink); }
.lp-typer .lp-typer-prompt { color: var(--faint); margin-right: 8px; }
.lp-hero-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.lp-hero-foot { display: grid; grid-template-columns: 1fr; margin-top: 10px; border-top: 1px solid var(--line); }
.lp-hero-foot div { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lp-hero-foot .li { width: 14px; height: 14px; color: var(--ink); }

/* ---------- Proof (replicas.dev stat tiles) ---------- */
/* The figures are printed in full ("$1,360,789.08"), never abbreviated, so
   the grid is three across at most and the number is sized to the cell. */
.lp-proof-grid { grid-template-columns: 1fr; }
.lp-proof-grid .lp-cell b { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-proof-grid .lp-cell span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.lp-proof-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.lp-vouch { margin-top: 24px; }
.lp-vouch-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); }
.lp-vouch-cell { padding: 20px; border-bottom: 1px solid var(--line); transition: background-color 0.2s; }
.lp-vouch-cell:hover { background: var(--ink-5); }
.lp-vouch-cell:last-child { border-bottom: 0; }
.lp-vouch-cell img { width: 100%; height: auto; border-radius: 6px; }
.lp-vouch-cell p { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---------- Problem ---------- */
.lp-problem-list { margin: 24px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); counter-reset: none; }
.lp-problem-num { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; letter-spacing: -0.02em; color: var(--faint); }
.lp-problem-list li { display: grid; grid-template-columns: 24px 20px 1fr; gap: 12px; align-items: start; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--text); transition: background-color 0.15s; }
.lp-problem-list li:hover { background: var(--ink-5); }
.lp-problem-list li:last-child { border-bottom: 0; }
.lp-problem-list li .li { margin-top: 2px; color: var(--ink); }
.lp-problem-close { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; color: var(--ink); }

/* ---------- The mono kicker over a section heading ---------- */
.lp-beat-tag { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); }
.lp-beat-tag .li { width: 14px; height: 14px; color: var(--ink); }

/* ---------- Showcase: the problem, then one self-advancing frame that holds
   the six screens, then the three features that earn a beat of their own.
   A kicker, a heading, one sentence and one frame each. Nothing boxed. ---------- */
.lp-open { padding-bottom: 8px; }
.lp-show { padding: 40px 0; border-top: 1px solid var(--line); }
.lp-container > .lp-show:first-child { padding-top: 0; border-top: 0; }
.lp-show-head { max-width: 720px; }
.lp-show-head .lp-h2 { margin-top: 12px; font-size: clamp(25px, 5.4vw, 40px); }
.lp-show-head .lp-body { margin-top: 12px; max-width: 62ch; }
.lp-show > .lp-shot, .lp-show > .lp-shot-row { margin-top: 24px; }

/* ---------- Screen tour (generaltranslation.com pacing, aside.com frame):
   one frame, tabs that advance themselves. The progress line is a CSS
   animation on the selected tab, so nothing runs per frame: motion.js only
   moves a class and waits for the animation to end. ---------- */
.lp-tour { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.lp-tour-head { max-width: 760px; }
.lp-tour-head .lp-h2 { margin-top: 12px; font-size: clamp(25px, 5.4vw, 40px); }
/* The tabs wrap into as many rows as they need; nothing scrolls sideways and
   no label is ever cut. Every tab grows, so each row runs the full width of the
   strip. The rules are drawn on the cells' left and bottom edges and the strip
   carries only its top and right, so a wrapped row never doubles a hairline. */
.lp-tour-tabs { margin-top: 26px; display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-left: 0; border-bottom: 0; }
.lp .lp-tour-tab { position: relative; flex: 1 0 auto; height: 46px; padding: 0 16px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; font-size: 14px; color: var(--muted); white-space: nowrap; transition: color 0.15s, background-color 0.15s; }
.lp .lp-tour-tab:hover { color: var(--ink); background: var(--ink-5); }
.lp .lp-tour-tab[aria-selected="true"] { color: var(--ink); }
.lp .lp-tour-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.lp-tour-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.lp-tour-tab[aria-selected="true"] .lp-tour-bar { animation: lp-tour-fill var(--tour-dur, 5600ms) linear both; }
.lp-tour.is-held .lp-tour-bar { animation-play-state: paused; }
.lp-tour.is-off .lp-tour-tab[aria-selected="true"] .lp-tour-bar { animation: none; transform: scaleX(1); }
@keyframes lp-tour-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp .lp-tour-pause { flex: 0 0 auto; width: 46px; display: inline-flex; align-items: center; justify-content: center; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); transition: background-color 0.15s; }
.lp .lp-tour-pause:hover { background: var(--ink-5); }
.lp .lp-tour-pause:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.lp-tour-pause .is-play { display: none; }
.lp-tour-pause.is-off .is-play { display: block; }
.lp-tour-pause.is-off .is-pause { display: none; }
.lp-tour-desc { margin: 16px 0 0; max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--muted); min-height: 4.65em; transition: opacity 0.16s; }
/* The panels are stacked in one grid cell rather than absolutely positioned
   over the first one. A grid row is as tall as its tallest item, so the tower
   takes the height of the tallest capture in the set and every panel keeps its
   own natural rectangle: nothing is stretched, cropped or letterboxed, and a
   capture that is not 16:10 no longer hangs out of the bottom of the frame.
   Tallest rather than per-panel height on purpose: the tour advances itself
   every few seconds, and a tower that resized with the active screen would
   shunt the rest of the page up and down while the reader is looking at it. */
.lp-tour-tower { position: relative; margin: 18px auto 0; display: grid; }
.lp-tour-panel { grid-area: 1 / 1; align-self: start; opacity: 0; transition: opacity 0.42s var(--ease-out); pointer-events: none; }
.lp-tour-panel.is-on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .lp-tour-panel { transition: none; }
  .lp-tour-desc { transition: none; }
}

/* ---------- Product tour: a sticky mono index, then one part per area with
   its own frames and a spec list. ---------- */
/* Seventeen jump links in a strip of equal hairline cells that wrap: two rows at
   1440, more as the page narrows, and never a sideways scroll or a clipped
   label. Column counts are set per width rather than left to auto-fit so the
   rows come out balanced (nine and eight at 1440) instead of one full row and
   a short one. Each cell draws its own left and bottom rule and the strip
   draws the right one, so nothing doubles and the last row can end part way
   across without leaving a broken line: the strip's own bottom border, pulled
   up by the negative margin onto the cells' bottom rules, closes it. */
/* Sticky only where the strip is the two rows it is meant to be. Below 1180
   it needs three rows or more, and a bar that deep pinned to the top of a
   phone would take a quarter of the screen for the whole page, so there it
   sits at the top of the page and scrolls away like any other index. */
.lp-tour-nav { position: static; z-index: 20; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.lp-tour-nav-inner { max-width: var(--container); margin: 0 auto -1px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 1px solid var(--line); }
.lp-tour-nav a { position: relative; min-width: 0; height: 42px; padding: 0 10px; display: flex; align-items: center; justify-content: center; text-align: center; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color 0.15s, background-color 0.15s; }
.lp-tour-nav a:hover { color: var(--ink); background: var(--ink-5); }
.lp-tour-nav a.is-here { color: var(--ink); }
.lp-tour-nav a.is-here::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); }
@media (min-width: 560px) { .lp-tour-nav-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .lp-tour-nav-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lp-tour-nav a { padding: 0 14px; font-size: 12px; } }
@media (min-width: 1000px) { .lp-tour-nav-inner { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .lp-tour-nav { position: sticky; top: 56px; } .lp-tour-nav-inner { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
/* The sticky strip and the header above it are what an anchor has to clear.
   The offset is written by the page script from their measured heights, since
   the strip is two rows on a laptop and six on a phone, and it only sticks
   above 1180. */
.lp-part { padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: var(--lp-anchor-top, 104px); }
.lp-part:first-child { border-top: 0; }
.lp-part-head { max-width: 760px; }
.lp-part-head .lp-h2 { margin-top: 12px; font-size: clamp(25px, 5.4vw, 40px); }
.lp-part-head .lp-body { margin-top: 12px; max-width: 66ch; }
.lp-part > .lp-shot, .lp-part > .lp-shot-row { margin-top: 24px; }
.lp-part > .lp-shot-duo { margin-top: 16px; }
.lp-spec { margin-top: 26px; border-top: 1px solid var(--line); }
.lp-spec > div { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lp-spec dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--faint); }
.lp-spec dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.lp-part-cta { margin-top: 24px; }
.lp-more-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 36px; }
.lp-more-grid .lp-h4 { margin-bottom: 8px; }
.lp-more-grid .lp-shot { margin-top: 16px; }
/* A part of "and the rest" whose screen only reads at full width. */
.lp-more-beat { margin-top: 36px; }
.lp-more-beat .lp-h4 { margin-bottom: 8px; }
.lp-more-beat .lp-small { max-width: 66ch; }
.lp-more-beat > .lp-shot, .lp-more-beat > .lp-ios-row { margin-top: 16px; max-width: 1120px; }

/* ---------- Feature rows. The copy sits over its screen rather than beside
   it: both of these captures are wide tables, and two thirds of a column is
   not enough width to read one. ---------- */
.lp-feature { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 48px 0; border-top: 1px solid var(--line); }
.lp-feature > .lp-shot { max-width: 1120px; }
.lp-feature:first-child { border-top: 0; padding-top: 0; }
.lp-feature .lp-h2 { font-size: clamp(25px, 5.4vw, 40px); }
.lp-feature .lp-body { margin-top: 10px; max-width: 48ch; }
.lp-feature .lp-list { margin-top: 20px; }
.lp-feature-pair { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* ---------- iOS: the four phones are one composition, never a lone frame
   floating in a band of white. Below 640 they are a snapped row you swipe. */
.lp-ios-row { margin-top: 28px; display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.lp-ios-row::-webkit-scrollbar { display: none; }
/* equal heights: the frames match because the columns do, and the captions
   are pushed to the bottom of the stretched figure rather than padding the
   frame out with gradient. */
.lp-ios-row .lp-shot { scroll-snap-align: start; display: flex; flex-direction: column; }
.lp-ios-row .lp-shot .lp-shot-frame { padding: 9px; border-radius: 42px; max-width: none; margin: 0; }
.lp-ios-row .lp-shot .lp-shot-cap { margin-top: auto; padding-top: 12px; }
.lp-ios-row .lp-shot.is-phone .lp-shot-img { max-width: 100%; border-radius: 33px; }
.lp-ios-foot { margin-top: 24px; }

/* ---------- API ---------- */
.lp-api-grid { margin-top: 32px; display: grid; grid-template-columns: 1fr; gap: 28px; }
.lp-code { border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.lp-code-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); }
.lp-code pre { margin: 0; padding: 18px 16px 22px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.lp-code .c { color: var(--muted); }
.lp-code .k { color: var(--ink); font-weight: 500; }
.lp-clients { margin-top: 28px; display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); }
.lp-client { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); transition: background-color 0.15s; }
.lp-client:hover { background: var(--ink-5); }
.lp-client:last-child { border-bottom: 0; }
.lp-client img { width: 20px; height: 20px; filter: grayscale(1); }
.lp-client .li { color: var(--ink); }

/* ---------- Custom builds ---------- */
.lp-custom { display: grid; grid-template-columns: 1fr; gap: 28px; }
.lp-custom-cta { margin-top: 24px; }

/* ---------- Security ---------- */
.lp-security-grid { margin-top: 32px; }
.lp-security-grid .lp-cell h3 { margin-top: 18px; }
.lp-security-grid .lp-cell p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---------- CTA band (hyperspell.com: py 80 px 96) ---------- */
.lp-cta { border-top: 1px solid var(--line); }
.lp-cta-box { position: relative; padding: 48px 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.lp-cta-box .lp-h2 { max-width: 16ch; }
.lp-cta-box .lp-lede { margin: 0; }
.lp-cta-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lp-cta-micro { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.lp-cta-micro .li { width: 14px; height: 14px; color: var(--ink); }

/* ---------- Footer: link columns (hyperspell.com bands; replicas.dev
   pt 70), then the radiusbrowser.com band: 336/474px tall, the mark drawn in
   hairlines over the Eto gradient, fading to the page at the bottom; a
   second copy in ink shows through a radial mask that follows the pointer. */
.lp-footer { border-top: 1px solid var(--line); }
.lp-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 56px 0 48px; }
.lp-footer-brand { display: flex; align-items: center; gap: 9px; }
.lp-footer-brand img { width: 22px; height: 22px; }
.lp-footer-brand span { font-family: var(--font-mark); font-size: 23px; line-height: 1; color: var(--ink); }
.lp-footer-blurb { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 34ch; }
.lp-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.lp-footer-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); }
.lp-footer-col ul { margin-top: 12px; display: grid; gap: 8px; }
.lp-footer-col a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 0.15s, color 0.15s; }
.lp-footer-col a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.lp-footer-col a .li { width: 15px; height: 15px; color: var(--muted); }
.lp-footer-band { position: relative; height: 336px; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(135deg, #f9ceaf, #e88040 55%, #e85840); }
.lp-footer-band.has-gl { background: var(--bg); }
.lp-footer-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-footer-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 28%, #fff 100%); }
.lp-footer-mark { position: absolute; left: 50%; top: 44px; width: min(280px, 70vw); max-width: none; transform: translateX(-50%); }
.lp-footer-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-footer-mark path { fill: none; stroke-width: 2.4; }
.lp-mark-lines path { stroke: rgba(7, 7, 7, 0.34); }
.lp-mark-hot path { stroke: var(--ink); }
.lp-footer-mark [data-hl] { transition: opacity 0.35s; }
.lp-footer-bottom { display: flex; flex-direction: column; gap: 12px; padding: 13px 0 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.lp-footer-bottom span { display: inline-flex; align-items: center; gap: 8px; }
.lp-footer-bottom .li { width: 14px; height: 14px; color: var(--ink); }
.lp-footer-bottom a { text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Cookie consent ---------- */
.lp-consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; padding: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lp-consent p { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); }
.lp-consent p .li { margin-top: 2px; color: var(--ink); }
.lp-consent p b { font-weight: 500; color: var(--ink); }
.lp-consent-actions { margin-top: 12px; display: flex; gap: 8px; }
.lp-consent-actions button { flex: 1; }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .lp-section { padding: 64px 0; }
  .lp-list li { font-size: 16px; }
  .lp-hero-cta { flex-direction: row; align-items: center; gap: 12px; }
  .lp-hero-foot { grid-template-columns: repeat(3, auto); justify-content: center; }
  .lp-hero-foot div { border-bottom: 0; border-right: 1px solid var(--line); padding: 12px 20px; }
  .lp-hero-foot div:last-child { border-right: 0; }
  .lp-typer { font-size: 15px; }
  .lp-proof-grid { grid-template-columns: 1fr 1fr; }
  .lp-proof-grid .lp-cell { border-right: 1px solid var(--line); }
  .lp-proof-grid .lp-cell:nth-child(2n) { border-right: 0; }
  .lp-proof-grid .lp-cell:nth-last-child(-n + 2) { border-bottom: 0; }
  .lp-proof-grid .lp-cell b { font-size: clamp(28px, 4.6vw, 40px); margin-top: 14px; }
  .lp-problem-list li { font-size: 17px; padding: 20px 24px; grid-template-columns: 26px 22px 1fr; gap: 14px; }
  .lp-problem-close { font-size: 28px; }
  .lp-cells.cols-2 { grid-template-columns: 1fr 1fr; }
  .lp-cells.cols-2 .lp-cell { border-right: 1px solid var(--line); }
  .lp-cells.cols-2 .lp-cell:nth-child(2n) { border-right: 0; }
  .lp-cells.cols-2 .lp-cell:nth-last-child(-n + 2) { border-bottom: 0; }
  .lp-cells.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lp-cells.cols-3 .lp-cell { border-right: 1px solid var(--line); }
  .lp-cells.cols-3 .lp-cell:nth-child(3n) { border-right: 0; }
  .lp-cells.cols-3 .lp-cell:nth-last-child(-n + 3) { border-bottom: 0; }
  .lp-cell { padding: 28px; }
  .lp-vouch-grid { grid-template-columns: 1fr 1fr; }
  .lp-vouch-cell { border-bottom: 0; border-right: 1px solid var(--line); }
  .lp-vouch-cell:last-child { border-right: 0; }
  .lp-clients { grid-template-columns: repeat(5, 1fr); }
  .lp-client { height: 60px; border-bottom: 0; border-right: 1px solid var(--line); }
  .lp-client:last-child { border-right: 0; }
  .lp-code pre { font-size: 13px; }
  .lp-security-grid .lp-cell p { font-size: 15px; margin-top: 10px; }
  .lp-cta-actions { flex-direction: row; align-items: center; width: auto; }
  .lp-cta-box { padding: 72px 48px; }
  .lp-consent { left: auto; right: 24px; bottom: 24px; max-width: 440px; padding: 20px; }
  .lp-consent p { font-size: 14px; }
  .lp-consent-actions button { flex: none; }
  .lp-footer-cols { grid-template-columns: repeat(4, 1fr); }
  .lp-footer-band { height: 474px; }
  .lp-footer-mark { top: 40px; width: 400px; }
  .lp-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 900px) {
  :root { --gutter: 48px; }
  .lp-section { padding: 80px 0; }
  .lp-head .lp-h2 { margin-bottom: 20px; }
  .lp-nav-links { display: flex; }
  .lp-nav-login { display: inline-flex; }
  .lp-menu-btn { display: none; }
  .lp-hero-inner { min-height: 640px; padding: 104px var(--gutter) 112px; display: flex; align-items: center; }
  .lp-hero-copy { gap: 22px; max-width: 720px; }
  .lp-hero-cta { margin-top: 8px; }
  .lp-hero-foot { margin-top: 14px; }
  .lp-hero-foot div { padding: 14px 24px; }
  .lp-proof-grid { grid-template-columns: repeat(3, 1fr); }
  .lp-proof-grid .lp-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .lp-proof-grid .lp-cell:nth-child(3n) { border-right: 0; }
  .lp-proof-grid .lp-cell:nth-last-child(-n + 3) { border-bottom: 0; }
  .lp-proof-grid .lp-cell b { font-size: clamp(27px, 3.0vw, 44px); }
  .lp-cells.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lp-cells.cols-4 .lp-cell { border-bottom: 0; border-right: 1px solid var(--line); }
  .lp-cells.cols-4 .lp-cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .lp-cells.cols-4 .lp-cell:last-child { border-right: 0; }
  .lp-cells.cols-6 { grid-template-columns: repeat(6, 1fr); }
  .lp-cells.cols-6 .lp-cell { border-bottom: 0; border-right: 1px solid var(--line); }
  .lp-cells.cols-6 .lp-cell:last-child { border-right: 0; }
  .lp-row-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .lp-feature { gap: 28px; padding: 80px 0; }
  .lp-shot-frame { padding: 16px; }
  .lp-shot-row, .lp-shot-duo { gap: 20px; }
  .lp-show { padding: 64px 0; }
  .lp-show > .lp-shot, .lp-show > .lp-shot-row { margin-top: 32px; max-width: 1120px; }
  .lp-part { padding: 72px 0; }
  .lp-part > .lp-shot, .lp-part > .lp-shot-row, .lp-part > .lp-shot-duo { margin-top: 32px; max-width: 1120px; }
  .lp-spec { max-width: 1120px; }
  .lp-spec > div { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: baseline; }
  .lp-more-grid { max-width: 1120px; }
  .lp-more-beat { margin-top: 48px; }
  .lp-api-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; margin-top: 40px; }
  .lp-clients { margin-top: 40px; }
  .lp-custom { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .lp-cta-box { padding: 80px 96px; flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .lp-cta-box .lp-cta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
  .lp-footer-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; padding: 70px 0 56px; }
  .lp-tour { margin-top: 56px; padding-top: 56px; }
  .lp-tour-tower { margin-top: 22px; max-width: 1120px; }  /* centred by the auto inline margins above */
  .lp-tour-desc { font-size: 16px; min-height: 3.1em; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .lp-ios-row { grid-auto-columns: 34%; }
}

@media (min-width: 1024px) {
  .lp-ios-row { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; gap: 16px; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* The two crops stand side by side only once a column is wide enough to read
   one; under that they stack and take the full column. */
@media (min-width: 1180px) {
  .lp-more-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
}

/* ---------- The solution schematic ----------------------------------------
   Every store you run gathers into Eto, and Eto fans out to the five surfaces
   that close the five gaps named above it. Hairlines, Lucide glyphs and mono
   labels; nothing here moves. The two wire bands are one SVG each, stretched
   with preserveAspectRatio="none" over strokes marked non-scaling, and drawn
   only with axis-aligned segments, so the drops stay exactly on the centres of
   the equal-width cells above and below them at any width. Under 900px the
   rows stack, the wires are hidden and a single stem joins the bands. */
.lp-sol { margin-top: 32px; }
.lp-sol-row { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.lp-sol-row > li { position: relative; min-width: 0; padding: 16px; border-bottom: 1px solid var(--line); transition: background-color 0.15s; }
.lp-sol-row > li:last-child { border-bottom: 0; }
.lp-sol-row > li:hover { background: var(--ink-5); }
.lp-sol-row .li { color: var(--ink); }
.lp-sol-name { display: block; margin-top: 14px; font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.lp-sol-row p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.lp-sol-closes { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--text); }
.lp-sol-closes .li { margin-top: 2px; color: var(--faint); }
.lp-sol-stores { grid-template-columns: 1fr 1fr; }
.lp-sol-stores > li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 16px; border-right: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); }
.lp-sol-stores > li:nth-child(2n) { border-right: 0; }
.lp-sol-stores > li:nth-last-child(-n + 2) { border-bottom: 0; }
.lp-sol-stem { height: 30px; }
.lp-sol-stem::before { content: ""; display: block; width: 1px; height: 100%; margin: 0 auto; background: var(--line-2); }
.lp .lp-sol-wire { display: none; width: 100%; height: 52px; }
.lp-sol-wire path { fill: none; stroke: var(--line-2); stroke-width: 1; }
.lp-sol-core { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 18px; text-align: center; border: 1px solid var(--ink); }
.lp-sol-core svg { width: 30px; height: 30px; }
.lp-sol-core svg path { fill: none; stroke: var(--ink); stroke-width: 16; stroke-linejoin: round; stroke-linecap: round; }
.lp-sol-core b { margin-top: 6px; font-family: var(--font-mark); font-weight: 400; font-size: 24px; line-height: 1; color: var(--ink); }
.lp-sol-core span { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; letter-spacing: -0.02em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
.lp-sol-note { margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.lp-sol-note .li { width: 14px; height: 14px; margin-top: 3px; color: var(--ink); }

@media (min-width: 640px) {
  .lp-sol-stores { grid-template-columns: repeat(4, 1fr); }
  .lp-sol-stores > li { border-bottom: 0; }
  .lp-sol-stores > li:nth-child(2n) { border-right: 1px solid var(--line); }
  .lp-sol-stores > li:last-child { border-right: 0; }
}

@media (min-width: 900px) {
  .lp-sol { margin-top: 44px; }
  .lp-sol-stem { display: none; }
  .lp .lp-sol-wire { display: block; }
  .lp-sol-out { grid-template-columns: repeat(5, 1fr); }
  .lp-sol-out > li { padding: 20px 18px 22px; border-right: 1px solid var(--line); border-bottom: 0; }
  .lp-sol-out > li:last-child { border-right: 0; }
}

/* ---------- The feature index ---------------------------------------------
   Every part of Eto as a hairline row, grouped by area and closed on load.
   Native <details>, so it works with the script disabled; the only movement is
   the chevron turning 90 degrees. No images live in here: each row links to
   the part of /product/ that shows the feature on its real screen. */
.lp-tour-more { margin-top: 10px; }
.lp-ix-head { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); max-width: 768px; }
.lp-ix-head .lp-h2 { margin-bottom: 16px; }
.lp-ix-head .lp-lede { margin: 0; }
.lp-ix { margin-top: 32px; border: 1px solid var(--line); }
.lp-ix-group { border-bottom: 1px solid var(--line); }
.lp-ix-group:last-child { border-bottom: 0; }
.lp .lp-ix-group > summary { display: flex; align-items: center; gap: 12px; padding: 15px 18px; list-style: none; cursor: pointer; transition: background-color 0.15s; }
.lp .lp-ix-group > summary::-webkit-details-marker { display: none; }
.lp .lp-ix-group > summary::marker { content: ""; }
.lp .lp-ix-group > summary:hover { background: var(--ink-5); }
.lp .lp-ix-group > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; border-radius: 0; }
.lp-ix-chev { color: var(--ink); transition: transform 0.18s var(--ease-out); }
.lp-ix-group[open] > summary .lp-ix-chev { transform: rotate(90deg); }
.lp-ix-title { font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.lp-ix-count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; color: var(--faint); }
.lp-ix-rows { border-top: 1px solid var(--line); }
.lp-ix-rows > li { border-bottom: 1px solid var(--line); }
.lp-ix-rows > li:last-child { border-bottom: 0; }
.lp-ix-rows a { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 13px 18px; transition: background-color 0.15s; }
.lp-ix-rows a:hover { background: var(--ink-5); }
.lp-ix-rows a > .li:first-child { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; color: var(--ink); }
.lp-ix-name { grid-column: 2; grid-row: 1; font-size: 15px; color: var(--ink); }
.lp-ix-line { grid-column: 2; grid-row: 2; font-size: 14px; line-height: 1.45; color: var(--muted); }
.lp-ix-go { grid-column: 3; grid-row: 1; margin-top: 3px; color: var(--faint); transition: color 0.15s; }
.lp-ix-rows a:hover .lp-ix-go { color: var(--ink); }
.lp-ix-close { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .lp-ix-chev { transition: none; } }

@media (min-width: 900px) {
  .lp-ix { margin-top: 44px; }
  .lp-ix-head { margin-top: 72px; padding-top: 56px; }
  .lp-ix-head .lp-h2 { margin-bottom: 20px; }
  .lp .lp-ix-group > summary { padding: 17px 24px; }
  .lp-ix-rows a { grid-template-columns: 18px 260px minmax(0, 1fr) auto; align-items: center; gap: 0 16px; padding: 12px 24px; }
  .lp-ix-rows a > .li:first-child { grid-row: 1; margin-top: 0; }
  .lp-ix-line { grid-column: 3; grid-row: 1; }
  .lp-ix-go { grid-column: 4; margin-top: 0; }
  .lp-ix-close { margin-top: 32px; flex-direction: row; align-items: center; gap: 16px; }
}

/* ---------- The Product menu ----------------------------------------------
   A panel the width of the container, cut into hairline cells like the nav
   above it: three columns of the same grouped list as the index, then one
   screenshot and the way through to the Product page. White, no shadow, one
   hairline along the bottom. Hover intent and the keyboard live in nav.js. */
.lp-nav-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; display: none; background: var(--bg); border-bottom: 1px solid var(--line); }
.lp-nav-panel-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 316px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.lp-mm-col { min-width: 0; padding: 16px 0 20px; border-right: 1px solid var(--line); }
.lp-mm-head { padding: 0 18px; margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--faint); }
.lp-mm-col > .lp-mm-head:first-child { margin-top: 0; }
.lp-mm-rows { margin-top: 4px; }
.lp-mm-rows a { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: start; gap: 1px 11px; padding: 7px 18px; transition: background-color 0.15s; }
.lp-mm-rows a:hover { background: var(--ink-5); }
.lp-mm-rows a .li { grid-row: 1 / span 2; margin-top: 2px; width: 16px; height: 16px; color: var(--ink); }
.lp-mm-name { font-size: 14px; line-height: 1.35; color: var(--ink); }
.lp-mm-line { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.lp-mm-aside { min-width: 0; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.lp-shot.is-nav .lp-shot-frame { padding: 8px; border-radius: 8px; }
.lp-shot.is-nav .lp-shot-img { border-radius: 4px; }
.lp-shot.is-nav .lp-shot-cap { margin-top: 10px; font-size: 11.5px; }
.lp .lp-mm-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 42px; padding: 0 16px; background: var(--ink); color: var(--on-ink, #fff); font-size: 14px; font-weight: 500; }
.lp .lp-mm-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateX(-101%); transition: transform 0.42s var(--ease-out); }
.lp .lp-mm-cta:hover::before { transform: translateX(0); }
.lp .lp-mm-cta .li { width: 15px; height: 15px; transition: transform 0.3s var(--ease-out); }
.lp .lp-mm-cta:hover .li { transform: translateX(4px); }
.lp-mm-links { margin-top: auto; display: grid; border-top: 1px solid var(--line); }
.lp-mm-links a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--line); transition: color 0.15s; }
.lp-mm-links li:last-child a { border-bottom: 0; }
.lp-mm-links a:hover { color: var(--ink); }
.lp-mm-links .li { width: 15px; height: 15px; color: var(--ink); }
.lp-nav-chev { transition: transform 0.18s var(--ease-out); }
.lp-nav-links a[aria-expanded="true"] { color: var(--ink); background: var(--ink-5); }
.lp-nav-links a[aria-expanded="true"] .lp-nav-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .lp-nav-chev, .lp .lp-mm-cta::before, .lp .lp-mm-cta .li { transition: none; } }

@media (min-width: 900px) {
  .lp-nav-panel { display: block; }
  .lp-nav-panel[hidden] { display: none; }
}

/* ---------- The Product rows inside the mobile menu ---------- */
.lp-menu { overflow-y: auto; overscroll-behavior: contain; }
/* The Product fold. Its summary is a menu row like the ones around it, with
   the homepage index's chevron: chevron-right in the leading slot, turned a
   quarter clockwise when the fold is open. */
.lp .lp-menu-fold > summary { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.lp .lp-menu-fold > summary::-webkit-details-marker { display: none; }
.lp .lp-menu-fold > summary::marker { content: ""; }
.lp .lp-menu-fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lp-menu-chev { width: 20px; height: 20px; color: var(--muted); transition: transform 0.18s var(--ease-out); }
.lp-menu-fold[open] > summary .lp-menu-chev { transform: rotate(90deg); }
.lp-menu-fold-name { min-width: 0; }
.lp-menu-fold-count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.02em; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .lp-menu-chev { transition: none; } }
.lp-menu-groups { margin: 4px 0 8px; padding-left: 34px; }
.lp-menu-group-head { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--faint); }
.lp-menu-groups ul { margin-top: 2px; }
.lp .lp-menu-groups a { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--font-body); font-size: 15px; letter-spacing: 0; color: var(--text); }
.lp .lp-menu-groups a .li { width: 16px; height: 16px; color: var(--ink); }
.lp-menu-groups li:last-child a { border-bottom: 0; }