/* ---------- The hero's devices: iPhone, iPad and Mac on one stage ---------- */
/* The stage is the phone's size, so the page never moves. The iPad and the Mac start at the phone's left edge, at its
   height, and run off the right of the screen (the hero clips them) rather than shrinking. js/devices.js draws them. */
.device-stage { --dev-font: 16px; position: relative; display: flex; justify-content: center; width: 100%; }
@media (max-width: 400px) { .device-stage { --dev-font: 15px; } }

.device-stage .phone, .device-stage .receipt { transition: opacity .3s var(--ease-out), transform .45s var(--ease-out), visibility 0s; }
.device-stage:not([data-device="iphone"]) .phone { opacity: 0; transform: translateX(-1.2em) scale(.98); visibility: hidden; transition-delay: 0s, 0s, .45s; }
.device-stage:not([data-device="iphone"]) .receipt { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, .45s; }

/* js/devices.js sets each device's left: centred in the room to the screen's edge when it fits, else from the column. */
.dev {
  position: absolute; top: 0; z-index: 2; font-size: var(--dev-font); height: 39.5em;
  left: 0;
  opacity: 0; visibility: hidden; transform: translateX(2em);
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-out), visibility 0s .5s;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.device-stage[data-device="ipad"] .dev-ipad, .device-stage[data-device="mac"] .dev-mac { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }

