/* /sign/ landing: the shell (site bar, headline band, footer), the stage (rail, office frame, phone frame, panes),
   the static first frame of the cockpit, the shared motion classes and the booking view.
   Tokens come from tokens.css. On the navy ground text is white, --navy-body, --navy-meta or --teal-bright.
   Orange appears only on the yoke's send arrow, Book a demo and the ring a person's next press carries
   (sender.css adds the reports' pills). Hover and state changes move colour and border only; motion is opacity
   and transform only. Breakpoints: 899.98 / 1279.98 (director.js reads the same queries). */

/* ---------- page chrome ---------- */
:where(.ds-bar, .ds-band, .ds-stage-in, .ds-foot, .ds-panes) :where(h1, h2, h3, p, ol, ul, li) { margin: 0; padding: 0; }
:where(.ds-bar, .ds-band, .ds-rail, .ds-foot, .ds-nojs) a { color: inherit; text-decoration: none; }
.ds-skip { position: absolute; left: 16px; top: -200px; z-index: 200; background: var(--surface); color: var(--navy); border: 1px solid var(--ctl-line); border-radius: var(--r-control); padding: 12px 16px; font-size: 14px; font-weight: 700; text-decoration: none; }
.ds-skip:focus-visible { top: 12px; outline-color: var(--orange-ink); }

