/* The four sheets behind "Hvad vi bygger", on the navy of the tiles they
   come from. Each: the head (Label, H1 64/64, Lead 20/30), a live piece of
   the thing itself on a stage, how it is built as a stack of layers with
   the data running down through them, the technical side as Spec cards, the
   four steps, an example and the LA32 button. Glass by the library: tint,
   blur and a 1 px specular edge; ultramarine only for what is "now". */
.sheet.sx{ width:min(980px, calc(100vw - 48px)); max-height:min(90vh, 1040px); border-radius:32px; color:var(--porcelain);
  background:radial-gradient(70% 40% at 85% 0%, rgba(43,63,124,.55), transparent 70%), radial-gradient(60% 30% at 0% 45%, rgba(36,54,232,.16), transparent 70%), #05080F;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px rgba(0,0,0,.5); scrollbar-width:thin; scrollbar-color:rgba(246,244,239,.25) transparent; }
.sheet.sx::backdrop{ background:rgba(5,8,15,.72); -webkit-backdrop-filter:none; backdrop-filter:none; }
.sx .sh-in{ padding:48px 56px 56px; outline:none; }
/* the close: a small glass lens with a thin cross */
.sx .sh-x{ top:16px; width:40px; height:40px; margin:-16px -24px 0 16px; background:rgba(40,46,64,.92); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:background .2s var(--ease); }
.sx .sh-x i::before, .sx .sh-x i::after{ width:14px; height:1.5px; margin:-.75px 0 0 -7px; background:var(--porcelain); }
@media (hover:hover){ .sx .sh-x:hover{ background:rgba(255,255,255,.18); } }
.sx .sh-x:focus-visible{ box-shadow:0 0 0 2px #05080F, 0 0 0 4px var(--ultra); }
.sx .label{ color:rgba(246,244,239,.55); }

.sx-head h3{ margin-top:16px; max-width:14em; font:500 64px/64px var(--sans); letter-spacing:-.035em; text-wrap:balance; }
.sx-lead{ margin-top:24px; max-width:36em; font:400 20px/30px var(--sans); letter-spacing:-.005em; color:rgba(246,244,239,.78); }

/* ---------- the live piece, on its own stage ---------- */
.sx-live{ position:relative; margin-top:40px; height:380px; border-radius:28px; overflow:hidden; isolation:isolate;
  background:radial-gradient(60% 80% at 50% 110%, #2B3F7C, #101A33 60%, #0A1020); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sx-live::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(30% 40% at 25% 30%, rgba(36,54,232,.4), transparent 70%), radial-gradient(26% 34% at 80% 70%, rgba(242,138,62,.22), transparent 70%); }
.lv{ position:absolute; inset:0; }
.lv img{ display:block; }
/* a glass panel, by the recipe */
.lv-act, .lv-note{ isolation:isolate; }
.lv-act::after, .lv-note::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 45%, rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* apps: the Dynamic Island opens with the order, the Live Activity runs, and the phone says it is ready */
.lv-apps{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; }
.lv-isl{ position:relative; height:40px; width:126px; border-radius:20px; background:#000; display:flex; align-items:center; gap:10px; padding:0 8px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.lv-isl-ic img{ width:26px; height:26px; border-radius:7px; }
.lv-isl-t{ flex:1; font-size:14px; font-weight:600; white-space:nowrap; color:#fff; opacity:0; }
.lv-isl-r{ width:24px; height:24px; border-radius:50%; border:2.5px solid rgba(255,255,255,.2); border-top-color:#FF9F0A; opacity:0; }
.lv-act{ position:relative; width:min(380px, 88%); padding:16px; border-radius:24px; background:rgba(60,72,110,.62); color:#fff; }
.lv-act-top{ display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.3; }
.lv-act-top div{ flex:1; display:flex; flex-direction:column; color:rgba(255,255,255,.7); }
.lv-act-top b{ color:#fff; font-size:15px; }
.lv-act-ic img{ width:38px; height:38px; border-radius:10px; }
.lv-act-time{ font-size:24px; font-weight:600; letter-spacing:-.02em; }
.lv-prog{ position:relative; height:6px; margin:16px 6px 0; border-radius:3px; background:rgba(255,255,255,.18); }
.lv-prog-fill{ position:absolute; inset:0; border-radius:inherit; background:#FF9F0A; transform-origin:0 50%; transform:scaleX(0); }
.lv-prog .d{ position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#3a3f4f; box-shadow:0 0 0 3px rgba(16,26,51,.9); }
.lv-prog .d1{ left:0; background:#FF9F0A; } .lv-prog .d2{ left:50%; } .lv-prog .d3{ left:100%; }
.lv-prog-l{ display:flex; justify-content:space-between; margin-top:10px; font-size:12px; color:rgba(255,255,255,.65); }
.lv-note{ position:relative; width:min(380px, 88%); display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:22px; background:rgba(60,72,110,.62);
  color:#fff; font-size:13px; line-height:1.3; opacity:0; }
.lv-note div{ flex:1; display:flex; flex-direction:column; color:rgba(255,255,255,.8); }
.lv-note b{ color:#fff; }
.lv-note-n{ align-self:flex-start; font-size:12px; color:rgba(255,255,255,.55); }
.play .lv-isl{ animation:lv-isl 9s cubic-bezier(.3,1.3,.4,1) infinite; }
.play .lv-isl-t, .play .lv-isl-r{ animation:lv-isl-in 9s ease infinite; }
.play .lv-isl-r{ animation:lv-isl-in 9s ease infinite, lv-spin 1s linear infinite; }
.play .lv-prog-fill{ animation:lv-fill 9s cubic-bezier(.4,0,.2,1) infinite; }
.play .lv-prog .d2{ animation:lv-d2 9s steps(1) infinite; }
.play .lv-prog .d3{ animation:lv-d3 9s steps(1) infinite; }
.play .lv-note{ animation:lv-note 9s cubic-bezier(.2,1.2,.3,1) infinite; }
@keyframes lv-isl{ 0%, 6%{ width:126px; } 13%, 92%{ width:min(340px, 82%); } 100%{ width:126px; } }
@keyframes lv-isl-in{ 0%, 12%{ opacity:0; } 17%, 88%{ opacity:1; } 93%, 100%{ opacity:0; } }
@keyframes lv-spin{ to{ transform:rotate(360deg); } }
@keyframes lv-fill{ 0%, 18%{ transform:scaleX(0); } 32%, 48%{ transform:scaleX(.5); } 62%, 94%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
@keyframes lv-d2{ 0%{ background:#3a3f4f; } 32%{ background:#FF9F0A; } 98%{ background:#3a3f4f; } }
@keyframes lv-d3{ 0%{ background:#3a3f4f; } 62%{ background:#FF9F0A; } 98%{ background:#3a3f4f; } }
@keyframes lv-note{ 0%, 66%{ opacity:0; transform:translate3d(0,-14px,0) scale(.95); } 72%, 92%{ opacity:1; transform:none; } 97%, 100%{ opacity:0; transform:none; } }

/* systems: Spiis' own kitchen screen, run live by sheets.js. An order comes
   in from spiis.dk and lands under Nye; it is started and moves to I gang,
   where its time counts down; it is marked ready and moves to Klar, the
   guest is told, and the oldest one there is collected. The tickets really
   move between the columns, and the others make room. */
.sx-live:has(.lv-sys){ height:440px; }
.lv-sys{ padding:20px; }
.kds{ height:100%; display:flex; border-radius:20px; overflow:hidden; background:#F6F4EF; color:#0E0F10; box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14); font-family:var(--sans); }
.kds-side{ flex:none; width:150px; padding:16px 10px; display:flex; flex-direction:column; gap:4px; background:#FBFAF7; border-right:1px solid #E9E5DD; font:400 12.5px/1 var(--sans); color:#46443F; }
.kds-brand{ display:flex; align-items:center; gap:8px; margin:0 0 12px 4px; font:500 14px/1 var(--sans); color:#0E0F10; }
.kds-brand img{ width:22px; height:22px; border-radius:6px; }
.kds-side > span{ display:flex; justify-content:space-between; align-items:center; height:30px; padding:0 10px; border-radius:15px; }
.kds-side > span em{ font-style:normal; font-size:11px; color:#8C8880; }
.kds-side > span.on{ background:#0E0F10; color:#F6F4EF; }
.kds-foot{ margin-top:auto; display:flex; justify-content:space-between; padding:10px 6px 0; border-top:1px solid #E9E5DD; font:400 11px/1 var(--mono); color:#8C8880; }
.kds-foot b{ font-weight:400; color:#0E0F10; }
.kds-main{ position:relative; flex:1; min-width:0; padding:16px 16px 0; overflow:hidden; }
.kds-top{ display:flex; align-items:baseline; gap:12px; }
.kds-top > b{ font:500 22px/1 var(--sans); letter-spacing:-.02em; }
.kds-live{ display:inline-flex; align-items:center; gap:6px; font:400 10.5px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:#46443F; }
.kds-live i{ width:6px; height:6px; border-radius:50%; background:var(--ultra); }
/* the toast: what just happened */
.kds-toast{ position:absolute; left:50%; top:10px; z-index:3; display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border-radius:16px;
  background:#0E0F10; color:#F6F4EF; font:500 12px/1 var(--sans); white-space:nowrap; box-shadow:0 10px 24px rgba(14,15,16,.28);
  opacity:0; transform:translate(-50%, -14px) scale(.96); transition:opacity .3s ease, transform .45s cubic-bezier(.2,1.3,.3,1); pointer-events:none; }
.kds-toast.on{ opacity:1; transform:translate(-50%, 0); }
.kds-toast i{ width:7px; height:7px; border-radius:50%; background:#34C759; }
.kds-toast small{ font:400 11px/1 var(--mono); color:rgba(246,244,239,.6); }
.kds-cols{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:16px; }
.kds-col{ position:relative; height:300px; padding:8px; border-radius:16px; background:#E9E5DD; }
.kds-tk{ z-index:1; } .kds-tk.st-cook, .kds-tk.fresh{ z-index:2; }
.kds-h{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:12px; background:#fff; font:500 12px/1 var(--sans); }
.kds-h.dk{ background:#0E0F10; color:#F6F4EF; }
.kds-h em{ font-style:normal; font-size:11px; opacity:.7; display:inline-block; }
.kds-h em.bump{ animation:kds-bump .4s cubic-bezier(.2,1.5,.3,1); }
@keyframes kds-bump{ 40%{ transform:scale(1.5); opacity:1; } }
.kds-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.kds-tk{ position:relative; padding:10px 12px; border-radius:12px; background:#fff; box-shadow:0 4px 12px rgba(14,15,16,.06); display:flex; flex-direction:column; gap:2px; }
.kds-tk .r{ display:flex; justify-content:space-between; font:400 10.5px/16px var(--mono); color:#8C8880; }
.kds-tk .r b{ font:500 13px/16px var(--sans); color:#0E0F10; }
.kds-tk .d{ font:500 14px/19px var(--sans); letter-spacing:-.01em; }
.kds-tk .x{ font:400 11.5px/16px var(--sans); color:#46443F; }
/* a new one is ringed in ultramarine for a moment */
.kds-tk::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; box-shadow:0 0 0 3px var(--ultra); opacity:0; transition:opacity .6s ease; pointer-events:none; }
.kds-tk.fresh::after{ opacity:1; }
.kds-a{ margin-top:10px; }
.kds-a > *{ display:none !important; }
.st-new .kds-go, .st-cook .kds-pr, .st-ready .kds-sent{ display:flex !important; }
.kds-go{ align-items:center; justify-content:space-between; height:28px; padding:0 4px 0 12px; border-radius:14px; background:#0E0F10; color:#F6F4EF; font:500 11px/1 var(--sans); transition:transform .15s ease, background .2s ease; }
.kds-go i{ width:20px; height:20px; border-radius:50%; background:radial-gradient(90% 90% at 32% 24%, rgba(255,255,255,.4), rgba(255,255,255,0) 58%), rgba(255,255,255,.14); }
.kds-pr{ align-items:center; gap:8px; }
.kds-pr > i{ position:relative; flex:1; height:3px; border-radius:2px; background:#E9E5DD; overflow:hidden; }
.kds-pr > i::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--ultra); transform-origin:0 50%; transform:scaleX(var(--p, 0)); transition:transform .6s linear; }
.kds-pr small{ font:400 10.5px/1 var(--mono); color:#46443F; white-space:nowrap; }
.kds-pr small b{ font-weight:400; }
.kds-ok{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1px #E9E5DD; font:500 11px/1 var(--sans); transition:transform .15s ease, background .2s ease, color .2s ease; }
.kds-ok::after{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.kds-sent{ align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:13px; background:#E9E5DD; font:500 11px/1 var(--sans); white-space:nowrap; overflow:hidden; }
.kds-sent::before{ content:""; flex:none; width:12px; height:12px; border-radius:50%; background:#34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 6.2 5.2 8 8.8 4.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.st-ready.fresh .kds-sent::before{ animation:kds-pop .5s cubic-bezier(.2,1.5,.3,1); }
@keyframes kds-pop{ from{ transform:scale(0); } }
/* a press, as a finger would give it */
.press .kds-go{ transform:scale(.94); background:var(--ultra); }
.press .kds-ok{ transform:scale(.92); background:#0E0F10; color:#F6F4EF; }

/* integrations: Lesreg in the middle, the systems round it, data running along the lines */
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 0 10px rgba(36,54,232,.12), 0 0 40px rgba(36,54,232,.5); }

/* websites: a page in Safari builds itself and moves, beside the code that moves it */
.lv-web{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:center; padding:24px; }
.lv-web > *{ min-width:0; }
.lv-sf{ border-radius:16px; overflow:hidden; background:#F6F4EF; box-shadow:0 24px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); }
.lv-sf-bar{ display:flex; align-items:center; gap:12px; height:34px; padding:0 12px; background:#E9E5DD; }
.lv-tl{ display:flex; gap:6px; } .lv-tl i{ width:10px; height:10px; border-radius:50%; background:#C9C3B8; }
.lv-url{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:22px; border-radius:7px; background:rgba(255,255,255,.7); font:400 11.5px/1 var(--sans); color:#46443F; }
.lv-url svg{ width:8px; height:10px; color:#8C8880; }
.lv-pg{ position:relative; height:250px; padding:22px 22px 0; overflow:hidden; color:#0E0F10; }
.lv-pg-k{ font:600 9px/12px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#8C8880; }
.lv-pg-h{ margin-top:8px; max-width:52%; font:500 28px/1 var(--sans); letter-spacing:-.04em; }
.lv-pg-h span, .lv-pg-h em{ display:inline-block; }
.lv-pg-h em{ font-family:var(--accent); font-style:italic; font-weight:300; color:#46443F; }
.lv-pg-btn{ display:inline-block; margin-top:12px; height:26px; padding:0 12px; border-radius:13px; background:#0E0F10; color:#F6F4EF; font:500 11px/26px var(--sans); }
.lv-pg-img{ position:absolute; right:-24px; top:22px; width:40%; height:140px; border-radius:14px; overflow:hidden;
  background:radial-gradient(70% 70% at 30% 30%, #E8A06A, #B9622F 70%); box-shadow:0 14px 30px rgba(14,15,16,.25); }
.lv-pg-img i{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); }
.lv-pg-cards{ position:absolute; left:22px; right:22px; bottom:-20px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.lv-pg-cards i{ height:70px; border-radius:10px; background:#fff; box-shadow:0 6px 16px rgba(14,15,16,.1); }
.lv-code{ margin:0; padding:16px 18px; border-radius:18px; background:rgba(5,8,15,.82); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font:400 11.5px/19px var(--mono); color:rgba(246,244,239,.85); white-space:pre; overflow:hidden; }
.lv-code b{ font-weight:400; color:#C792EA; } .lv-code i{ font-style:normal; color:#9DB2FF; } .lv-code u{ text-decoration:none; color:#F5C38A; }
.play .lv-pg-k{ animation:lv-w1 7s cubic-bezier(.16,1,.3,1) infinite; }
.play .lv-pg-h span{ animation:lv-w2 7s cubic-bezier(.16,1,.3,1) infinite; }
.play .lv-pg-h em{ animation:lv-w3 7s cubic-bezier(.16,1,.3,1) infinite; }
.play .lv-pg-btn{ animation:lv-w4 7s cubic-bezier(.16,1,.3,1) infinite; }
.play .lv-pg-img{ animation:lv-img 7s cubic-bezier(.16,1,.3,1) infinite; }
.play .lv-pg-img i{ animation:lv-sheen 7s ease infinite; }
.play .lv-pg-cards i{ animation:lv-card 7s cubic-bezier(.16,1,.3,1) infinite; }
.play .lv-pg-cards i:nth-child(2){ animation-delay:.12s; } .play .lv-pg-cards i:nth-child(3){ animation-delay:.24s; }
@keyframes lv-w1{ 0%, 4%{ opacity:0; transform:translateY(10px); } 12%, 90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes lv-w2{ 0%, 7%{ opacity:0; transform:translateY(40px); } 18%, 90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes lv-w3{ 0%, 10%{ opacity:0; transform:translateY(40px); } 21%, 90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes lv-w4{ 0%, 16%{ opacity:0; transform:translateY(12px) scale(.9); } 26%, 90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes lv-img{ 0%, 12%{ opacity:0; transform:translate3d(40px,20px,0) scale(.92); } 28%, 90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes lv-sheen{ 0%, 34%{ transform:translateX(-100%); } 50%, 100%{ transform:translateX(100%); } }
@keyframes lv-card{ 0%, 26%{ opacity:0; transform:translateY(30px); } 38%, 90%{ opacity:1; transform:translateY(0); } 100%{ opacity:0; } }

/* ---------- why not just AI: the iceberg ----------
   Above the waterline the one thing a prompt can give you, bright; below
   it the work that makes it run, in rows that widen and darken as they go
   down. They surface one by one as the sheet is read. */
.sx-sec{ margin-top:64px; }
.sx-sec h4{ margin-top:16px; font:500 40px/44px var(--sans); letter-spacing:-.025em; max-width:18em; }
.sx-p{ margin-top:16px; max-width:38em; font:400 18px/28px var(--sans); color:rgba(246,244,239,.75); }
.sx-p2{ margin-top:28px; color:rgba(246,244,239,.9); }
.ic{ position:relative; margin-top:32px; border-radius:28px; overflow:hidden; isolation:isolate; text-align:center; background:#0B1226; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.ic-air{ padding:28px 24px 32px; }
/* the sea: the light on the water, and the dark it goes down into */
.ic-sea{ position:relative; padding:0 24px 36px; background:radial-gradient(60% 120px at 50% 0%, rgba(80,120,255,.32), transparent), linear-gradient(#0C1B44, #081230 55%, #050A1C); }
.ic-tag{ position:relative; font:600 11px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.ic-tag-up{ color:rgba(246,244,239,.55); }
.ic-tag-down{ padding-top:24px; color:#9DB2FF; }
.ic-top, .ic-row{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.ic-top{ margin-top:16px; }
.ic-top li, .ic-row li{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 18px 0 8px; border-radius:24px; white-space:nowrap; font:500 15px/1 var(--sans); }
.ic-ic{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; }
.ic-ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* the tip: what shows, each card its own small piece of UI, with its name */
.ic-tip{ flex-direction:column; height:auto !important; padding:0 !important; gap:12px !important; }
.ic-cap{ display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:16px; background:var(--porcelain); color:var(--obsidian); font:500 13px/1 var(--sans); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.tp{ position:relative; display:block; box-shadow:0 18px 40px rgba(0,0,0,.45); }
.tp i{ display:block; }
/* an app: a small phone with Spiis on it */
.tp-phone{ width:92px; height:150px; padding:22px 8px 8px; border-radius:20px; background:#F6F4EF; box-shadow:0 0 0 4px #1b1f2c, 0 18px 40px rgba(0,0,0,.45); text-align:left; }
.tp-isl{ position:absolute; left:50%; top:7px; width:30px; height:9px; margin-left:-15px; border-radius:5px; background:#0E0F10; }
.tp-phone b{ display:block; font:600 9px/1 var(--sans); color:#B9622F; }
.tp-img{ height:56px; margin-top:6px; border-radius:8px; background:radial-gradient(70% 70% at 30% 30%, #E8A06A, #B9622F 70%); }
.tp-l{ height:5px; margin-top:7px; border-radius:3px; background:#0E0F10; width:80%; } .tp-l.s{ width:55%; margin-top:4px; background:#C9C3B8; }
.tp-btn{ position:absolute; left:8px; right:8px; bottom:9px; height:14px; border-radius:7px; background:#D97A3E; }
/* a system: the kitchen screen, small */
.tp-kds{ width:170px; height:104px; padding:8px; border-radius:12px; background:#F6F4EF; box-shadow:0 0 0 4px #1b1f2c, 0 18px 40px rgba(0,0,0,.45); }
.tp-bar{ width:46px; height:6px; border-radius:3px; background:#0E0F10; }
.tp-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin-top:7px; height:74px; }
.tp-cols > span{ display:flex; flex-direction:column; gap:3px; padding:3px; border-radius:6px; background:#E9E5DD; }
.tp-cols .h{ width:60%; height:6px; border-radius:3px; background:#fff; } .tp-cols .h.dk{ background:#0E0F10; }
.tp-cols .c{ height:22px; border-radius:4px; background:#fff; } .tp-cols .c.g{ box-shadow:inset 0 -4px 0 #34C759; }
/* an integration: the one button */
.tp-sync{ padding:0; background:none; box-shadow:none; }
.tp-sbtn{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 22px 0 16px; border-radius:26px; background:#0E0F10; color:#F6F4EF; font:500 16px/1 var(--sans);
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 18px 40px rgba(0,0,0,.45); }
.tp-sbtn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.play .tp-sbtn svg{ animation:tp-spin 2.4s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes tp-spin{ 60%, 100%{ transform:rotate(360deg); } }
/* a website: the front page in a browser, small */
.tp-web{ width:180px; height:110px; border-radius:10px; overflow:hidden; background:#F6F4EF; box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 18px 40px rgba(0,0,0,.45); }
.tp-wbar{ display:flex !important; gap:3px; height:14px; padding:4px 6px; background:#E9E5DD; }
.tp-wbar i{ width:6px; height:6px; border-radius:50%; background:#C9C3B8; }
.tp-wh{ width:62px; height:9px; margin:12px 0 0 10px; border-radius:3px; background:#0E0F10; } .tp-wh.s{ width:44px; margin-top:4px; background:#8C8880; }
.tp-wbtn{ width:34px; height:10px; margin:9px 0 0 10px; border-radius:5px; background:#0E0F10; }
.tp-wimg{ position:absolute; right:10px; top:24px; width:70px; height:62px; border-radius:7px; background:radial-gradient(70% 70% at 30% 30%, #E8A06A, #B9622F 70%); }
.play .ic-tip{ animation:ic-bob 5s ease-in-out infinite; }
/* the waterline */
.ic-water{ display:block; height:1px; margin:0 -24px; background:linear-gradient(90deg, transparent, rgba(157,178,255,.8) 20%, rgba(246,244,239,.9) 50%, rgba(157,178,255,.8) 80%, transparent);
  box-shadow:0 0 18px rgba(120,150,255,.6); }
/* ---------- below the water: each card its own ---------- */
.dp{ list-style:none; margin:20px auto 0; padding:0; max-width:640px; text-align:left; }
.dp b{ font-weight:500; }
html.pg-js .sheet:not([open]) .dp li{ opacity:0; }
.sheet[open] .dp li{ animation:ic-up .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.3s + var(--i) * .16s); }

/* apps: the app taken apart, a plate for each layer, deeper and darker */
.dp-apps{ display:grid; gap:0; }
.dp-apps li{ position:relative; display:grid; grid-template-columns:150px minmax(0, 1fr); align-items:center; gap:24px; height:72px; }
.dp-plate{ position:relative; justify-self:center; width:120px; height:84px; border-radius:16px; transform:rotateX(58deg) rotateZ(-38deg); margin-top:-14px;
  background:linear-gradient(135deg, rgba(157,178,255,calc(.42 - var(--i) * .06)), rgba(60,90,200,calc(.22 - var(--i) * .03)));
  box-shadow:inset 0 0 0 1px rgba(200,212,255,calc(.6 - var(--i) * .09)), 0 18px 30px rgba(0,0,0,.35); }
.dp-plate::after{ content:""; position:absolute; inset:14px; border-radius:8px; border:1px dashed rgba(220,228,255,calc(.35 - var(--i) * .05)); }
.dp-apps li div{ display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid rgba(157,178,255,.14); }
.dp-apps li:last-child div{ border-bottom:0; }
.dp-apps b{ font-size:16px; line-height:22px; color:var(--porcelain); }
.dp-apps span{ font:400 14px/20px var(--sans); color:rgba(246,244,239,.65); }
.play .dp-apps .dp-plate{ animation:dp-lift 6s ease-in-out infinite; animation-delay:calc(var(--i) * -.4s); }
@keyframes dp-lift{ 50%{ transform:rotateX(58deg) rotateZ(-38deg) translate3d(0,0,10px); } }

/* systems: a Friday night, minute by minute */
.dp-sys{ display:grid; gap:8px; }
.dp-sys li{ display:grid; grid-template-columns:52px minmax(0, 1fr); gap:14px; align-items:start; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,178,255,.14); }
.dp-sys time{ font:400 12.5px/22px var(--mono); color:#9DB2FF; }
.dp-sys li div{ display:flex; flex-direction:column; gap:4px; }
.dp-sys b{ font-size:15px; line-height:22px; color:var(--porcelain); }
.dp-ok{ display:inline-flex; align-items:flex-start; gap:8px; font:400 14px/20px var(--sans); color:rgba(246,244,239,.7); }
.dp-ok svg, .dp-ck svg{ flex:none; width:16px; height:16px; margin-top:2px; padding:2px; border-radius:50%; background:#34C759; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* integrations: the log, as it runs */
.dp-int{ padding:14px 0; border-radius:16px; background:rgba(3,6,14,.75); box-shadow:inset 0 0 0 1px rgba(157,178,255,.16); font:400 12.5px/1 var(--mono); }
.dp-int li{ display:grid; grid-template-columns:20px 84px minmax(0, 1fr) 14px; align-items:center; gap:10px; min-height:34px; padding:6px 18px; }
.dp-int li + li{ border-top:1px solid rgba(157,178,255,.08); }
.dp-dir{ color:#9DB2FF; }
.dp-who{ color:rgba(246,244,239,.55); }
.dp-int code{ font:inherit; color:var(--porcelain); }
.dp-msg{ min-width:0; line-height:1.5; }
.dp-note{ margin-left:10px; color:rgba(246,244,239,.5); }
.dp-st{ width:8px; height:8px; border-radius:50%; justify-self:end; }
.dp-int li.ok .dp-st{ background:#34C759; box-shadow:0 0 8px rgba(52,199,89,.6); }
.dp-int li.dup .dp-st{ background:#8C8880; }
.dp-int li.retry .dp-st{ background:#FF9F0A; box-shadow:0 0 8px rgba(255,159,10,.6); }
.dp-int li.retry code{ color:#FFC56A; }
.play .dp-int li.retry .dp-st{ animation:dp-blink 1s steps(1) infinite; }
@keyframes dp-blink{ 50%{ opacity:.2; } }

/* websites: the list, ticked off one by one */
.dp-web{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.dp-web li{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(157,178,255,.14); font:400 14px/20px var(--sans); color:rgba(246,244,239,.85); }
.dp-ck{ display:flex; }
.dp-ck svg{ margin-top:2px; }
.play .dp-web .dp-ck svg{ animation:dp-tick .5s cubic-bezier(.2,1.4,.3,1) both; animation-delay:calc(.6s + var(--i) * .16s); }
@keyframes dp-tick{ from{ transform:scale(0); } }

@keyframes ic-up{ from{ opacity:0; transform:translate3d(0,18px,0); } }
@keyframes ic-bob{ 50%{ transform:translate3d(0,-4px,0); } }

/* ---------- how it comes about: each card its own ---------- */
.bt{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.bt > li{ display:flex; flex-direction:column; gap:18px; }
.bt-c{ display:flex; flex-direction:column; gap:6px; }
.bt-c b{ font:500 16px/22px var(--sans); }
.bt-c span{ font:400 14px/22px var(--sans); color:rgba(246,244,239,.68); }

/* apps: four small phones, from sketch to App Store */
.mp{ position:relative; display:flex; flex-direction:column; gap:7px; width:100%; max-width:150px; aspect-ratio:9 / 17; padding:30px 12px 12px; border-radius:26px;
  background:#F6F4EF; box-shadow:0 0 0 5px #1b1f2c, 0 0 0 6px rgba(255,255,255,.14), 0 20px 40px rgba(0,0,0,.45); }
.mp::before{ content:""; position:absolute; left:50%; top:10px; width:36px; height:10px; margin-left:-18px; border-radius:5px; background:#0E0F10; }
.mp i{ display:block; border-radius:6px; }
.mp-sketch{ background:#E9E5DD; }
.mp-sketch i{ border:1.5px dashed #8C8880; }
.mp-sketch .w1{ height:12px; width:60%; } .mp-sketch .w2{ flex:1; } .mp-sketch .w3{ height:10px; width:80%; } .mp-sketch .w4{ height:22px; border-radius:11px; }
.mp .h{ height:9px; width:46%; background:#B9622F; }
.mp .img{ flex:1; border-radius:12px; background:radial-gradient(70% 70% at 30% 30%, #E8A06A, #B9622F 70%); }
.mp .l{ height:7px; width:84%; background:#0E0F10; } .mp .l.s{ width:56%; background:#C9C3B8; }
.mp .b{ height:24px; border-radius:12px; background:#D97A3E; }
.mp-beta em{ position:absolute; right:-10px; top:22px; padding:5px 10px; border-radius:12px; background:var(--ultra); color:#fff; font:600 11px/1 var(--sans); font-style:normal; box-shadow:0 8px 18px rgba(36,54,232,.45); }
.mp-store{ align-items:center; justify-content:center; text-align:center; gap:6px; background:linear-gradient(#fff, #F2F2F7); font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; }
.st-ic img{ width:60px; height:60px; border-radius:15px; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.mp-store b{ margin-top:6px; font-size:15px; color:#000; }
.mp-store small{ font-size:11px; color:#8e8e93; }
.mp-store em{ margin-top:8px; padding:6px 18px; border-radius:14px; background:#007AFF; color:#fff; font:600 13px/1 inherit; font-style:normal; }

/* systems: the steps as tickets on the kitchen rail */
.bt-sys{ position:relative; padding-top:22px; }
.bt-sys::before{ content:""; position:absolute; left:-8px; right:-8px; top:0; height:14px; border-radius:7px;
  background:linear-gradient(#cfd3dc, #8a909c 55%, #5c626e); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.4); }
.rt{ position:relative; display:flex; flex-direction:column; gap:8px; min-height:178px; padding:22px 16px 18px; border-radius:4px 4px 10px 10px; background:#F6F4EF; color:#0E0F10;
  transform-origin:50% -20px; box-shadow:0 14px 28px rgba(0,0,0,.4); }
.bt-sys li:nth-child(1) .rt{ transform:rotate(-1.6deg); } .bt-sys li:nth-child(2) .rt{ transform:rotate(1deg); }
.bt-sys li:nth-child(3) .rt{ transform:rotate(-.6deg); } .bt-sys li:nth-child(4) .rt{ transform:rotate(1.4deg); }
.rt::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:8px; background:radial-gradient(circle at 5px -1px, transparent 5px, #F6F4EF 5.5px) -1px 0 / 10px 8px repeat-x; }
.rt-clip{ position:absolute; left:50%; top:-26px; width:30px; height:22px; margin-left:-15px; border-radius:4px 4px 6px 6px; background:linear-gradient(#e5e8ee, #9aa0ab); box-shadow:0 2px 4px rgba(0,0,0,.3); }
.rt b{ font:500 16px/21px var(--sans); }
.rt span{ font:400 13.5px/20px var(--sans); color:#46443F; }
.rt.rt-live{ box-shadow:0 0 0 2px #34C759, 0 14px 28px rgba(0,0,0,.4); }
.rt.rt-live b{ display:flex; align-items:center; gap:8px; }
.rt.rt-live b::before{ content:""; width:8px; height:8px; border-radius:50%; background:#34C759; box-shadow:0 0 0 4px rgba(52,199,89,.2); }
.play .rt{ animation:rt-sway 5s ease-in-out infinite; }
.play li:nth-child(2) .rt{ animation-delay:-1.2s; } .play li:nth-child(3) .rt{ animation-delay:-2.4s; } .play li:nth-child(4) .rt{ animation-delay:-3.6s; }
@keyframes rt-sway{ 50%{ translate:0 2px; } }

/* integrations: a pipeline, with the data running along it */
.bt-int{ position:relative; }
.bt-int::before{ content:""; position:absolute; left:28px; right:calc(25% - 28px); top:27px; height:2px; border-radius:1px; background:linear-gradient(90deg, rgba(157,178,255,.6), rgba(157,178,255,.25)); }
.bt-int::after{ content:""; position:absolute; left:28px; top:24px; width:8px; height:8px; border-radius:50%; background:var(--porcelain); box-shadow:0 0 12px 3px rgba(157,178,255,.8); opacity:0; }
.play .bt-int::after{ animation:pn-run 4s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes pn-run{ 0%{ left:28px; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ left:calc(75% + 16px); opacity:0; } }
.pn{ position:relative; z-index:1; width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:#0D1530;
  box-shadow:inset 0 0 0 1px rgba(157,178,255,.45), 0 10px 24px rgba(0,0,0,.4); }
.pn svg{ width:24px; height:24px; fill:none; stroke:#C9D3FF; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bt-int li:last-child .pn{ background:var(--porcelain); } .bt-int li:last-child .pn svg{ stroke:var(--obsidian); }

/* websites: four small browsers, from sketch to live */
.mb, .cs-br{ position:relative; display:block; overflow:hidden; border-radius:12px; background:#F6F4EF; box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 18px 36px rgba(0,0,0,.45); }
.mb{ aspect-ratio:4 / 3; }
.mb-bar{ display:flex !important; align-items:center; gap:4px; height:18px; padding:0 8px; background:#E9E5DD; }
.mb-bar > i{ width:6px; height:6px; border-radius:50%; background:#C9C3B8; }
.mb-url{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:0 8px; height:12px; border-radius:4px; background:rgba(255,255,255,.75); font:400 8.5px/1 var(--sans); color:#46443F; }
.mb-url svg{ width:6px; height:8px; color:#34C759; }
.mb > i:not(.mb-bar){ position:absolute; display:block; border-radius:4px; }
.mb .h{ left:10%; top:34%; width:40%; height:9%; background:#0E0F10; } .mb .h.s{ top:47%; width:28%; background:#8C8880; }
.mb .img{ right:9%; top:30%; width:34%; height:52%; border-radius:8px; background:radial-gradient(70% 70% at 30% 30%, #E8A06A, #B9622F 70%); }
.mb-sketch{ background:#E9E5DD; }
.mb-sketch > i:not(.mb-bar){ border:1.5px dashed #8C8880; }
.mb-sketch .w1{ left:10%; top:34%; width:40%; height:10%; } .mb-sketch .w2{ left:10%; top:52%; width:26%; height:10%; } .mb-sketch .w3{ right:9%; top:30%; width:34%; height:52%; }
.play .mb-motion .h{ animation:mb-rise 3s cubic-bezier(.16,1,.3,1) infinite; } .play .mb-motion .h.s{ animation-delay:.12s; }
.play .mb-motion .img{ animation:mb-img 3s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes mb-rise{ 0%, 10%{ opacity:0; transform:translateY(12px); } 35%, 85%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes mb-img{ 0%, 15%{ opacity:0; transform:translateX(12px) scale(.94); } 45%, 85%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.mb-phone{ background:#E9E5DD; }
.mb-ph{ position:absolute; left:50%; top:24%; width:30%; height:70%; margin-left:-15%; padding:12% 6% 0; border-radius:10px; background:#F6F4EF; box-shadow:0 0 0 3px #1b1f2c; display:flex; flex-direction:column; gap:5px; }
.mb-ph i{ display:block; border-radius:3px; } .mb-ph .h{ height:5px; width:60%; background:#0E0F10; } .mb-ph .img{ height:40%; border-radius:6px; background:radial-gradient(70% 70% at 30% 30%, #E8A06A, #B9622F 70%); } .mb-ph .l{ height:4px; width:80%; background:#C9C3B8; }

/* ---------- running today: the case ---------- */
.cs{ margin-top:28px; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:40px; align-items:center; padding:32px; border-radius:28px;
  background:radial-gradient(70% 90% at 0% 100%, rgba(43,63,124,.6), transparent 70%), rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.cs-phone{ display:block; width:190px; aspect-ratio:9 / 19; overflow:hidden; border-radius:30px; background:#000; box-shadow:0 0 0 6px #1b1f2c, 0 0 0 7px rgba(255,255,255,.14), 0 24px 50px rgba(0,0,0,.5); }
.cs-phone img, .cs-br img{ display:block; width:100%; height:auto; }
.cs-br{ width:min(420px, 100%); border-radius:14px; }
/* a browser takes more room than a phone: the two halves share it */
.cs:has(.cs-br){ grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); }
.cs:has(.cs-br) .cs-br{ width:100%; }
.cs-br img{ aspect-ratio:1500 / 900; object-fit:cover; object-position:50% 0; }
.cs-name{ font:500 40px/44px var(--sans); letter-spacing:-.025em; }
.cs-d{ margin-top:14px; max-width:30em; font:400 18px/28px var(--sans); color:rgba(246,244,239,.78); }
.cs-link{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; height:40px; padding:0 16px; border-radius:20px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font:500 14px/1 var(--sans); color:var(--porcelain); text-decoration:none; transition:background .2s var(--ease); }
.cs-link svg{ width:14px; height:14px; }
@media (hover:hover){ .cs-link:hover{ background:rgba(255,255,255,.16); } }
.cs-logos{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; }
.cs-logos li{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 8px; border-radius:20px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); text-align:center; font:400 13px/18px var(--sans); color:rgba(246,244,239,.8); }
.cs-logos img{ width:52px; height:52px; border-radius:14px; box-shadow:0 10px 22px rgba(0,0,0,.4); }
.cs-logos .more b{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font:300 28px/1 var(--sans); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }

/* ---------- the end: the ask, and the next card ---------- */
.sx-end{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:56px; padding-top:32px; border-top:1px solid rgba(246,244,239,.12); }
.sx-next{ display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 18px 0 20px; border-radius:24px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:var(--porcelain); font:400 14px/1 var(--sans); cursor:pointer; transition:background .2s var(--ease); }
.sx-next-l{ color:rgba(246,244,239,.55); }
.sx-next b{ font-weight:500; }
.sx-next svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
@media (hover:hover){ .sx-next:hover{ background:rgba(255,255,255,.14); } .sx-next:hover svg{ transform:translateX(3px); } }
.sx-next:focus-visible{ outline:2px solid var(--ultra); outline-offset:3px; }

@media (max-width:860px){
  .bt{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:32px; }
  .bt-int::before, .bt-int::after{ display:none; }
  .cs-logos{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .lv-web{ grid-template-columns:1fr; overflow:hidden; align-content:center; }
  .lv-web .lv-code{ display:none; }
}
@media (max-width:700px){
  .sheet.sx{ width:100vw; max-width:100vw; max-height:94svh; border-radius:28px 28px 0 0; }
  .sx .sh-in{ padding:28px 20px calc(32px + env(safe-area-inset-bottom)); }
  .sx .sh-x{ top:12px; margin:-8px -4px 0 12px; }
  .sx-head h3{ font-size:40px; line-height:44px; letter-spacing:-.025em; }
  .sx-lead{ margin-top:16px; font-size:16px; line-height:26px; }
  .sx-live{ margin-top:28px; height:340px; border-radius:24px; }
  .sx-sec{ margin-top:48px; }
  .sx-sec h4{ font-size:28px; line-height:32px; }
  .sx-p{ font-size:16px; line-height:26px; }
  .ic{ border-radius:24px; }
  .ic-air{ padding:24px 12px 26px; } .ic-sea{ padding:0 12px 28px; }
  .ic-water{ margin:0 -12px; }
  .dp-apps li{ grid-template-columns:96px minmax(0, 1fr); gap:12px; height:auto; min-height:76px; }
  .dp-plate{ width:80px; height:58px; border-radius:12px; margin-top:-8px; }
  .dp-plate::after{ inset:9px; }
  .dp-apps b{ font-size:14px; line-height:20px; } .dp-apps span{ font-size:12.5px; line-height:18px; }
  .dp-sys li{ grid-template-columns:44px minmax(0, 1fr); gap:10px; padding:12px; }
  .dp-sys b{ font-size:14px; line-height:20px; } .dp-ok{ font-size:12.5px; line-height:18px; }
  .dp-int{ font-size:11px; }
  .dp-int li{ grid-template-columns:14px 64px minmax(0, 1fr) 10px; gap:6px; padding:6px 10px; }
  .dp-note{ display:block; margin:4px 0 0; }
  .dp-web{ grid-template-columns:1fr; }
  .dp-web li{ padding:12px; font-size:13px; line-height:19px; }
  .bt{ gap:24px 14px; }
  .bt-c b{ font-size:15px; line-height:20px; } .bt-c span{ font-size:13px; line-height:19px; }
  .mp{ max-width:none; border-radius:22px; }
  .rt{ min-height:0; }
  .bt-sys{ padding-top:0; row-gap:40px; }
  .bt-sys::before{ display:none; }
  .bt-sys li{ position:relative; padding-top:22px; }
  .bt-sys li::before{ content:""; position:absolute; left:-7px; right:-7px; top:0; height:12px; border-radius:6px;
    background:linear-gradient(#cfd3dc, #8a909c 55%, #5c626e); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.4); }
  .bt-sys li:nth-child(odd)::before{ right:-14px; border-radius:6px 0 0 6px; } .bt-sys li:nth-child(even)::before{ left:-14px; border-radius:0 6px 6px 0; }
  .cs{ grid-template-columns:1fr; gap:24px; padding:20px; justify-items:center; text-align:center; }
  .cs:has(.cs-br){ grid-template-columns:1fr; }
  .cs-txt{ display:flex; flex-direction:column; align-items:center; }
  .cs-phone{ width:170px; }
  .cs-name{ font-size:28px; line-height:32px; }
  .cs-d{ font-size:16px; line-height:26px; }
  .cs-logos{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
  .cs-logos li{ padding:14px 6px; font-size:12px; }
  .cs-logos img, .cs-logos .more b{ width:44px; height:44px; }
  .sx-end{ flex-direction:column; align-items:stretch; }
  .sx-end .btn, .sx-next{ width:100%; justify-content:space-between; }
  /* the kitchen screen on a phone: no side bar, the three columns narrow */
  .sx-live:has(.lv-sys){ height:420px; }
  .lv-sys{ padding:10px; }
  .kds{ border-radius:16px; }
  .kds-side{ display:none; }
  .kds-main{ padding:12px 8px 0; }
  .kds-top > b{ font-size:18px; }
  .kds-live{ font-size:9px; }
  .kds-cols{ gap:6px; }
  .kds-col{ height:340px; padding:5px; border-radius:12px; }
  .kds-h{ height:22px; padding:0 8px; font-size:11px; }
  .kds-list{ gap:6px; margin-top:6px; }
  .kds-tk{ padding:8px; border-radius:10px; }
  .kds-tk .d{ font-size:12px; line-height:16px; }
  .kds-tk .x{ font-size:10.5px; line-height:14px; }
  .kds-a{ margin-top:8px; }
  .kds-go{ height:auto; min-height:26px; padding:5px 4px 5px 8px; font-size:10px; line-height:12px; }
  .kds-go i{ display:none; }
  .kds-pr{ flex-wrap:wrap; gap:6px; }
  .kds-pr > i{ flex-basis:100%; }
  .kds-ok{ height:22px; padding:0 8px; font-size:10px; }
  .kds-sent{ height:auto; min-height:24px; padding:4px 8px; white-space:normal; font-size:10px; line-height:12px; }
  .kds-toast{ font-size:11px; height:28px; padding:0 12px; }
  .lv-web{ padding:16px; }
}
@media (prefers-reduced-motion: reduce){
  .sheet[open] .sx *{ animation:none !important; }
  .lv-isl{ width:min(340px, 82%); } .lv-isl-t, .lv-isl-r, .lv-note{ opacity:1; } .lv-prog-fill{ transform:scaleX(.5); }
}

/* ---------- the hard integrations ----------
   On paper after the navy of the price: the head as in the sections
   around it, then the systems by kind as white cards (Meta the large one,
   with its messages landing in one inbox), and the hard parts as chips. */
.ig{ background:var(--porcelain); color:var(--obsidian); padding:clamp(96px, 14vh, 160px) 0 clamp(24px, 4vh, 40px); }
.ig-head{ max-width:1296px; margin:0 auto; }
@media (max-width:1440px){ .ig-head, .ig-grid, .ig-foot{ margin-left:var(--gut) !important; margin-right:var(--gut) !important; } }
.ig .label{ color:var(--ash); }
.ig-h{ margin-top:16px; font:500 64px/64px var(--sans); letter-spacing:-.035em; }
.ig-h .acc{ color:var(--graphite); }
.ig-lead{ margin-top:24px; max-width:34em; font:400 20px/30px var(--sans); letter-spacing:-.005em; color:var(--graphite); }
.ig-grid{ max-width:1296px; margin:48px auto 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.ig-c{ position:relative; display:flex; flex-direction:column; padding:28px; border-radius:28px; background:#fff; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(14,15,16,.05), 0 24px 48px -32px rgba(14,15,16,.35); }
.ig-meta{ grid-column:span 2; grid-row:span 2; }
.ig-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ig-logos{ display:flex; }
.ig-logos img{ width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 3px #fff, 0 6px 14px rgba(14,15,16,.16); }
.ig-logos img + img{ margin-left:-10px; }
.ig-c h3{ margin-top:28px; font:500 24px/30px var(--sans); letter-spacing:-.015em; }
.ig-d{ margin-top:8px; font:400 16px/26px var(--sans); color:var(--graphite); max-width:32em; }
.ig-meta h3{ font-size:40px; line-height:44px; letter-spacing:-.025em; }
.ig-meta .ig-d{ font-size:18px; line-height:28px; }
/* Meta: two messages from two apps land in one inbox */
.ig-msg{ position:relative; margin-top:auto; padding-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; }
.ig-in{ display:flex; gap:10px; align-items:flex-start; padding:14px; border-radius:18px; background:var(--porcelain); font:400 14px/20px var(--sans); color:var(--graphite); }
.ig-in img{ flex:none; border-radius:50%; }
.ig-in div{ display:flex; flex-direction:column; }
.ig-in b{ font-weight:500; font-size:12.5px; color:var(--obsidian); }
.ig-box{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; height:48px; padding:0 18px; border-radius:24px; background:var(--obsidian); color:var(--porcelain); font:500 14px/1 var(--sans); }
.ig-box i{ width:8px; height:8px; border-radius:50%; background:var(--ultra); box-shadow:0 0 0 4px rgba(36,54,232,.3); }
html.pg-js .ig-meta:not(.in) .ig-in, html.pg-js .ig-meta:not(.in) .ig-box{ opacity:0; transform:translateY(16px); }
.ig-in, .ig-box{ transition:opacity .7s var(--ease), transform .9s var(--ease); }
.ig-meta.in .ig-in:nth-child(1){ transition-delay:.35s; } .ig-meta.in .ig-in:nth-child(2){ transition-delay:.55s; } .ig-meta.in .ig-box{ transition-delay:.8s; }
/* the hard parts, in the dark card that closes the grid */
.ig-dark{ background:var(--obsidian); color:var(--porcelain); box-shadow:0 24px 48px -28px rgba(14,15,16,.6); }
.ig-dark .label{ color:rgba(246,244,239,.55); }
.ig-dark h3{ margin-top:16px; }
.ig-dark ul{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ig-dark li{ height:32px; padding:0 12px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font:400 13px/1 var(--sans); white-space:nowrap; }
.ig-foot{ max-width:1296px; margin:32px auto 0; }
.ig-more{ font:400 16px/26px var(--sans); color:var(--graphite); }
.ig-more a{ color:var(--obsidian); font-weight:500; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(14,15,16,.3); }
@media (max-width:1023px){
  .ig-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ig-meta{ grid-column:1 / -1; grid-row:auto; }
}
@media (max-width:767px){
  /* on a phone the smaller kinds become short rows: logos, name, one line */
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark){ display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:14px; align-items:start; padding:16px; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-top{ grid-row:span 2; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-top .label{ display:none; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) h3{ margin-top:0; font-size:17px; line-height:22px; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-d{ margin-top:4px; font-size:13.5px; line-height:20px; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-logos img{ width:34px; height:34px; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-logos{ flex-direction:column; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-logos img + img{ margin:-8px 0 0; }
  /* the little scenes are for the larger screens; here the cards say it */
  .ig-msg, .ig-wide-v{ display:none; }
  .ig-meta h3{ font-size:24px; line-height:30px; }
  .ig-c h3{ margin-top:16px; }
  .ig-wide h3{ font-size:20px; line-height:26px; }
  .ig-wide .ig-d{ font-size:14px; line-height:22px; }
  .ig-wide .ig-wl{ display:none; }
  .ig-dark h3{ font-size:19px; line-height:25px; margin-top:10px; }
  .ig-dark ul{ margin-top:14px; }
  .ig-dark ul{ gap:5px; } .ig-dark li{ height:28px; font-size:12px; padding:0 10px; }
  .ig{ padding:72px 0 16px; }
  .ig-h{ font-size:40px; line-height:44px; letter-spacing:-.025em; }
  .ig-lead{ margin-top:16px; font-size:16px; line-height:26px; }
  .ig-grid{ grid-template-columns:1fr; gap:12px; margin-top:32px; }
  .ig-c{ padding:20px; border-radius:24px; }
  .ig-c h3{ margin-top:20px; font-size:20px; line-height:26px; }
  .ig-meta h3{ font-size:28px; line-height:32px; }
  .ig-meta .ig-d, .ig-d{ font-size:15px; line-height:24px; }
  .ig-msg{ grid-template-columns:1fr; padding-top:20px; }
}
/* the office: Google and Microsoft, the full width under the rest */
.ig-wide{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:40px; align-items:center; }
.ig-wl{ margin-top:24px; }
.ig-wide h3{ margin-top:10px; font-size:32px; line-height:38px; letter-spacing:-.02em; max-width:16em; }
.ig-wide-v{ position:relative; display:grid; gap:10px; padding:24px; border-radius:22px; background:var(--porcelain); }
.ig-cal, .ig-mail, .ig-sheet{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px rgba(14,15,16,.06), 0 8px 18px -10px rgba(14,15,16,.25);
  font:400 13px/18px var(--sans); color:var(--graphite); }
.ig-cal img, .ig-mail img, .ig-sheet img{ flex:none; border-radius:50%; }
.ig-cal div, .ig-mail div{ display:flex; flex-direction:column; }
.ig-cal b, .ig-mail b{ font:500 14px/20px var(--sans); color:var(--obsidian); }
.ig-cal{ border-left:4px solid #4285F4; }
.ig-sheet table{ flex:1; border-collapse:collapse; font:400 12.5px/1 var(--mono); }
.ig-sheet th{ text-align:left; padding:0 8px 8px 0; font:600 10.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ash); }
.ig-sheet td{ padding:7px 8px 7px 0; border-top:1px solid var(--limestone); color:var(--obsidian); }
.ig-sheet tr.nw td{ background:rgba(33,115,70,.08); }
html.pg-js .ig-wide:not(.in) .ig-wide-v > *{ opacity:0; transform:translateY(14px); }
.ig-wide-v > *{ transition:opacity .7s var(--ease), transform .9s var(--ease); }
.ig-wide.in .ig-wide-v > :nth-child(1){ transition-delay:.3s; } .ig-wide.in .ig-wide-v > :nth-child(2){ transition-delay:.5s; } .ig-wide.in .ig-wide-v > :nth-child(3){ transition-delay:.7s; }
@media (max-width:1023px){ .ig-wide{ grid-template-columns:1fr; gap:24px; } }
@media (max-width:767px){
  .ig-wide h3{ font-size:22px; line-height:28px; }
  .ig-wide-v{ padding:14px; }
  .ig-logos img{ width:38px; height:38px; }
  .ig-wide .ig-logos img + img{ margin-left:-12px; }
}

/* ---------- the four service pages: the sheet, as a page ----------
   The same parts as the sheet on the front page, on the navy of the sheet,
   with a crumb back, the H1, a price block and the questions people ask. */
body.svc{ color:var(--porcelain); background:radial-gradient(60% 1400px at 85% 0%, rgba(43,63,124,.5), transparent 70%) no-repeat, #05080F; }
.svc-main{ max-width:1040px; margin:0 auto; padding-top:clamp(88px, 12vh, 120px); }
.svc-crumb{ display:flex; align-items:center; gap:10px; margin-bottom:28px; font:400 13px/1 var(--sans); color:rgba(246,244,239,.55); }
.svc-crumb a{ color:rgba(246,244,239,.8); text-decoration:none; }
.svc-crumb a:hover{ color:var(--porcelain); }
.svc-h1{ margin-top:16px; max-width:14em; font:500 64px/64px var(--sans); letter-spacing:-.035em; text-wrap:balance; }
/* the price */
.svc-pr{ margin-top:24px; display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:32px; align-items:center; padding:32px; border-radius:28px;
  background:radial-gradient(70% 90% at 0% 100%, rgba(43,63,124,.6), transparent 70%), rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.svc-big{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; font:300 72px/1 var(--sans); letter-spacing:-.05em; }
.svc-big small{ font:400 16px/1.3 var(--sans); letter-spacing:0; color:rgba(246,244,239,.7); }
.svc-pr .sx-p{ margin-top:16px; }
.svc-cmp{ display:flex; flex-direction:column; gap:10px; }
.svc-cmp > span{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:52px; padding:0 18px; border-radius:26px; background:rgba(255,255,255,.06); font:400 15px/1 var(--sans); color:rgba(246,244,239,.7); }
.svc-cmp > span b{ font-weight:500; text-decoration:line-through; text-decoration-color:rgba(246,244,239,.5); }
.svc-cmp > span.us{ justify-content:flex-start; background:var(--porcelain); color:var(--obsidian); font-weight:500; }
.svc-cmp > span.us b{ margin-left:auto; text-decoration:none; }
.svc-cmp > span.us i{ width:8px; height:8px; border-radius:50%; background:var(--ultra); box-shadow:0 0 0 4px rgba(36,54,232,.18); }
.svc-cmp a{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:6px; font:500 14px/1 var(--sans); color:var(--porcelain); text-decoration:none; }
.svc-cmp a svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
@media (hover:hover){ .svc-cmp a:hover svg{ transform:translateX(3px); } }
/* the questions */
.svc-qs{ margin-top:16px; border-top:1px solid rgba(246,244,239,.14); }
.svc-qs details{ border-bottom:1px solid rgba(246,244,239,.14); }
.svc-qs summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; padding:12px 0; cursor:pointer; list-style:none; font:500 18px/26px var(--sans); }
.svc-qs summary::-webkit-details-marker{ display:none; }
.svc-qs summary i{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.svc-qs summary i::before, .svc-qs summary i::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; margin:-.75px 0 0 -5px; background:var(--porcelain); transition:transform .25s var(--ease); }
.svc-qs summary i::after{ transform:rotate(90deg); }
.svc-qs details[open] summary i::after{ transform:rotate(0); }
.svc-qs details p{ padding:0 44px 22px 0; font:400 16px/26px var(--sans); color:rgba(246,244,239,.75); }
.svc-qs summary:focus-visible{ outline:2px solid var(--ultra); outline-offset:4px; border-radius:6px; }
.sx-next{ text-decoration:none; }
@media (max-width:767px){
  .svc-main{ padding-top:84px; }
  .svc-h1{ font-size:38px; line-height:42px; letter-spacing:-.025em; }
  .svc-pr{ grid-template-columns:1fr; padding:20px; gap:20px; border-radius:24px; }
  .svc-big{ font-size:56px; }
  .svc-qs summary{ font-size:16px; line-height:23px; }
  .svc-qs details p{ padding-right:0; font-size:15px; line-height:24px; }
}
@media (max-width:767px){ .ig-wide-v{ display:none; } .ig-wide{ gap:0; } }

/* the hard part, under the head: a label and the chips */
.ig-hard{ margin-top:28px; }
.ig-hard ul{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ig-hard li{ height:38px; padding:0 16px; border-radius:19px; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 1px rgba(14,15,16,.08), 0 6px 14px -10px rgba(14,15,16,.4); font:400 14px/1 var(--sans); white-space:nowrap; }
@media (max-width:767px){ .ig-hard{ margin-top:20px; } .ig-hard ul{ gap:6px; } .ig-hard li{ height:32px; padding:0 12px; font-size:12.5px; } }

/* card 1's tip: a real phone with Spiis on it */
.tp-real{ width:132px; padding:0; background:none; box-shadow:none; filter:drop-shadow(0 22px 34px rgba(0,0,0,.55)); }
.tp-real .dev{ display:block; width:100%; }
.tp-real .dev-iph .scr{ display:block; background:#000; }
.tp-real .full{ object-position:50% 0; }
@media (max-width:767px){ .tp-real{ width:118px; } }
/* the service pages are navy from the first paint, the strips at Safari's
   edges too, so no white bar shows while the page loads */
html:has(> body.svc){ background:#05080F; }
body.svc .edge{ background:#05080F; }
/* on a computer the cards fill their rows: payment and sales takes two
   columns, so Callster sits in the third and no hole is left */
@media (min-width:1024px){ .ig-grid > .ig-c:nth-child(4){ grid-column:span 2; } }
/* the service pages on a wide screen: the opening in two columns, the
   words on the left and the live screen beside them; the rest of the page
   on the full width, the questions kept to a reading measure */
@media (min-width:1200px){
  .svc-main{ max-width:1296px; }
  .svc-main .sh-in{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:64px; align-items:center; }
  .svc-main .sh-in > *{ grid-column:1 / -1; }
  .svc-main .sh-in > .sx-head{ grid-column:1; }
  .svc-main .sh-in > .sx-live{ grid-column:2; margin-top:0; height:460px; }
  .svc-main .sh-in > .sx-live:has(.lv-sys){ height:500px; }
  .svc-main .svc-faq{ max-width:860px; }
}
/* the kitchen screen needs the room: on the systems page the opening stays
   one column, the board across the full width under the words */
@media (min-width:1200px){
  .svc-main .sh-in:has(.lv-sys) > .sx-head{ grid-column:1 / -1; }
  .svc-main .sh-in:has(.lv-sys) > .sx-live{ grid-column:1 / -1; margin-top:40px; height:520px; }
}

/* ---------- live: integrations, as one order typed in once ----------
   The order comes in from the web shop on a card of porcelain, runs into
   Lesreg, and from there out to four systems; each lights up with its own
   receipt, one after the other. At rest (and with reduced motion) all four
   stand done. Wide, the three parts sit side by side; narrow, they stack. */
.sx-live:has(.lv-flow){ height:auto !important; container-type:inline-size; }
.lv-flow{ position:relative; inset:auto; display:grid; grid-template-columns:minmax(0, .95fr) minmax(80px, .5fr) minmax(0, 1.2fr); align-items:center; padding:clamp(24px, 4cqw, 44px); }
.lf-l{ display:flex; flex-direction:column; gap:12px; }
.lf-src{ padding:18px 18px 16px; border-radius:20px; background:var(--porcelain); color:var(--obsidian); box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.4); }
.lf-src-h{ display:flex; align-items:center; gap:10px; }
.lf-src-h img{ border-radius:8px; }
.lf-src-h > span{ display:flex; flex-direction:column; font:400 12px/16px var(--sans); color:var(--ash); }
.lf-src-h b{ font:500 14px/18px var(--sans); color:var(--obsidian); }
.lf-new{ margin-left:auto; height:22px; padding:0 9px; border-radius:11px; font:500 11px/22px var(--sans); font-style:normal; color:#fff; background:var(--ultra); }
.lf-no{ margin-top:14px; font:500 30px/34px var(--sans); letter-spacing:-.03em; }
.lf-items{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; font:400 13px/18px var(--sans); color:var(--graphite); }
.lf-items li{ display:flex; justify-content:space-between; gap:12px; }
.lf-items li > span:last-child{ font-variant-numeric:tabular-nums; }
.lf-tot{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(14,15,16,.1); display:flex; align-items:baseline; justify-content:space-between; font:400 13px/18px var(--sans); color:var(--graphite); }
.lf-tot b{ font:500 17px/20px var(--sans); color:var(--obsidian); font-variant-numeric:tabular-nums; }
.lf-zero{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:44px; padding:0 16px; border-radius:22px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); font:400 13px/1 var(--sans); color:rgba(246,244,239,.7); }
.lf-zero b{ font:500 15px/1 var(--sans); color:var(--porcelain); }
.lf-mid{ position:relative; height:286px; }
.lf-hub{ position:absolute; left:34%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:grid; place-items:center; background:#05080F;
  box-shadow:0 0 0 1px rgba(157,178,255,.4), 0 0 32px rgba(36,54,232,.55); }
.lf-hub svg{ width:24px; height:24px; }
.lf-dst{ list-style:none; margin:0; padding:0; display:grid; grid-auto-rows:64px; gap:10px; }
.lf-r{ display:grid; grid-template-columns:34px minmax(0, 1fr) 24px; gap:12px; align-items:center; padding:0 14px; border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08); }
.lf-r img{ border-radius:10px; }
.lf-rt{ display:flex; flex-direction:column; min-width:0; }
.lf-rt small{ font:400 11px/14px var(--sans); color:rgba(246,244,239,.55); }
.lf-rt b, .lf-rd{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lf-rt b{ font:500 14px/19px var(--sans); }
.lf-rd{ font:400 12px/16px var(--sans); color:rgba(246,244,239,.62); font-variant-numeric:tabular-nums; }
.lf-st{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#34C759; box-shadow:0 0 0 4px rgba(52,199,89,.18); }
.lf-st svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* the run, driven by sheets.js: the wires are drawn in pixels from the card
   to Lesreg and on to each system, a light with a tail runs along each in
   turn, and the system it reaches lights up, ticks and stays connected.
   Without the script (or with reduced motion) everything stands done. */
.lv-flow > :not(.lf-wire){ position:relative; z-index:1; }
.lf-wire{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
.lf-w{ fill:none; stroke:rgba(246,244,239,.16); stroke-width:1.5; transition:stroke .6s ease; }
.lf-w.lit{ stroke:rgba(157,178,255,.6); }
.lf-g{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; opacity:0; filter:drop-shadow(0 0 4px rgba(157,178,255,1)) drop-shadow(0 0 10px rgba(80,100,255,.9)); }
.lf-dot{ fill:#fff; opacity:0; filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(120,140,255,1)); }
.lf-hub::before{ content:""; position:absolute; inset:-7px; border-radius:50%; opacity:0;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(157,178,255,.95) 92%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.lf-on .lf-hub::before{ opacity:1; animation:lf-spin 2.4s linear infinite; }
@keyframes lf-spin{ to{ transform:rotate(360deg); } }
.lf-hub{ transition:transform .5s cubic-bezier(.2,1.6,.3,1), box-shadow .5s ease; }
.lf-hub.hit{ transform:scale(1.12); box-shadow:0 0 0 8px rgba(157,178,255,.18), 0 0 60px rgba(110,130,255,1); }

.lf-js .lf-src{ opacity:0; transform:translate3d(-16px,0,0) scale(.98); transition:opacity .6s var(--ease), transform .8s var(--ease); }
.lf-js.s-in .lf-src{ opacity:1; transform:none; }
.lf-js .lf-new{ opacity:0; transform:scale(.5); transition:opacity .3s ease, transform .5s cubic-bezier(.2,1.8,.3,1); }
.lf-js.s-new .lf-new{ opacity:1; transform:none; }
.lf-js .lf-zero{ opacity:0; transform:translate3d(0,8px,0); transition:opacity .6s var(--ease), transform .8s var(--ease); }
.lf-js.s-zero .lf-zero{ opacity:1; transform:none; }
.lf-js .lf-r{ opacity:.42; transition:opacity .5s ease, box-shadow .9s ease, background .9s ease; }
.lf-js .lf-r.done{ opacity:1; }
.lf-js .lf-r.hit{ background:linear-gradient(160deg, rgba(157,178,255,.26), rgba(255,255,255,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(157,178,255,.75), 0 0 28px rgba(80,100,255,.45); transition:none; }
.lf-st{ position:relative; }
.lf-js .lf-r:not(.done) .lf-st{ background:transparent; box-shadow:inset 0 0 0 1.5px rgba(246,244,239,.2); }
.lf-js .lf-r:not(.done) .lf-st::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid transparent; border-top-color:rgba(246,244,239,.85); animation:lf-spin .9s linear infinite; }
.lf-js .lf-st svg{ opacity:0; transform:scale(.3); transition:opacity .2s ease, transform .45s cubic-bezier(.2,1.8,.3,1); }
.lf-js .lf-r.done .lf-st svg{ opacity:1; transform:none; }
.lf-js .lf-r .lf-st{ transition:background .3s ease, box-shadow .3s ease; }

/* narrow (the opening of the service page, a phone): one column, the order
   on top, Lesreg on a short line, the four systems under it */
@container (max-width:640px){
  .lv-flow{ grid-template-columns:minmax(0, 1fr); padding:18px; }
  .lf-zero{ display:none; }
  .lf-src{ padding:14px 14px 12px; border-radius:16px; }
  .lf-no{ margin-top:10px; font-size:24px; line-height:28px; }
  .lf-items{ margin-top:6px; font-size:12px; line-height:16px; }
  .lf-tot{ margin-top:8px; padding-top:8px; }
  .lf-mid{ height:52px; }
  .lf-hub{ left:50%; width:38px; height:38px; margin:-19px 0 0 -19px; }
  .lf-hub svg{ width:16px; height:16px; }
  .lf-dst{ grid-auto-rows:54px; gap:8px; }
  .lf-r{ grid-template-columns:30px minmax(0, 1fr) 22px; gap:10px; padding:0 12px; border-radius:15px; }
  .lf-r img{ width:30px; height:30px; border-radius:9px; }
  .lf-rt b{ font-size:13px; line-height:17px; }
  .lf-rd{ font-size:11.5px; line-height:15px; }
  .lf-st{ width:22px; height:22px; }
}
@media (prefers-reduced-motion: reduce){ .lv-flow, .lv-flow *{ animation:none !important; } }

/* ---------- partners: every card says it is connected ----------
   A green "Koblet på" where the category was; the category moves down over
   the title. The logos stand side by side as tiles, not stacked coins. */
.ig-on{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px 0 10px; border-radius:15px; font:500 12.5px/1 var(--sans); color:#1E7A3C;
  background:rgba(52,199,89,.12); box-shadow:inset 0 0 0 1px rgba(52,199,89,.28); white-space:nowrap; }
.ig-on i{ width:7px; height:7px; border-radius:50%; background:#34C759; box-shadow:0 0 0 3px rgba(52,199,89,.22); }
.ig-cat{ margin-top:24px; }
.ig-cat + h3{ margin-top:6px !important; }
.ig-logos{ gap:8px; }
.ig-logos img{ width:48px; height:48px; box-shadow:0 0 0 1px rgba(14,15,16,.06), 0 8px 18px -8px rgba(14,15,16,.35); }
.ig-logos img + img{ margin-left:0; }
.ig-wide .ig-top{ justify-content:flex-start; flex-wrap:wrap; gap:12px 16px; }
.ig-wide .ig-logos img + img{ margin-left:0; }
@media (max-width:767px){
  .ig-logos{ gap:6px; }
  .ig-logos img{ width:38px; height:38px; }
  /* every card the same way down: logos and status, category, title, text */
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark){ display:flex; flex-direction:column; padding:20px; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-top{ grid-row:auto; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-logos{ flex-direction:row; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-logos img{ width:38px; height:38px; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-logos img + img{ margin:0; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) h3{ font-size:20px; line-height:26px; }
  .ig-c:not(.ig-meta):not(.ig-wide):not(.ig-dark) .ig-d{ margin-top:6px; font-size:14.5px; line-height:22px; }
  .ig-cat{ margin-top:16px; }
  .ig-on{ height:26px; font-size:11.5px; padding:0 10px 0 8px; }
}

/* ---------- the order flow, more alive ----------
   The rows are liquid glass with a lit rim. Waiting, a row is an empty
   form with shimmering placeholders; when the data arrives the text writes
   itself in. The data rides the wires as small glass labels (#1042, the
   amount), and the card marks the fields it sends. */
.lf-r{ position:relative; isolation:isolate; background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px -14px rgba(0,0,0,.6); }
.lf-r::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 40%, rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.lf-rt{ position:relative; }
.lf-rt::before, .lf-rt::after{ content:""; position:absolute; left:0; height:9px; border-radius:5px; opacity:0; transition:opacity .35s ease;
  background:linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.08) 100%); background-size:200% 100%; }
.lf-rt::before{ top:19px; width:62%; height:11px; }
.lf-rt::after{ top:39px; width:42%; }
.lf-js .lf-r:not(.done) .lf-rt::before, .lf-js .lf-r:not(.done) .lf-rt::after{ opacity:1; animation:lf-shim 1.4s linear infinite; }
@keyframes lf-shim{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.lf-js .lf-rt b, .lf-js .lf-rd{ clip-path:inset(0 100% 0 0); opacity:0; transition:clip-path .7s cubic-bezier(.3,.7,.2,1), opacity .2s ease; }
.lf-js .lf-r.done .lf-rt b{ clip-path:inset(0 0 0 0); opacity:1; }
.lf-js .lf-r.done .lf-rd{ clip-path:inset(0 0 0 0); opacity:1; transition-delay:.18s; }
.lf-js .lf-r:not(.done) .lf-rt b, .lf-js .lf-r:not(.done) .lf-rd{ transition:none; }
.lv-flow > .lf-chip{ position:absolute; left:0; top:0; z-index:3; height:24px; padding:0 9px; border-radius:12px; display:flex; align-items:center;
  font:500 11.5px/1 var(--sans); color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums; pointer-events:none; opacity:0; will-change:transform;
  background:rgba(24,34,66,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 18px rgba(0,0,0,.45), 0 0 18px rgba(80,100,255,.35); }
.lf-no, .lf-tot b{ border-radius:8px; transition:background .4s ease, box-shadow .4s ease; }
.lf-src.send .lf-no, .lf-src.send .lf-tot b{ background:rgba(36,54,232,.1); box-shadow:0 0 0 5px rgba(36,54,232,.1); }
@container (max-width:640px){
  .lf-rt::before{ top:17px; height:10px; }
  .lf-rt::after{ top:35px; height:8px; }
}

/* ---------- the sheets, with what matters in them ----------
   What you get as six panes of glass; today against with Lesreg; every step
   says what you do yourselves; the price from the hours a job takes; and the
   questions people ask. Everything on the navy of the sheet. */
.sx-sec > .label + *{ margin-top:20px; }
.sx-get{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.sx-get li{ position:relative; isolation:isolate; display:flex; flex-direction:column; gap:6px; padding:22px 22px 24px; border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px -18px rgba(0,0,0,.6); }
.sx-get li::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.05) 45%, rgba(255,255,255,.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.sg-ic{ width:40px; height:40px; margin-bottom:10px; border-radius:12px; display:grid; place-items:center;
  background:radial-gradient(90% 90% at 30% 20%, rgba(120,140,255,.55), rgba(36,54,232,.9)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px -6px rgba(36,54,232,.7); }
.sg-ic svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sx-get b{ font:500 17px/22px var(--sans); letter-spacing:-.01em; }
.sx-get span:not(.sg-ic){ font:400 14.5px/22px var(--sans); color:rgba(246,244,239,.68); }

.sx-ba{ border-radius:24px; overflow:hidden; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.ba-h{ display:grid; grid-template-columns:1fr 40px 1fr; padding:16px 24px; font:600 11px/14px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:rgba(246,244,239,.5);
  border-bottom:1px solid rgba(255,255,255,.08); }
.ba-h span:last-child{ grid-column:3; color:#9DB2FF; }
.sx-ba ul{ list-style:none; margin:0; padding:0; }
.sx-ba li{ display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; padding:16px 24px; }
.sx-ba li + li{ border-top:1px solid rgba(255,255,255,.06); }
.ba-b{ font:400 15.5px/22px var(--sans); color:rgba(246,244,239,.5); text-decoration:line-through; text-decoration-color:rgba(246,244,239,.25); }
.ba-arw svg{ display:block; width:16px; height:16px; fill:none; stroke:rgba(157,178,255,.7); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ba-a{ display:flex; align-items:center; gap:10px; font:500 15.5px/22px var(--sans); color:var(--porcelain); }
.ba-a svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:#34C759; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sx-ba li:hover .ba-a{ color:#fff; }

.bt-you{ display:flex !important; gap:6px; margin-top:6px; padding-top:10px; border-top:1px dashed rgba(246,244,239,.16); font:400 13px/19px var(--sans) !important; color:rgba(246,244,239,.82) !important; }
.bt-you em{ font-style:normal; font-weight:600; color:#9DB2FF; }
.rt .bt-you{ border-top-color:rgba(14,15,16,.14); color:var(--graphite) !important; }
.rt .bt-you em{ color:var(--ultra); }

.sx-price{ position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:32px; align-items:center; padding:32px; border-radius:28px; overflow:hidden;
  background:radial-gradient(60% 120% at 0% 0%, rgba(36,54,232,.45), transparent 70%), radial-gradient(50% 120% at 100% 100%, rgba(242,138,62,.28), transparent 70%), rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 48px -28px rgba(0,0,0,.7); }
.sp-k{ font:400 15px/22px var(--sans); color:rgba(246,244,239,.7); }
.sp-h{ margin-top:6px; display:flex; align-items:baseline; gap:12px; font:300 72px/1 var(--sans); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.sp-h small{ font:500 18px/1 var(--sans); letter-spacing:0; color:rgba(246,244,239,.75); }
.sp-n{ margin-top:14px; max-width:26em; font:400 14px/21px var(--sans); color:rgba(246,244,239,.66); }
.sp-r{ display:flex; flex-direction:column; gap:10px; }
.sp-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; height:54px; padding:0 20px; border-radius:27px; font:400 15px/1 var(--sans);
  color:rgba(246,244,239,.7); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sp-row b{ font-weight:500; font-variant-numeric:tabular-nums; text-decoration:line-through; text-decoration-color:rgba(246,244,239,.4); }
.sp-row.us{ background:linear-gradient(180deg, #fff, #EFECE5); color:var(--obsidian); font-weight:500; box-shadow:inset 0 1px 0 #fff, 0 10px 24px -12px rgba(0,0,0,.6); }
.sp-row.us b{ text-decoration:none; font-size:17px; }
.sp-row span{ display:inline-flex; align-items:center; gap:10px; }
.sp-row.us i{ width:8px; height:8px; border-radius:50%; background:var(--ultra); box-shadow:0 0 0 4px rgba(36,54,232,.2); }
.sp-go{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding-left:20px; font:500 14px/1 var(--sans); color:var(--porcelain); text-decoration:none; }
.sp-go svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
@media (hover:hover){ .sp-go:hover svg{ transform:translateX(3px); } }
.sx .svc-qs{ margin-top:16px; }

@media (max-width:1023px){
  .sx-get{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sx-price{ grid-template-columns:minmax(0, 1fr); gap:24px; }
}
@media (max-width:767px){
  .sx-get{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  .sx-get li{ display:grid; grid-template-columns:40px minmax(0, 1fr); column-gap:14px; row-gap:2px; padding:16px; border-radius:18px; }
  .sg-ic{ grid-row:span 2; margin:0; }
  .sx-get b{ font-size:16px; line-height:21px; }
  .sx-get span:not(.sg-ic){ font-size:13.5px; line-height:20px; }
  .ba-h{ display:none; }
  .sx-ba li{ grid-template-columns:minmax(0, 1fr); gap:6px; padding:14px 16px; }
  .ba-arw{ display:none; }
  .ba-b{ font-size:13.5px; line-height:19px; }
  .ba-a{ font-size:15px; }
  .sx-price{ padding:22px 18px; border-radius:22px; }
  .sp-h{ font-size:56px; }
  .sp-row{ height:48px; padding:0 16px; font-size:14px; }
}

/* ---------- the Live Activity, as iOS draws it ----------
   The status in words, large, changing as the order moves; the time left
   on the right; three capsules that fill one after the other with a sheen
   running through the one in progress; and under them the three steps as
   icons that light up when they are reached. One run is nine seconds. */
.lv-prog, .lv-prog-l{ display:none !important; }
.la-eta{ display:grid; justify-items:end; font:600 22px/1 var(--sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.la-eta > span{ grid-area:1 / 1; }
.la-k{ color:#FFB340; opacity:0; }
.la-st{ display:grid; margin-top:16px; font:600 19px/1.15 var(--sans); letter-spacing:-.015em; }
.la-st > span{ grid-area:1 / 1; opacity:0; }
.la-st .s1{ opacity:1; }
.la-bar{ display:flex; gap:5px; margin-top:12px; }
.la-bar i{ position:relative; flex:1; height:7px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.16); }
.la-bar i.g2{ flex:2.2; }
.la-bar b{ position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, #FF8A00, #FFB340); transform-origin:0 50%; transform:scaleX(0); }
.la-bar b::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform:translateX(-100%); }
.la-steps{ display:flex; justify-content:space-between; margin-top:10px; }
.la-steps > span{ display:inline-flex; align-items:center; gap:6px; font:500 12px/1 var(--sans); color:rgba(255,255,255,.45); }
.la-steps svg{ width:18px; height:18px; padding:3px; border-radius:50%; fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; background:rgba(255,255,255,.1); }
.la-steps > .p1{ color:#fff; } .la-steps .p1 svg{ background:#FF9F0A; stroke:#fff; }
.play .la-bar .g1 b{ animation:la-g1 9s cubic-bezier(.4,0,.2,1) infinite; }
.play .la-bar .g2 b{ animation:la-g2 9s cubic-bezier(.4,0,.2,1) infinite; }
.play .la-bar .g3 b{ animation:la-g3 9s cubic-bezier(.4,0,.2,1) infinite; }
.play .la-bar .g2 b::after{ animation:la-sheen 1.3s linear infinite, la-shon 9s steps(1) infinite; }
@keyframes la-shon{ 0%{ opacity:1; } 52%{ opacity:0; } 100%{ opacity:1; } }
.play .la-st .s1{ animation:la-s1 9s ease infinite; }
.play .la-st .s2{ animation:la-s2 9s ease infinite; }
.play .la-st .s3{ animation:la-s3 9s ease infinite; }
.play .la-m{ animation:la-m 9s ease infinite; }
.play .la-k{ animation:la-k 9s ease infinite; }
.play .la-steps .p2{ animation:la-p2 9s ease infinite; } .play .la-steps .p2 svg{ animation:la-pi2 9s ease infinite; }
.play .la-steps .p3{ animation:la-p3 9s ease infinite; } .play .la-steps .p3 svg{ animation:la-pi3 9s cubic-bezier(.2,1.6,.3,1) infinite; }
@keyframes la-g1{ 0%, 12%{ transform:scaleX(0); } 22%, 96%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
@keyframes la-g2{ 0%, 24%{ transform:scaleX(0); } 52%, 96%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
@keyframes la-g3{ 0%, 54%{ transform:scaleX(0); } 64%, 96%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
@keyframes la-sheen{ to{ transform:translateX(100%); } }
@keyframes la-s1{ 0%, 22%{ opacity:1; transform:none; } 25%, 100%{ opacity:0; transform:translateY(-6px); } }
@keyframes la-s2{ 0%, 22%{ opacity:0; transform:translateY(6px); } 26%, 62%{ opacity:1; transform:none; } 65%, 100%{ opacity:0; transform:translateY(-6px); } }
@keyframes la-s3{ 0%, 62%{ opacity:0; transform:translateY(6px); } 66%, 94%{ opacity:1; transform:none; } 98%, 100%{ opacity:0; } }
@keyframes la-m{ 0%, 62%{ opacity:1; } 65%, 96%{ opacity:0; } 100%{ opacity:1; } }
@keyframes la-k{ 0%, 62%{ opacity:0; transform:scale(.7); } 67%, 94%{ opacity:1; transform:none; } 98%, 100%{ opacity:0; } }
@keyframes la-p2{ 0%, 24%{ color:rgba(255,255,255,.45); } 27%, 96%{ color:#fff; } 100%{ color:rgba(255,255,255,.45); } }
@keyframes la-pi2{ 0%, 24%{ background:rgba(255,255,255,.1); stroke:rgba(255,255,255,.55); } 27%, 96%{ background:#FF9F0A; stroke:#fff; } 100%{ background:rgba(255,255,255,.1); } }
@keyframes la-p3{ 0%, 62%{ color:rgba(255,255,255,.45); } 65%, 96%{ color:#fff; } 100%{ color:rgba(255,255,255,.45); } }
@keyframes la-pi3{ 0%, 62%{ background:rgba(255,255,255,.1); stroke:rgba(255,255,255,.55); transform:none; } 65%{ background:#34C759; stroke:#fff; transform:scale(1.3); } 70%, 96%{ background:#34C759; stroke:#fff; transform:none; } 100%{ background:rgba(255,255,255,.1); } }
@media (max-width:767px){ .la-st{ font-size:17px; } .la-eta{ font-size:19px; } .la-steps span{ font-size:11px; } }
@media (prefers-reduced-motion: reduce){ .la-bar .g1 b, .la-bar .g2 b{ transform:scaleX(1); } .la-st .s1{ opacity:0; } .la-st .s2{ opacity:1; } }

/* ---------- each sheet its own way ----------
   Apps: the features round the phone they live on, and the way to the
   store as an iOS list with a status per row. Systems: light cards like
   the system itself, and the steps as real kitchen tickets on the rail.
   Integrations: the real logos on each card. Websites: an editorial list,
   and the steps as the real site going from a sketch to live. */

/* apps: round the phone */
.sg-apps{ display:grid; grid-template-columns:minmax(0, 1fr) 230px minmax(0, 1fr); gap:28px; align-items:center; padding:28px; border-radius:28px;
  background:radial-gradient(40% 60% at 50% 50%, rgba(36,54,232,.35), transparent 70%), rgba(255,255,255,.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sg-apps ul{ list-style:none; margin:0; padding:0; display:grid; gap:26px; }
.sg-apps li{ display:grid; grid-template-columns:40px minmax(0, 1fr); column-gap:14px; row-gap:3px; }
.sg-apps .sg-ic{ grid-row:span 2; margin:0; }
.sg-apps .sg-r li{ grid-template-columns:minmax(0, 1fr) 40px; text-align:right; }
.sg-apps .sg-r .sg-ic{ grid-column:2; grid-row:1 / span 2; }
.sg-apps .sg-r li > :not(.sg-ic){ grid-column:1; }
.sg-apps b{ font:500 16px/21px var(--sans); }
.sg-apps li > span:not(.sg-ic){ font:400 13.5px/20px var(--sans); color:rgba(246,244,239,.66); }
.sg-ph{ width:230px; filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.sg-ph .scr{ background:#fff; }

/* apps: the way to the store, as an iOS list */
.ar{ list-style:none; margin:0; padding:6px 0; border-radius:22px; background:#F2F2F7; color:#000; font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--sans); }
.ar li{ display:grid; grid-template-columns:36px minmax(0, 1fr) auto; gap:14px; align-items:center; padding:14px 18px; }
.ar li + li{ border-top:1px solid rgba(60,60,67,.14); margin-left:68px; padding-left:0; grid-template-columns:minmax(0, 1fr) auto; }
.ar li + li .ar-ic{ position:absolute; margin-left:-50px; }
.ar li{ position:relative; }
.ar-ic{ width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:var(--c); }
.ar-ic svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ar-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ar-t b{ font-weight:600; font-size:16px; line-height:21px; }
.ar-t > span:not(.bt-you){ font-size:14px; line-height:19px; color:#3C3C43; opacity:.75; }
.ar .bt-you{ border-top:0 !important; padding-top:2px !important; margin-top:2px !important; color:#3C3C43 !important; }
.ar .bt-you em{ color:#007AFF; }
.ar-st{ height:28px; padding:0 12px; border-radius:14px; display:grid; place-items:center; font-weight:600; font-size:12.5px; white-space:nowrap; }
.ar-st.s0{ background:rgba(142,142,147,.16); color:#636366; } .ar-st.s1{ background:rgba(88,86,214,.14); color:#5856D6; }
.ar-st.s2{ background:rgba(0,122,255,.12); color:#007AFF; } .ar-st.s3{ background:#34C759; color:#fff; }

/* systems: light, like the system */
.sg-sys li{ background:#F6F4EF; color:var(--obsidian); box-shadow:0 14px 30px -18px rgba(0,0,0,.6); }
.sg-sys li::after{ display:none; }
.sg-sys .sg-ic{ background:#fff; box-shadow:0 0 0 1px rgba(14,15,16,.08), 0 4px 10px -4px rgba(14,15,16,.2); border-radius:10px; }
.sg-sys .sg-ic svg{ stroke:#D9692E; }
.sg-sys li > span:not(.sg-ic){ color:var(--graphite) !important; }

/* systems: kitchen tickets */
.rt{ font-family:var(--mono); gap:6px; padding:18px 16px 16px; }
.rt-head{ display:flex; justify-content:space-between; padding-bottom:8px; border-bottom:1px dashed rgba(14,15,16,.3); }
.rt-head em{ font:400 10.5px/1 var(--mono); font-style:normal; letter-spacing:.12em; color:#8C8880; }
.rt b{ margin-top:6px; font:600 15px/20px var(--sans); }
.rt .rt-d{ font:400 13px/19px var(--sans); color:#46443F; }
.rt-cut{ display:block; margin:6px 0 2px; border-top:1px dashed rgba(14,15,16,.3); }
.rt-you{ font:400 10.5px/1 var(--mono) !important; letter-spacing:.12em; text-transform:uppercase; color:#8C8880 !important; }
.rt-todo{ display:flex !important; align-items:flex-start; gap:8px; font:500 13px/18px var(--sans) !important; color:#0E0F10 !important; }
.rt-todo i{ flex:none; width:14px; height:14px; margin-top:2px; border-radius:3px; box-shadow:inset 0 0 0 1.5px #0E0F10; }
.rt.rt-live{ box-shadow:0 14px 28px rgba(0,0,0,.4); }
.rt.rt-live b::before{ display:none; }
.rt-live .rt-todo i{ background:#34C759; box-shadow:none; }
.rt-stamp{ position:absolute; right:10px; top:44px; padding:4px 10px; border:2px solid #2F9E5B; border-radius:6px; font:700 14px/1 var(--mono) !important; letter-spacing:.14em; text-transform:uppercase;
  color:#2F9E5B !important; transform:rotate(-12deg); opacity:.85; mix-blend-mode:multiply; }
.play .rt-stamp{ animation:rt-stamp 5s cubic-bezier(.2,1.6,.3,1) infinite; }
@keyframes rt-stamp{ 0%, 30%{ opacity:0; transform:rotate(-12deg) scale(1.8); } 38%, 100%{ opacity:.85; transform:rotate(-12deg) scale(1); } }

/* integrations: the real logos */
.sg-lg{ display:flex; gap:6px; margin-bottom:10px; }
.sg-lg img{ width:40px; height:40px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.12), 0 8px 18px -6px rgba(0,0,0,.6); }
.sg-lg .sg-ic{ margin:0; }

/* websites: an editorial list */
.sg-web{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:48px; border-top:1px solid rgba(246,244,239,.12); }
.sg-web li{ display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:16px; row-gap:4px; padding:22px 0; border-bottom:1px solid rgba(246,244,239,.12); }
.sg-web .sg-ic{ grid-row:span 2; width:44px; height:44px; margin:0; border-radius:50%; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.sg-web .sg-ic svg{ stroke:#9DB2FF; }
.sg-web b{ font:500 18px/24px var(--sans); letter-spacing:-.01em; }
.sg-web li > span:not(.sg-ic){ font:400 14.5px/22px var(--sans); color:rgba(246,244,239,.66); }

/* websites: the real site, from a sketch to live */
.ws{ position:relative; display:block; aspect-ratio:16 / 11; border-radius:12px; overflow:hidden; background:#F6F4EF; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 20px 40px -20px rgba(0,0,0,.7); }
.ws-bar{ position:relative; z-index:1; display:flex !important; align-items:center; gap:4px; height:20px; padding:0 8px; background:#1A1D26; }
.ws-bar > i{ display:block; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); }
.ws-url{ display:inline-flex; align-items:center; gap:4px; margin:0 auto; padding-right:20px; font:400 9.5px/1 var(--sans); color:rgba(246,244,239,.7); }
.ws-url svg{ width:7px; height:9px; color:#34C759; }
.ws img{ position:absolute; left:0; top:20px; width:100%; height:calc(100% - 20px); object-fit:cover; object-position:50% 30%; }
.ws-1 img{ filter:grayscale(1) contrast(.35) brightness(1.55) blur(1.5px); }
.ws-1::after{ content:""; position:absolute; inset:20px 0 0; background:repeating-linear-gradient(0deg, transparent 0 18px, rgba(14,15,16,.06) 18px 19px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(14,15,16,.06) 18px 19px); }
.ws-2 img{ filter:grayscale(.85) contrast(.9); }
.ws-3{ background:#0B0F1C; }
.ws-3 img{ left:50%; width:38%; margin-left:-19%; top:28px; height:calc(100% - 20px); border-radius:10px 10px 0 0; object-position:38% 0; box-shadow:0 0 0 3px #1b1f2c; }
.ws-4{ box-shadow:0 0 0 1.5px #34C759, 0 20px 40px -16px rgba(52,199,89,.4); }

@media (max-width:1023px){
  .sg-apps{ grid-template-columns:minmax(0, 1fr) 190px; }
  .sg-apps .sg-ph{ grid-column:2; grid-row:1 / span 2; width:190px; }
  .sg-apps .sg-r li{ grid-template-columns:40px minmax(0, 1fr); text-align:left; }
  .sg-apps .sg-r .sg-ic{ grid-column:1; } .sg-apps .sg-r li > :not(.sg-ic){ grid-column:2; }
  .sg-web{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:767px){
  .sg-apps{ grid-template-columns:minmax(0, 1fr); padding:18px; gap:18px; border-radius:22px; }
  .sg-apps .sg-ph{ grid-column:1; grid-row:1; width:150px; margin:0 auto; }
  .sg-apps ul{ gap:16px; }
  .ar li{ grid-template-columns:32px minmax(0, 1fr); padding:12px 14px; gap:12px; }
  .ar li + li{ margin-left:58px; grid-template-columns:minmax(0, 1fr); }
  .ar li + li .ar-ic{ margin-left:-44px; }
  .ar-ic{ width:32px; height:32px; }
  .ar-st{ grid-column:1 / -1; justify-self:start; height:24px; font-size:11.5px; }
  .ar li:first-child .ar-st{ grid-column:2; }
  .ar-t b{ font-size:15px; } .ar-t > span:not(.bt-you){ font-size:13px; }
  .sg-web li{ padding:16px 0; grid-template-columns:40px minmax(0, 1fr); }
  .sg-web .sg-ic{ width:40px; height:40px; }
  .sg-web b{ font-size:16px; line-height:21px; }
}
@media (max-width:767px){
  .sx-get.sg-int li{ display:flex; flex-direction:column; gap:3px; }
  .sg-int .sg-lg{ margin-bottom:8px; }
  .sg-int .sg-lg img{ width:36px; height:36px; }
}