/* Shared screen parts, in the screen's own units: 1em is about 16pt in the app */
.dv-screen { position: relative; overflow: hidden; color: #111; font-family: var(--font-ui); }
.dv-screen svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.dv-side { display: flex; flex-direction: column; gap: .12em; padding: .8em .65em; background: linear-gradient(180deg, #F4F1EE, #EFEBE7); overflow: hidden; }
.dv-glass { display: inline-flex; align-items: center; justify-content: center; gap: .9em; height: 2.6em; padding: 0 1em; border-radius: 1.3em; background: rgba(255, 255, 255, .72); box-shadow: 0 .1em .4em rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(255, 255, 255, .9); color: #D96C00; }
.dv-glass b { font-size: 1.15em; line-height: 1; }
.dv-round { width: 2.6em; padding: 0; color: #3A3A3C; }
.dv-search { display: flex; align-items: center; gap: .45em; height: 2.3em; margin: .3em 0 .6em; padding: 0 .75em; border-radius: 1.15em; background: rgba(118, 118, 128, .12); color: #8A8A8E; font-size: .95em; }
.dv-search svg { width: 1em; height: 1em; }
.dv-row { display: flex; align-items: center; gap: .65em; height: 2.35em; padding: 0 .8em; border-radius: 1.2em; font-size: 1em; white-space: nowrap; }
.dv-row svg { color: #D96C00; }
.dv-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.dv-row.on { background: #D96C00; color: #fff; }
.dv-row.on svg { color: #fff; }
/* iPad: white symbols on coloured circles, as iOS's own lists have them; the selected row a grey pill. */
.ipad-screen .dv-row svg { width: 1.6em; height: 1.6em; flex-shrink: 0; padding: .42em; box-sizing: border-box; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)), var(--c); color: #fff; }
.ipad-screen .dv-row { gap: .55em; padding: 0 .45em; }
.ipad-screen .dv-row.on { background: rgba(118, 118, 128, .2); color: inherit; }
.dv-sec { display: flex; align-items: center; justify-content: space-between; padding: .9em .8em .3em; color: #8A8A8E; font-size: .92em; font-weight: 600; }
.dv-sec svg { width: .9em; height: .9em; }
.dv-main { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; background: #fff; }
.dv-bar { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 3.6em; }
.dv-bar b { font-size: 1.06em; font-weight: 600; }
.dv-tb { position: absolute; right: .8em; }
.dv-calc { font-size: var(--dev-font); width: 17.9em; display: flex; }
.dv-calc .calc { flex: 1; padding-bottom: 0; }
.dv-calc .calc-brand { display: none; }
.dv-insp { display: flex; flex-direction: column; gap: .5em; padding: 3.6em 1em 1em; background: #F2F2F7; border-left: 1px solid rgba(0, 0, 0, .05); overflow: hidden; }
.dv-insp-head { display: flex; align-items: center; justify-content: space-between; color: #8A8A8E; }
.dv-insp-head b { color: #3A3A3C; font-size: 1.06em; font-weight: 600; }
.dv-insp-head svg { color: #D96C00; }
.dv-insp .dv-search { margin: 0; }
.dv-day { display: flex; justify-content: space-between; align-items: baseline; padding: .8em 0 .2em; }
.dv-day b { color: #6C6C70; font-weight: 600; }
.dv-day em { font-style: normal; color: #D96C00; font-weight: 600; font-size: .9em; }
.dv-hist { display: flex; flex-direction: column; }
.dv-h { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "expr expr" "when value"; align-items: end; padding: .55em .3em .6em; border-bottom: 1px solid rgba(0, 0, 0, .08); border-radius: .5em; font-variant-numeric: tabular-nums; transition: background-color .8s; }
.dv-h i { grid-area: when; font-style: normal; color: #8A8A8E; font-size: .8em; padding-bottom: .35em; }
.dv-h em { grid-area: expr; justify-self: end; font-style: normal; color: #6C6C70; font-size: .92em; }
.dv-h b { grid-area: value; justify-self: end; font-size: 1.9em; font-weight: 300; line-height: 1.15; }
.dv-h.is-new { background: #FFE9CC; transition: none; }
.dv-wifi { width: 1em; height: .75em; border-radius: 1em 1em .2em .2em; background: currentColor; opacity: .85; }
.dv-batt { width: 1.7em; height: .8em; border-radius: .25em; background: currentColor; opacity: .9; }

/* ---------- iPad: landscape, sidebar | calculator | history ---------- */
.dev-ipad { width: 56.5em; }
.ipad-frame {
  width: 100%; height: 100%; padding: 1.05em; border-radius: 2.6em;
  background: linear-gradient(145deg, #3A3631, #1C1915 40%, #2A2622);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 80px -30px rgba(28, 25, 21, .55), 0 18px 36px -18px rgba(28, 25, 21, .4);
}
/* Corners concentric with the frame: its 2.6em less the 1.05em bezel, in the screen's .63em type. */
.ipad-screen { display: grid; grid-template-columns: 16.6em minmax(0, 1fr) 18.4em; height: 100%; border-radius: 2.46em; background: #fff; font-size: .63em; }
/* The floating sidebar sits .55em in, so its corners are the screen's less that. */
.ipad-screen .dv-side { margin: .55em 0 .55em .55em; padding-top: 3em; border-radius: 1.91em; box-shadow: 0 .1em .6em rgba(0, 0, 0, .06); }
.dv-sidebar-top { display: flex; justify-content: flex-end; gap: .5em; margin-bottom: .7em; }
/* iPad's status bar: time and date at the leading edge, inset past the rounded corner. */
.dv-status { position: absolute; z-index: 2; top: .35em; left: 0; right: 0; display: flex; align-items: center; gap: .45em; height: 2em; padding: 0 2.7em; font-size: .9em; font-weight: 600; }
.dv-status i { font-style: normal; font-weight: 500; }
.dv-status-r { display: flex; align-items: center; gap: .5em; margin-left: auto; }
.ipad-screen .dv-main { padding-top: 1.9em; }
.dv-undo { display: flex; gap: .6em; width: 28.4em; margin: .2em 0 0; }
.dv-undo i { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #E5E5EA; color: #3A3A3C; }
.dv-undo i:nth-child(2) { color: #B0B0B5; }
.dv-undo .dv-paste { margin-left: auto; color: #B0B0B5; }
.ipad-screen .dv-calc { --dev-font: 14.5px; margin-top: auto; margin-bottom: 1.3em; }
.ipad-screen .dv-insp { padding-top: 5.4em; }
/* The fingertip that taps the iPad's keys */
.dv-touch { position: absolute; z-index: 3; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(10, 132, 255, .32), rgba(10, 132, 255, .14) 60%, transparent 62%); box-shadow: 0 0 0 1.5px rgba(10, 132, 255, .55);
  transition: left .22s var(--ease-out), top .22s var(--ease-out), opacity .2s; }
.dv-touch.is-on { opacity: 1; }

/* ---------- Mac: a MacBook display with the app's window, and its base ---------- */
.dev-mac { width: 61.4em; }
.mb-display {
  position: relative; width: 57.6em; height: 37.9em; margin: 0 auto; padding: .7em .7em .9em;
  border-radius: 1.5em 1.5em .5em .5em; background: #1B1B1D;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 0 .14em #8E8E93, 0 30px 70px -30px rgba(28, 25, 21, .5);
}
.mb-display::before { content: ""; position: absolute; z-index: 3; top: .7em; left: 50%; width: 5.2em; height: .95em; margin-left: -2.6em; border-radius: 0 0 .6em .6em; background: #1B1B1D; }
.mb-screen { height: 100%; border-radius: .75em .75em .15em .15em; font-size: .6em;
  background: radial-gradient(120% 90% at 20% 0%, #F7D9B0, transparent 60%), radial-gradient(90% 90% at 100% 100%, #E9B48A, transparent 60%), linear-gradient(160deg, #F3E3CC, #E7C9A6); }
.mb-base { position: relative; width: 61.4em; height: 1.6em; margin-top: -.15em; border-radius: .2em .2em 1.6em 1.6em / .2em .2em 1em 1em;
  background: linear-gradient(180deg, #E4E4E7, #C9C9CE 45%, #9C9CA2); box-shadow: 0 1.4em 2.2em -1.2em rgba(28, 25, 21, .45); }
.mb-base i { position: absolute; top: 0; left: 50%; width: 9em; height: .55em; margin-left: -4.5em; border-radius: 0 0 .5em .5em; background: linear-gradient(180deg, #B8B8BD, #D2D2D6); }
.mb-menubar { display: flex; align-items: center; gap: 1.5em; height: 2.1em; padding: 0 1.4em; background: rgba(255, 255, 255, .45); backdrop-filter: blur(8px); font-size: .95em; white-space: nowrap; }
.mb-menubar b { font-weight: 700; }
.mb-menubar i { font-style: normal; }
.mb-screen .mb-apple { width: 1.15em; height: 1.15em; fill: #111; stroke: none; margin-right: -.2em; }
.mb-menubar-r { display: flex; align-items: center; gap: 1em; margin-left: auto; }
.mb-menubar-r em { font-style: normal; }
.mb-win {
  position: absolute; top: 3.4em; left: 1.6em; right: 1.6em; bottom: 1.6em;
  /* macOS 26 rounds a toolbar window's corners at about 24pt; the floating sidebar inside is concentric with them. */
  display: grid; grid-template-columns: 16.6em minmax(0, 1fr) 18.4em; border-radius: 1.5em; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1.4em 3em rgba(40, 25, 10, .28);
}
.mb-win .dv-side { margin: .5em 0 .5em .5em; padding-top: .9em; border-radius: 1em; background: rgba(236, 233, 230, .96); }
.mb-lights { display: flex; gap: .55em; padding: 0 .3em 1em; }
.mb-lights i { width: .95em; height: .95em; border-radius: 50%; background: #FF5F57; }
.mb-lights i:nth-child(2) { background: #FEBC2E; } .mb-lights i:nth-child(3) { background: #28C840; }
.mb-bar { justify-content: flex-start; padding-left: 1.4em; }
.mb-win .dv-calc { --dev-font: 15px; margin-top: .4em; }
.mb-win .dv-insp { padding-top: 1.3em; }
/* Keys typed on the Mac's keyboard, shown as keycaps over the window */
/* In the empty corner under the toolbar title, clear of the keys. */
.mb-keys { position: absolute; left: 1.4em; top: 3.8em; width: max-content; display: flex; gap: .35em; padding: .4em .5em; border-radius: .9em;
  background: rgba(28, 25, 21, .78); backdrop-filter: blur(8px); }
.mb-keys:empty { display: none; }
.mb-keys kbd { min-width: 2.2em; height: 2.2em; padding: 0 .55em; display: grid; place-items: center; border-radius: .45em; background: rgba(255, 255, 255, .16); color: #fff; font: 600 1.05em/1 var(--font-ui); }

/* ---------- The switch under the stage: iPhone · iPad · Mac, each filling while its part plays ---------- */
.hero .demo-caption { width: 340px; }
.dev-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
.dev-switch button {
  position: relative; height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; overflow: hidden;
  color: var(--ink-2); font: 600 .84rem/1 var(--font-body); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s;
}
.dev-switch button:hover { color: var(--ink); }
.dev-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(40, 30, 15, .1), 0 2px 8px rgba(40, 30, 15, .08); }
.dev-switch button:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
/* Progress: a ring round the play/pause button, filling while the device on the stage has its turn */
.hero .demo-pause { overflow: visible; }
/* A fixed 42px ring centred on the 36px button (a percentage size measured from inside its border, and came out uneven). */
.demo-pause .demo-ring { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; max-width: none; margin: -21px 0 0 -21px; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.demo-ring circle { fill: none; stroke: var(--tomato); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.demo-ring circle.run { animation: ringFill var(--dur, 6s) linear forwards; }
.demo-caption.is-paused .demo-ring circle.run { animation-play-state: paused; }
@keyframes ringFill { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .dev, .device-stage .phone, .device-stage .receipt { transition: none; } }
/* The home hero keeps only its green corner; the warm glow is behind whichever device is up instead. */
.hero-bg.is-staged { background: radial-gradient(700px 500px at 0% 0%, rgba(46, 106, 76, .07), transparent 70%); }
/* The warm glow behind whichever device is up (it replaces the hero's fixed glows, which were placed for the phone).
   It fades out well inside its own box, so the hero's edge never cuts it. */
.stage-glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 165, 36, .24), rgba(240, 120, 40, .1) 55%, rgba(216, 67, 42, 0) 100%);
  transition: left .6s var(--ease-out), top .6s var(--ease-out), width .6s var(--ease-out), height .6s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .stage-glow { transition: none; } }
/* The home hero stays one column up to 1180px: below that a full-size iPad or Mac has no room beside the headline
   (it would show little more than its sidebar), so the devices get the page's width under the headline instead. */
@media (min-width: 980px) and (max-width: 1179px) {
  .hero-grid-devices { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-grid-devices h1 { font-size: clamp(2.2rem, .9rem + 6.6vw, 5.1rem); }
}
/* The play/pause button lines up with the switch, not with the switch and the caption under it. */
.hero .demo-caption { align-items: start; }
.hero .demo-caption .demo-pause { margin-top: 1px; }