.ds-bar { background: var(--navy); border-bottom: 1px solid var(--navy-line); }
.ds-bar-in { width: min(1280px, calc(100% - 64px)); height: var(--nav-h); margin: 0 auto; display: flex; align-items: center; gap: 16px; }
/* the logo slot: holds the owner's orbit lockup unaltered when it is supplied; until then the /products text wordmark */
.ds-lockup { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 32px; min-width: 240px; color: #fff; }
.ds-lockup > svg, .ds-lockup > img { display: block; height: 32px; width: auto; }
.ds-word { font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.ds-tag { font-weight: 700; font-size: 10px; line-height: 1.5; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; color: var(--navy-meta); border-left: 1px solid var(--navy-line); padding-left: 10px; }
.ds-hair { flex: none; width: 1px; height: 24px; background: var(--navy-line); }
.ds-product { font-weight: 900; font-size: 15px; color: var(--teal-bright); }
.ds-bar-links { margin-left: auto; display: flex; align-items: center; gap: 20px; }
/* Details is a visible door beside Book a demo: a ghost button on navy (border + colour only on hover) */
.ds-details { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1.5px solid var(--navy-ctl); border-radius: var(--r-control); font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; transition: border-color var(--t-hover) ease; }
@media (hover:hover){ .ds-details:hover{ border-color: #fff; } }
.ds-cta { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-control); background: var(--orange); color: var(--navy); font-size: 14px; font-weight: 700; white-space: nowrap; transition: background-color var(--t-hover) ease; }
.ds-cta::after { content: ''; position: absolute; inset: -4px 0; }
@media (hover:hover){ .ds-cta:hover{ background: var(--orange-hover); color: var(--navy); } }

.ds-band { background: var(--navy); }
.ds-band-in { width: min(1280px, calc(100% - 64px)); min-height: var(--band-h); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.ds-h1 { font-weight: 900; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); word-spacing: 0.05em; color: #fff; text-wrap: balance; }
.ds-h1-b { color: var(--teal-bright); }
/* without a script: one line under the headline, above the fold */
.ds-nojs { margin: 2px 0 10px; font-size: 13px; line-height: 1.5; color: var(--navy-body); }
.ds-nojs a { font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.ds-foot { background: var(--navy); border-top: 1px solid var(--navy-line); color: var(--navy-meta); font-size: 13px; }
.ds-foot-in { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 16px 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; }
.ds-foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ds-foot a { display: inline-block; padding: 13px 0; font-weight: 700; color: var(--navy-body); transition: color var(--t-hover) ease; }
@media (hover:hover){ .ds-foot a:hover{ color: #fff; } }

/* ---------- the stage: one navy ground in every scene; the headline, the rail and the office share one left axis ---------- */
.ds-stage { --ph-scale: 0.815; --ph-col: 328px; --dock-w: calc(402px * 0.62 + 32px); position: relative; background: var(--stage); color: #fff; }
.ds-stage:focus { outline: none; }
.ds-stage-in { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 16px; }
.ds-panes { display: none; }
/* before the director boots, the reserved switch is not shown (no dormant control) */
.ds-panes:not([data-js]) { visibility: hidden; }
/* Pause stops everything that moves, not just the clock */
.ds-stage[data-paused] *, .ds-stage[data-paused] *::before, .ds-stage[data-paused] *::after { animation-play-state: paused !important; }

/* the rail: a readout, never a control */
.ds-rail { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ds-steps-wrap { position: relative; min-width: 0; }
.ds-steps { display: flex; align-items: center; list-style: none; font-size: var(--fs-rail); font-weight: 700; color: var(--navy-meta); white-space: nowrap; }
.ds-step { position: relative; padding: 6px 0; transition: color var(--t-draw) var(--ease-out); }
.ds-step + .ds-step { margin-left: 22px; }
.ds-step + .ds-step::before { content: '·'; content: '·' / ''; position: absolute; left: -14px; color: var(--navy-ctl); }
.ds-step.ds-done { color: var(--teal-bright); }
.ds-step[aria-current="step"] { color: #fff; }
.ds-rail-bar { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--teal-bright); opacity: 0; transform-origin: 0 0; transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); transition: transform var(--t-draw) var(--ease-out), opacity var(--t-fade) linear; }
.ds-rail-bar.ds-on { opacity: 1; }
.ds-rail-bar.ds-snap { transition: none; }
.ds-rail-end { flex: none; display: flex; align-items: center; gap: 12px; }
.ds-clock { display: inline-grid; justify-items: end; align-items: center; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--navy-body); white-space: nowrap; visibility: hidden; }
.ds-clock > .ds-clock-in { grid-area: 1 / 1; }
@media (min-width: 900px) {
  /* the end line never reflows the rail: its widest text is held in the same cell from the first frame */
  .ds-clock::before { content: 'Sent to signed 1 min 59 s'; content: 'Sent to signed 1 min 59 s' / ''; grid-area: 1 / 1; visibility: hidden; font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
}
.ds-clock.ds-on { visibility: visible; }
/* the page ends on a number: the end line in display type (colour, size and weight only) */
.ds-clock.ds-final { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; color: #fff; }
.ds-clock.ds-final #ds-clock-v { color: var(--teal-bright); }
/* every state's controls share ONE right-aligned cell: the live one sits flush with the edge, nothing reflows */
.ds-ctls { display: grid; justify-items: end; align-items: center; }
.ds-ctls > * { grid-area: 1 / 1; }
.ds-ctls > [hidden] { display: inline-flex !important; visibility: hidden; }
.ds-endctl { display: inline-flex; align-items: center; gap: 12px; }
.ds-ctl { position: relative; height: 32px; padding: 0 14px; border: 1.5px solid var(--navy-ctl); border-radius: var(--r-control); background: transparent; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; transition: border-color var(--t-hover) ease, color var(--t-hover) ease; }
.ds-ctl::after { content: ''; position: absolute; inset: -6px -2px; }
@media (hover:hover){ .ds-ctl:hover{ border-color: var(--navy-meta); } }
/* the end frame's second door is the details page, never a second Book a demo (the header already has the one orange CTA) */
.ds-end-details { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1.5px solid var(--navy-ctl); border-radius: var(--r-control); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; transition: border-color var(--t-hover) ease; }
.ds-end-details::after { content: ''; position: absolute; inset: -6px 0; }
@media (hover:hover){ .ds-end-details:hover{ border-color: #fff; } }

/* the floor: the office takes all of it until a document exists; then it keeps the left column and the phone rises in
   on the right (the one reflow, on the review -> document scene change). The phone column is its own height's width. */
/* the stage is a landscape screen, never a slab: its height follows the window but is capped at 0.64 of its own width
   (a 1280-wide stage is at most 819 tall), so a tall window gets navy above and below instead of a near-square frame */
.ds-floor { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ph-col); column-gap: 40px; --floor-w: min(1280px, calc(100vw - 64px)); height: max(420px, min(calc(100vh - var(--nav-h) - var(--band-h) - 60px), calc(var(--floor-w) * 0.64))); height: max(420px, min(calc(100svh - var(--nav-h) - var(--band-h) - 60px), calc(var(--floor-w) * 0.64))); }
.ds-office { position: relative; min-width: 0; overflow: hidden; grid-column: 1 / -1; grid-row: 1; background: var(--app-canvas); color: var(--navy); border-radius: var(--r-chassis); box-shadow: var(--sh-chassis); }
.ds-stage[data-doc="1"] .ds-office, .ds-stage[data-phone="in"] .ds-office { grid-column: 1; }
/* the certificate gets the whole floor */
.ds-stage[data-cert="1"] .ds-office { grid-column: 1 / -1; z-index: 2; }
/* the viewer covers the whole office: the page under it hides in the same frame the office widens, so nothing a visitor
   (or the layout-shift metric) can see reflows when the certificate opens (it measured 0.166 at 1440) */
.ds-stage[data-cert="1"] #ds-ledger .ds-lg-col { visibility: hidden; }
.ds-root { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; background: var(--app-canvas); color: var(--navy); }
.ds-root[hidden] { display: none; }
.ds-root:focus { outline: none; }

.ds-phone-col { position: relative; min-width: 0; grid-column: 2; grid-row: 1; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.ds-stage[data-phone="in"] .ds-phone-col { pointer-events: auto; }
.ds-phone-frame { position: relative; flex: none; width: calc(402px * var(--ph-scale)); height: calc(874px * var(--ph-scale)); opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity var(--t-scene-in) var(--ease-out), transform var(--t-scene-in) var(--ease-out), visibility 0s linear var(--t-scene-in); }
.ds-phone-frame[hidden] { display: none; }
.ds-stage[data-phone="in"] .ds-phone-frame { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-scene-in) var(--ease-out), transform var(--t-scene-in) var(--ease-out), visibility 0s; }
/* the /products iOS frame, 402 x 874, scaled by the floor's height; the screen fills it edge to edge */
.ds-device { --ph-w: 402px; --ph-h: 874px; position: absolute; left: 0; top: 0; width: 402px; height: 874px; overflow: hidden; border-radius: 48px; background: #000; transform: scale(var(--ph-scale)); transform-origin: 0 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,.28), 0 40px 90px rgba(0,0,0,.7); -webkit-font-smoothing: antialiased; }
.ds-phone-screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: var(--navy); }
.ds-island { position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 24px; background: #000; z-index: 50; pointer-events: none; }
.ds-dock-hit, .ds-dock-close { display: none; }

/* ---------- motion vocabulary the modules share (opacity and transform only) ---------- */
.ds-in { opacity: 1; }
.ds-out { opacity: 0; }
.ds-in, .ds-out { transition: opacity var(--t-fade) linear, transform var(--t-enter) var(--ease-out); }
.ds-rise { opacity: 0; transform: translate3d(0, 8px, 0); }
.ds-rise.ds-in { opacity: 1; transform: none; transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.ds-rise.ds-out { opacity: 0; transform: none; }
.ds-spring { opacity: 1; animation: ds-spring var(--t-spring) var(--ease-spring) both; transition: opacity 140ms linear; }
@keyframes ds-spring { from { transform: scale(.4); } to { transform: scale(1); } }
.ds-scene { opacity: 0; transform: translate3d(0, 24px, 0); }
.ds-scene.ds-in { opacity: 1; transform: none; transition: opacity var(--t-scene-in) var(--ease-out), transform var(--t-scene-in) var(--ease-out); }
.ds-scene.ds-out { opacity: 0; transform: none; transition: opacity var(--t-scene-out) linear; }
/* a scene on its way out is a picture: a click in its fade lands on the scene coming in, never on a control you can no longer see */
.ds-out { pointer-events: none; }
/* the next press: in hands mode after 3 s idle, in autoplay through the dwell. Orange outline + a soft halo, colour
   only, so it never reads as the keyboard's focus ring (2px, no halo) */
.ds-ring { outline: 2px solid var(--orange) !important; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,122,26,.18) !important; }
/* autoplay: the control a person would press, pressed (>= 280 ms, a real change of colour, never orange). A light control
   darkens with ink; a navy control takes navy-2 (the product's own hover). sender.css and paper.css dress their own
   .ds-pressed; the phone and the ledger take it from here. The idle ring's halo stays on through the press. */
.ds-pressed { --ds-press-ink: rgba(11,29,58,.14); box-shadow: inset 0 0 0 999px var(--ds-press-ink); }
.ds-ring.ds-pressed { box-shadow: inset 0 0 0 999px var(--ds-press-ink), 0 0 0 6px rgba(255,122,26,.18) !important; }
.ds-send.ds-pressed, .ds-btn-primary.ds-pressed, #ds-templates .ds-pressed { --ds-press-ink: transparent; }
.ds-ph .ds-pressed:is(.ds-ph-primary:not(.is-pending), .ds-ph-btn, .ds-ph-cta, .ds-ph-dl, .ds-ph-tab.is-on),
.ds-lg .ds-pressed.is-primary { --ds-press-ink: transparent; background: var(--navy-2); border-color: var(--navy-2); }

/* ---------- the cockpit's first frame (index.html) is cockpit.js's own home, styled by sender.css. Until the cockpit
   adopts it, the greeting keeps the 44px row the thinking slot takes, and the inert controls do not react ---------- */
.ds-sender .ds-s0 .ds-greeting { margin-bottom: 44px; }
@media (hover:hover){ .ds-sender .ds-s0 [data-s0-inert]:hover{ color: var(--navy); border-color: var(--app-line); } }
@media (hover:hover){ .ds-sender .ds-s0 [data-s0-inert]:hover .ds-idea-ic{ border-color: var(--app-line); } }

/* ---------- short windows: the headline band gives its height to the stage ---------- */
@media (min-width: 900px) and (max-height: 760px) {
  .ds-stage, .ds-band { --band-h: 48px; }
  :root { --band-h: 48px; }
  .ds-h1 { font-size: 24px; }
}

/* ---------- 900-1279: the office takes the width; the phone docks bottom-right at 0.62 and, when that gains
   something, expands over the page on tap ---------- */
@media (max-width: 1279.98px) {
  .ds-h1 { font-size: 30px; }
  .ds-floor { grid-template-columns: minmax(0, 1fr); }
  .ds-office, .ds-stage[data-doc="1"] .ds-office, .ds-stage[data-phone="in"] .ds-office, .ds-stage[data-cert="1"] .ds-office { grid-column: 1; }
  .ds-phone-col { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: block; }
  .ds-stage[data-dock="docked"][data-dockable="1"] .ds-dock-hit { display: block; position: absolute; inset: 0; z-index: 60; width: 100%; height: 100%; padding: 0; border: 0; border-radius: calc(48px * var(--ph-scale)); background: transparent; cursor: pointer; }
  .ds-stage[data-dock="expanded"] .ds-phone-col { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; background: rgba(11,29,58,.72); }
  .ds-stage[data-dock="expanded"] .ds-dock-close { display: inline-flex; align-items: center; position: fixed; top: 16px; right: 16px; z-index: 151; }
  /* the docked phone sits in the office's bottom-right corner: from the document's page on (and whenever mail is on
     the phone) the office's scene stops short of it by a CONSTANT width (expanding never reflows the page behind).
     The strip beside it is the navy ground, so the phone sits on the stage, not on a blank office block. */
  .ds-stage[data-dock][data-scene="doc"] .ds-office > #ds-ledger,
  .ds-stage[data-dock][data-phone="in"] .ds-office > .ds-root { right: var(--dock-w); }
  .ds-stage[data-dock][data-phone="in"] .ds-office, .ds-stage[data-dock][data-scene="doc"] .ds-office { background: transparent; box-shadow: none; }
  .ds-stage[data-dock][data-phone="in"] .ds-office > .ds-root, .ds-stage[data-dock][data-scene="doc"] .ds-office > .ds-root { border-radius: var(--r-chassis); box-shadow: var(--sh-chassis); }
  /* the certificate viewer's scrim covers the whole office */
  .ds-stage[data-dock][data-cert="1"] .ds-office { z-index: 6; }
  .ds-stage[data-dock][data-cert="1"] .ds-office > #ds-ledger { right: 0; }
}

/* ---------- below 900: one pane at a time, Office | Phone (under the site bar) ---------- */
@media (max-width: 899.98px) {
  .ds-bar-in, .ds-band-in, .ds-foot-in { width: auto; margin: 0 16px; }
  .ds-stage-in { width: auto; padding: 0 16px 12px; }
  .ds-js .ds-panes, .ds-panes[data-js] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 44px; padding: 4px; margin: 8px 16px 0; border: 1px solid var(--navy-line); border-radius: var(--r-small); }
  .ds-pane-btn { position: relative; height: 34px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--navy-meta); font-size: 14px; font-weight: 700; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
  .ds-pane-btn::after { content: ''; position: absolute; inset: -5px 0; }
  .ds-pane-btn[aria-pressed="true"] { background: var(--navy-2); color: #fff; }
  .ds-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--orange); vertical-align: middle; }
  .ds-dot[hidden] { display: inline-block; visibility: hidden; }
  .ds-floor { display: block; height: max(360px, calc(100vh - var(--nav-h) - 188px)); height: max(360px, calc(100svh - var(--nav-h) - 188px)); }
  .ds-office { height: 100%; }
  .ds-phone-col { position: static; height: 100%; display: none; justify-content: center; }
  .ds-stage[data-pane="phone"] .ds-phone-col { display: flex; }
  .ds-stage[data-pane="phone"] .ds-office { display: none; }
  .ds-phone-frame { opacity: 1; visibility: visible; transform: none; transition: none; }
  .ds-stage[data-dock] .ds-dock-hit, .ds-stage[data-dock] .ds-dock-close { display: none; }
  /* an exhausted inner scroll hands the swipe to the page */
  .ds-root, #ds-phone .ds-ph-scroll { overscroll-behavior: auto; }
}
/* a short phone: the stage is sized to the window so the signing bar is always reachable */
@media (max-width: 899.98px) and (max-height: 640px) {
  .ds-floor { height: max(320px, calc(100vh - 16px)); height: max(320px, calc(100svh - 16px)); }
}

/* ---------- phones: no device frame (the visitor is holding one), the phone pane runs edge to edge;
   the rail becomes five 3px segments ---------- */
@media (max-width: 700px), (max-width: 899.98px) and (pointer: coarse) and (max-height: 500px) {
  .ds-band-in { padding: 12px 0 14px; }
  .ds-h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
  .ds-h1 > span { display: block; }
  .ds-stage[data-pane="phone"] .ds-phone-col { margin: 0 -16px; }   /* the column, not the floor: a pane switch moves no box that stays on screen */
  .ds-phone-frame { width: 100%; height: 100%; }
  .ds-device { inset: 0; width: auto; height: auto; transform: none; border-radius: 0; box-shadow: none; }
  .ds-device { --ph-w: 100%; --ph-h: 100%; }
  .ds-island, .ds-ph-island { visibility: hidden; }
  .ds-rail { gap: 12px; }
  .ds-steps-wrap { flex: 1; }
  .ds-steps { gap: 4px; font-size: 0; }
  .ds-step { flex: 1; height: 3px; padding: 0; border-radius: 2px; background: var(--navy-line); transition: background-color var(--t-draw) var(--ease-out); }
  .ds-step + .ds-step { margin-left: 0; }
  .ds-step + .ds-step::before { content: none; }
  .ds-step.ds-done { background: var(--teal-bright); }
  .ds-step[aria-current="step"] { background: #fff; }
  .ds-rail-bar { display: none; }
  .ds-stage[data-end="1"] .ds-steps-wrap { display: none; }
  .ds-ctls > .ds-endctl[hidden] { display: none !important; }
  .ds-stage[data-end="1"] .ds-rail-end { flex: 1; justify-content: space-between; }
  .ds-clock { font-size: 12px; }
  .ds-clock.ds-final { font-size: 17px; }
  /* the end line stacks (label over number) inside the 44px rail, so the widest one fits beside Replay + Book a demo at 320 */
  .ds-clock.ds-final .ds-clock-in { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
  .ds-clock.ds-final #ds-clock-lead { font-size: 12px; font-weight: 700; color: var(--navy-body); }
}
@media (max-width: 480px) {
  .ds-bar-in { gap: 12px; }
  .ds-lockup { height: 24px; min-width: 72px; }
  .ds-lockup::after { content: ''; position: absolute; inset: -10px 0; }
  .ds-lockup > svg, .ds-lockup > img { height: 24px; }
  .ds-word { font-size: 22px; }
  .ds-tag { display: none; }
  .ds-bar-links { gap: 14px; }
}
/* 320: the bar still fits */
@media (max-width: 360px) {
  .ds-bar-in { gap: 8px; }
  .ds-bar-links { gap: 10px; }
  .ds-cta { padding: 0 12px; }
}
@media (max-width: 300px) { .ds-hair, .ds-product { display: none; } }

/* ---------- the booking view (#/book), verbatim from /products ---------- */
#pageBook { background: var(--ground); color: var(--navy); }
:where(#pageBook *, #pageBook *::before, #pageBook *::after) { margin: 0; padding: 0; }
:where(#pageBook) a { color: var(--orange-ink); text-decoration: none; }
@media (hover:hover){ :where(#pageBook) a:hover{ color: var(--navy); } }
#pageBook p { text-wrap: pretty; }
#pageBook [data-r="h1"] { text-wrap: balance; word-spacing: 0.05em; }
#pageBook a, #pageBook button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
#pageBook a:focus-visible, #pageBook button:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
#pageBook input:focus-visible, #pageBook select:focus-visible, #bookH1:focus { outline: none; }
#bookPick, #bookForm, #bookDone { scroll-margin-top: 16px; }
.ybk-field { text-overflow: ellipsis; }
.ybk-field:focus { border-color: var(--orange-ink) !important; }
@media (hover:hover){ .ybk-back:hover{ color: var(--navy) !important; } }
@media (hover:hover){ .ybk-submit:hover{ background: var(--orange-hover) !important; } }
.ybk-slot { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--ctl-line); color: var(--navy); font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700; padding: 12px 14px; border-radius: var(--r-control); cursor: pointer; }
@media (hover:hover){ .ybk-slot:hover{ border-color: var(--orange) !important; } }
.ybk-slot[aria-pressed="true"] { border-color: var(--orange) !important; background: var(--orange-tint) !important; }
@media (hover:hover){ .ybk-link:hover{ color: var(--navy) !important; } }
.ybk-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 6px; }
@media (max-width: 900px) {
  #pageBook [data-r="sec"] { padding-left: 20px !important; padding-right: 20px !important; }
  #pageBook [data-r="row"] { gap: 36px !important; justify-content: center; flex-direction: row !important; align-items: flex-start !important; }
  #pageBook [data-r="col"] { min-width: min(320px, 100%) !important; }
  #pageBook [data-r="h1"] { font-size: 38px !important; line-height: 1.18 !important; }
}
@media (max-width: 700px) {
  #pageBook [data-r="sec"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  #pageBook [data-r="h1"] { font-size: 34px !important; }
  #pageBook [data-r="col"] { display: contents; }
  #pageBook [data-r="row"] { gap: 24px !important; }
  #pageBook [data-r="bkhead"], #pageBook [data-r="bklist"] { flex: 0 0 100%; }
  #pageBook [data-r="bkhead"] { order: 1; }
  #pageBook [data-r="bkcard"] { order: 2; }
  #pageBook [data-r="bklist"] { order: 3; }
  .ybk-back { padding: 14px 0; }
  .ybk-field { font-size: 16px !important; }
  .ybk-link { padding-top: 14.5px !important; padding-bottom: 14.5px !important; }
  .ybk-slot { padding-top: 12.5px; padding-bottom: 12.5px; }
}
@media (max-width: 360px) { #pageBook [data-r="h1"] { font-size: 30px !important; } }