/* ---------- fluid rem root ----------
   1440/90 = 16px. At 992 the root is 11.02px, so the desktop composition
   shrinks proportionally rather than reflowing; below 992 it snaps back to a
   real 16px and the components go single-column. styles.css is authored in px
   and clamp(vw), so it is unaffected either way. */
html{font-size:calc(clamp(992px,100vw,1440px) / 90)}
@media (max-width:991px){html{font-size:16px}}

:root{
  --ow-pad:6.5rem;          /* 104px at 1440 -> 1232px of content */
  --ow-max:90rem;
  --ow-lip:4rem;            /* section overlap and top radius */
  --ow-card:2rem;           /* 32px, every content card */
  --ow-head:3rem;
  --ow-nav:4.25rem;          /* sticky header height: hero pull-up, mega and scrim hang off it */           /* section heading -> its content, every section */
  --ow-btn:1rem;            /* 16px, every button — owner does not use pills */
  --ow-mut:rgba(13,13,15,.62);
  --ow-mut-2:rgba(13,13,15,.6);    /* small text: ≥4.5:1 on white and both washes (WCAG AA) */
  --ow-mut-lead:rgba(13,13,15,.5); /* two-tone display headlines only: large text, ≥3:1 */
  --ow-hair:rgba(13,13,15,.12);
  --ow-lightmut:rgba(255,255,255,.78);
}

/* ---------- type scale ---------- */
.ow-h1,.ow-h2,.ow-h3,.ow-h4,.ow-h5,.ow-h6{font-weight:600;letter-spacing:-.03em;margin:0;text-wrap:balance}
p{text-wrap:pretty}
.ow-h1{font-size:5rem;line-height:.95;letter-spacing:-.04em}
.ow-h2{font-size:4rem;line-height:1}
.ow-h3{font-size:3rem;line-height:1}
.ow-h4{font-size:2rem;line-height:1.2}
.ow-h5{font-size:1.375rem;line-height:1.05}
.ow-h6{font-size:1rem;line-height:1.3}
.ow-body-l{font-size:1.25rem;line-height:1.3;font-weight:400}
.ow-body-m{font-size:1rem;line-height:1.31;font-weight:400}
.ow-body-s{font-size:.875rem;line-height:1.28;font-weight:400}
.ow-mut{color:var(--ow-mut)}
.ow-mut-2{color:var(--ow-mut-2)}
/* the two-tone headline: a muted lead-in, then the dark payload */
.ow-h1 .lead,.ow-h2 .lead,.ow-h3 .lead{color:var(--ow-mut-lead)}

@media (max-width:991px){
  .ow-h1{font-size:2.75rem}
  .ow-h2{font-size:2.25rem}
  .ow-h3{font-size:1.875rem}
  .ow-h4{font-size:1.375rem}
  .ow-h5{font-size:1.125rem}
  .ow-body-l{font-size:1.0625rem}
}

/* ---------- shell ---------- */
.ow-wrap{max-width:var(--ow-max);margin:0 auto;padding:0 var(--ow-pad);width:100%}
@media (max-width:991px){:root{--ow-pad:20px;--ow-lip:2rem;--ow-head:28px}}

/* Every section after the first gets the card-deck treatment: it is pulled up
   over the one before and rounds its own top two corners. The background of
   each section is therefore what draws the lip. */
.ow-sec{position:relative;z-index:2;padding:8rem 0 10.25rem;background:#fff}
.ow-sec--stack{margin-top:calc(-1 * var(--ow-lip));border-radius:var(--ow-lip) var(--ow-lip) 0 0}
.ow-sec--wash{background:var(--wash)}
.ow-sec--wash2{background:var(--wash-2)}
.ow-sec--ink{background:var(--ink);color:#fff}
.ow-sec--last{padding-bottom:15.375rem}
@media (max-width:991px){
  .ow-sec{padding:64px 0 80px}
  .ow-sec--last{padding-bottom:104px}
}

/* ---------- buttons ---------- */
.ow-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:1rem 1.5rem;border-radius:var(--ow-btn);font-size:1rem;font-weight:600;
  letter-spacing:-.01em;white-space:nowrap;border:0;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.ow-btn--red{background:var(--red-aa);color:#fff}
.ow-btn--red:hover{background:var(--red-deep)}
.ow-btn--ink{background:var(--ink);color:#fff}
.ow-btn--ink:hover{background:var(--red-aa)}
.ow-btn--soft{background:rgba(13,13,15,.05);color:var(--ink)}
.ow-btn--soft:hover{background:rgba(13,13,15,.1)}
.ow-btn--white{background:#fff;color:var(--ink)}
.ow-btn--white:hover{background:var(--wash-2)}
/* "glass" by name only: a solid white button for dark surfaces */
.ow-btn--glass{background:#fff;color:var(--ink)}
.ow-btn--glass:hover{background:var(--wash-2)}
.ow-btn .arw{transition:transform .3s var(--ease)}
.ow-btn:hover .arw{transform:translateX(3px)}
.ow-link{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:1rem;color:var(--ink)}
.ow-link:hover{color:var(--red)}
.ow-link:hover .arw{transform:translateX(3px)}

/* ---------- nav ----------
   Three zones: brand, centred menu, actions. Always sticky, never shrinks, no
   shadow — a solid white bar with a hairline under it. */
.ow-nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--ow-hair)}
.ow-nav__in{max-width:var(--ow-max);margin:0 auto;padding:0 var(--ow-pad);height:var(--ow-nav);
  display:flex;align-items:center;gap:1.25rem}
.ow-nav__brand img{height:1.375rem;width:auto}
.ow-nav__menu{margin:0 auto}
.ow-nav__menu ul{display:flex;align-items:center;gap:.125rem}
.ow-nav__item{display:inline-flex;align-items:center;gap:.375rem;background:transparent;border:0;
  cursor:pointer;padding:.4375rem .625rem;border-radius:.5rem;font-size:.9375rem;font-weight:600;color:var(--ink);
  transition:background .2s var(--ease)}
.ow-nav__item:hover,.ow-nav__item[aria-expanded="true"]{background:rgba(13,13,15,.05)}
.ow-nav__item .cv{font-size:.6875rem;color:var(--ow-mut);transition:transform .25s var(--ease)}
.ow-nav__item[aria-expanded="true"] .cv{transform:rotate(180deg)}
.ow-nav__item[aria-current]{position:relative}
.ow-nav__item[aria-current]::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--red);transform:translateX(-50%)}
.ow-nav__right{margin-left:auto;display:flex;align-items:center;gap:.625rem}
.ow-nav__right .ow-btn{padding:.625rem 1rem;font-size:.9375rem}
.ow-nav__login{font-size:.9375rem;font-weight:600;padding:0 .25rem}
.ow-nav__login:hover{color:var(--red)}
.ow-nav__ham{display:none;width:2.75rem;height:2.75rem;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0}
.ow-nav__ham span{width:22px;height:2.4px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.ow-nav.is-open .ow-nav__ham span:first-child{transform:translateY(4.2px) rotate(45deg)}
.ow-nav.is-open .ow-nav__ham span:last-child{transform:translateY(-4.2px) rotate(-45deg)}


.ow-mega{position:absolute;top:var(--ow-nav);left:0;background:#fff;border-radius:.75rem;
  box-shadow:0 70px 76px rgba(13,13,15,.2);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-.5rem);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s,
             width .38s var(--ease),height .38s var(--ease),left .38s var(--ease)}
.ow-nav.is-mega .ow-mega{opacity:1;visibility:visible;transform:none}
.ow-mega__p{position:absolute;top:0;left:0;padding:2rem;opacity:0;visibility:hidden;
  transition:opacity .24s var(--ease),visibility .24s}
.ow-mega__p.is-on{opacity:1;visibility:visible;position:relative}
.ow-mega__cols{display:flex;gap:1.5rem}
.ow-mega__col{width:22.1875rem;display:flex;flex-direction:column;gap:1.5rem}
.ow-mega__col--cards{width:17.75rem;flex-direction:row;gap:1rem}
.ow-mega__gk{font-size:.875rem;font-weight:600;color:var(--ow-mut-2);margin:0 0 .5rem;padding:0 .25rem}
.ow-mega__g a{display:flex;align-items:center;gap:.625rem;padding:.5rem .25rem;border-radius:.25rem;
  transition:background .18s var(--ease)}
.ow-mega__g a:hover{background:var(--wash)}
.ow-mega__ic{width:1.25rem;height:1.25rem;flex:none;color:var(--red)}
.ow-mega__g b{font-size:1rem;font-weight:600}
.ow-mega__tag{font-size:.6875rem;font-weight:700;letter-spacing:.04em;padding:.15rem .4rem;border-radius:.375rem;
  background:var(--red-soft);color:var(--red-deep);margin-left:.375rem}
/* owner puts case-study cards in every dropdown; we have none, so these point
   at the two pages that carry the argument instead. */
.ow-mega__card{position:relative;flex:1;aspect-ratio:3/4;border-radius:.75rem;overflow:hidden;display:block;
  content-visibility:hidden}
.ow-nav.is-mega .ow-mega__card{content-visibility:visible}
.ow-mega__card img{width:100%;height:100%;object-fit:cover}
.ow-mega__card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(13,13,15,.86) 100%)}
.ow-mega__card b{position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;color:#fff;
  font-size:1rem;font-weight:600;line-height:1.25}
.ow-scrim{position:fixed;inset:var(--ow-nav) 0 0;background:rgba(13,13,15,.22);
  opacity:0;visibility:hidden;transition:.3s var(--ease);z-index:90}
.ow-nav.is-mega~.ow-scrim{opacity:1;visibility:visible}

/* mobile drawer: the mega groups become inline accordions */
.ow-nav__drawer{display:none;position:fixed;top:56px;left:0;width:100vw;height:calc(100dvh - 56px);
  background:#fff;overflow:auto;padding:20px;z-index:99}
.ow-nav.is-open .ow-nav__drawer{display:block}
.ow-dacc{border-bottom:1px solid var(--ow-hair)}
.ow-dacc__h{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:transparent;border:0;padding:16px 0;font-size:18px;font-weight:600;color:var(--ink);cursor:pointer}
.ow-dacc__b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.ow-dacc.is-on .ow-dacc__b{grid-template-rows:1fr}
.ow-dacc__b>div{overflow:hidden}
/* collapsed rows are 0fr tall but their links would still take focus */
.ow-dacc:not(.is-on) .ow-dacc__b>div{visibility:hidden}
.ow-dacc__b a{display:block;padding:10px 0 10px 14px;font-size:16px;color:var(--grey)}
.ow-dacc__k{margin:14px 0 2px 14px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ow-mut,#8a8a8f)}
.ow-dacc__b>div>.ow-dacc__k:first-child{margin-top:4px}
a.ow-dacc__h{text-decoration:none}
.ow-nav__drawer .ow-btn{width:100%;margin-top:20px}
.ow-nav__drawer .ow-btn+.ow-btn{margin-top:8px}

@media (max-width:1180px){
  .ow-nav__in{height:56px;padding:0 20px}
  .ow-nav__menu,.ow-mega,.ow-scrim{display:none}
  .ow-nav__ham{display:flex}
  .ow-nav__right{gap:10px}
}

/* ---------- 1. hero ----------
   Cinematic: the kitchen footage runs full bleed under a heavy scrim, with the
   whole composition centred on top of it — trust line, the two-tone headline
   whose rotating tail names the four outputs, and the capture. The nav is
   sticky and solid, so the footage starts under it. */
.ow-hero{--ow-fade:9rem;position:relative;min-height:min(calc(100svh - var(--ow-nav)),52rem);display:flex;align-items:center;
  justify-content:center;text-align:center;color:#fff;background:var(--ink);overflow:hidden;
  padding:5rem 0 var(--ow-fade)}
.ow-hero__bg{position:absolute;inset:0;z-index:0}
.ow-hero__bg video,.ow-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.ow-hero__bg video::-webkit-media-controls,.ow-hero__bg video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* two scrims: a flat one that takes the footage down far enough for white type
   to sit on it anywhere, and a vertical one that hands off to the next section */
.ow-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* a fixed band at the foot of the frame that takes the footage up to white,
       so the video dissolves into the page instead of ending on a hard edge.
       Sized rather than percentage-based: the hero's height changes with the
       viewport, and a percentage would climb into the copy on a short screen.
       The hero's bottom padding is kept >= --ow-fade so this band stays empty. */
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 18%,
                    rgba(255,255,255,.30) 34%,rgba(255,255,255,.52) 50%,
                    rgba(255,255,255,.72) 65%,rgba(255,255,255,.88) 79%,
                    rgba(255,255,255,.97) 91%,#fff 100%),
    /* the dark layer the type sits on */
    linear-gradient(180deg,rgba(13,13,15,.8) 0%,rgba(13,13,15,.66) 38%,rgba(13,13,15,.78) 100%);
  background-size:100% var(--ow-fade), 100% 100%;
  background-position:bottom, top;
  background-repeat:no-repeat}
.ow-hero__in{position:relative;z-index:2;width:100%;max-width:var(--ow-max);margin:0 auto;
  padding:0 var(--ow-pad);display:flex;flex-direction:column;align-items:center;gap:2rem}
.ow-hero__in>*{max-width:100%}
/* tablets: the hero is as tall as its content (after the base rule, so it applies) */
@media (max-width:991px){
  .ow-hero{--ow-fade:6rem;min-height:auto;padding:64px 0 var(--ow-fade)}
  .ow-hero__in{gap:20px}
}
.ow-hero__h1{max-width:20ch}
.ow-hero .ow-h1 .lead{color:rgba(255,255,255,.9)}
/* the roll: each phrase is stacked in one grid cell and slides on the y axis */
/* clipped to its own line, so a phrase on its way in or out never shows over the capture below */
.ow-roll{display:inline-grid;vertical-align:top;text-align:center;overflow:hidden;padding:.12em 0;margin:-.12em 0}
.ow-roll__i{grid-area:1/1;display:block;white-space:nowrap}
.ow-roll__i[data-on="false"]{opacity:0;transform:translateY(-60%)}

/* the capture sits on the footage, so it is its own white surface */
.ow-hero__form{display:flex;align-items:center;gap:.5rem;width:100%;max-width:34rem;
  background:#fff;border-radius:1.25rem;padding:.5rem;box-shadow:0 18px 40px rgba(0,0,0,.34)}
.ow-hero__form input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:.75rem 1rem;
  font:inherit;font-size:1rem;color:var(--ink)}
.ow-hero__form input::placeholder{color:var(--ow-mut-2)}
/* the input drops its own outline, so the white capture carries the ring */
.ow-hero__form:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.ow-hero__alt{margin:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem .875rem;
  font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.78)}
.ow-hero__note{font-size:.875rem;color:rgba(255,255,255,.74);margin:0}
/* the booking is simulated here, exactly as it is in the chat widget */
.ow-hero__out{max-width:34rem;margin:0;padding:1rem 1.25rem;border-radius:1rem;
  background:#fff;color:var(--ink);
  font-size:1rem;line-height:1.4;display:none}
.ow-hero__out.is-on{display:block}
.ow-hero__out b{font-weight:700}

/* ---------- 2. outcome marquee ---------- */
/* flush against the hero: the footage has already faded to white by its own
   bottom edge, so there is nothing left to cover with a lip */
.ow-stories{position:relative;z-index:2;background:#fff;padding:4rem 0 5rem}
.ow-stories__head{max-width:var(--ow-max);margin:0 auto 2rem;padding:0 var(--ow-pad)}
.ow-stories__head p{margin:.75rem 0 0;max-width:52ch}
.ow-smarq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ow-smarq__track{display:flex;width:max-content;animation:ow-slide 96s linear infinite}
/* !important: js/owner.js marquees() writes an inline play-state for off-screen parking */
.ow-smarq:is(:hover,:focus-within) .ow-smarq__track,
.ow-smarq.is-paused .ow-smarq__track{animation-play-state:paused!important}
@keyframes ow-slide{to{transform:translateX(-50%)}}
.ow-scard{position:relative;width:22.25rem;height:30.1875rem;flex:none;margin-right:1rem;border-radius:var(--ow-card);
  overflow:hidden;background:#fff;color:var(--ink);padding:2rem;display:flex;flex-direction:column;
  justify-content:flex-end;isolation:isolate}
.ow-scard::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 70% at 20% 0%,rgba(255,9,17,.22) 0%,transparent 62%)}
/* Bright editorial photographs stay clear above a light copy scrim.
   Lazy-loaded images keep the ten frames from competing with the hero. */
.ow-scard__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.ow-scard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 32%,
             rgba(255,255,255,.86) 56%,rgba(255,255,255,.98) 76%,#fff 100%)}
.ow-scard>p{position:relative;z-index:2}
.ow-scard__was{font-size:1.125rem;line-height:1.35;color:inherit;margin:0 0 .875rem;max-width:18ch}
.ow-scard__now{font-size:2rem;line-height:1.1;letter-spacing:-.03em;font-weight:600;margin:0}
.ow-scard__k{display:block;margin-top:.75rem;font-size:.875rem;font-weight:600;color:var(--red-deep);
  letter-spacing:.06em;text-transform:uppercase}
.ow-scard--red{background:var(--red-deep);color:#fff}
.ow-scard--red::before{background:none}
.ow-scard--red::after{background:none}
.ow-scard--red .ow-scard__k{color:#fff}
@media (max-width:991px){
  .ow-stories{padding:48px 0 40px}
  .ow-scard{width:17rem;height:23rem;padding:20px}
  .ow-scard__now{font-size:1.5rem}
}

/* ---------- 3. capability tabs ----------
   The taxonomy anchor. Four tabs named for what the POS chain produces, each
   advancing on a timer with the progress bar running along the hairline. */
.ow-tabs__head{max-width:44rem;margin-bottom:4rem}
.ow-tabs__menu{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2.5rem}
.ow-tab{position:relative;background:transparent;border:0;cursor:pointer;text-align:left;
  padding:1rem 0;color:var(--ow-mut-2);font-size:1.375rem;font-weight:600;letter-spacing:-.03em;
  box-shadow:inset 0 -1px 0 var(--ow-hair);transition:color .3s var(--ease)}
.ow-tab.is-on,.ow-tab:hover{color:var(--ink)}
.ow-tab__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;pointer-events:none}
.ow-tabs__panels{position:relative;border-radius:var(--ow-card);background:var(--wash-2);overflow:hidden}
.ow-tpanel{display:none;padding:0 10%;min-height:40rem;align-items:center;gap:2.5rem}
.ow-tpanel.is-on{display:flex}
.ow-tpanel__txt{width:19.375rem;flex:none}
.ow-tpanel__k{display:block;font-size:1rem;font-weight:600;color:var(--red-deep);margin-bottom:1rem}
.ow-tpanel__txt p{margin:1rem 0 0;color:var(--ow-mut);font-size:1rem;line-height:1.4}
.ow-tpanel__vis{flex:1;min-width:0;display:grid;place-items:center}
.ow-tpanel__vis .card{width:100%;max-width:37.5rem}

/* The scroll scene's resting layout (docs/how-scene-plan.md §2, §5). Without
   motion, and below 900px, the section is the same four-tab carousel with one
   static exploded burger above the tabs. The pinned two-column scene, the
   layers, bins, crate and meter all live in css/motion.css under .rsm. */
.ow-how__grid{display:flex;flex-direction:column}
.ow-how__scene{order:-1;position:relative}
.ow-how__flat{display:block;width:auto;max-width:100%;height:22rem;margin:0 auto 2.5rem;object-fit:contain}
.ow-how__poster,.ow-burger,.ow-bins,.ow-crate,.ow-how__meter{display:none}
@media (max-width:991px){
  .ow-how__flat{height:16rem;margin-bottom:1.5rem}
}
@media (max-width:991px){
  .ow-tabs__head{margin-bottom:32px}
  .ow-tabs__menu{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:20px}
  .ow-tab{font-size:1rem;padding:12px 0}
  .ow-tpanel{flex-direction:column;padding:24px;min-height:0;align-items:flex-start;gap:20px}
  .ow-tpanel__txt{width:100%}
}

/* ---------- 4. integrations wall ---------- */
.ow-wall{position:relative;overflow:hidden}
.ow-wall__rings{position:absolute;left:50%;top:-18rem;width:80rem;height:80rem;transform:translateX(-50%);
  opacity:.16;pointer-events:none}
.ow-wall__rings circle{fill:none;stroke:#fff;stroke-width:1}
.ow-wall__head{position:relative;z-index:2;max-width:50rem;display:flex;flex-direction:column;gap:2.5rem;
  margin-bottom:var(--ow-head)}
.ow-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.ow-badge{display:grid;grid-template-columns:8.5rem minmax(0,1fr);align-items:center;gap:.75rem;background:rgba(255,255,255,.1);
  border-radius:1rem;padding:.75rem 1.5rem .75rem .75rem}
.ow-badge b{font-size:1.375rem;font-weight:600;letter-spacing:-.03em;color:#fff;white-space:nowrap}
.ow-badge>span{font-size:.875rem;color:var(--ow-lightmut);display:block;line-height:1.35}
.ow-wall .marquee--pos .marquee__set span{color:rgba(255,255,255,.48)}
.ow-wall .marquee--pos:hover .marquee__set span{color:#fff}
.ow-wall__cap{position:relative;z-index:2;margin:2.5rem 0 0;color:var(--ow-lightmut);max-width:56ch}
.ow-wall__sup{position:relative;z-index:2;margin-top:5rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.ow-wall__sup--first{margin:0 0 var(--ow-head)}
.ow-wall__k{position:relative;z-index:2;margin:0 0 1.5rem}
.ow-wall__sup h3{margin-bottom:1rem}
.ow-wall__sup p{color:var(--ow-lightmut);max-width:38ch;margin:0}
.ow-wall__names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem 1rem;
  -webkit-mask-image:linear-gradient(#000 22%,rgba(0,0,0,.4) 68%,transparent 100%);
  mask-image:linear-gradient(#000 22%,rgba(0,0,0,.4) 68%,transparent 100%)}
.ow-wall__names li{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:rgba(255,255,255,.84)}
@media (max-width:991px){
  .ow-wall__head{gap:20px}
  .ow-wall__sup{grid-template-columns:1fr;margin-top:40px;gap:20px}
  .ow-wall__sup--first{margin:0 0 40px}
  .ow-wall__names li{font-size:1.125rem}
}

/* ---------- 8. more: one link per page the homepage no longer repeats ---------- */
.ow-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 3rem}
.ow-links .ow-link{font-size:1.25rem}

/* ---------- integrations.html: the distributors ---------- */
/* the directory (js/distributors.js): without the script it is a plain,
   scrollable list of every name; with it, a search over cards */
.ow-dist{margin-top:var(--ow-head);scroll-margin-top:calc(var(--ow-nav) + 1.5rem)}
.ow-dist__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1rem}
.ow-dist__bar[hidden]{display:none}
.ow-dist__q{flex:1 1 20rem;max-width:30rem;min-width:0;border:1px solid var(--ow-hair);border-radius:var(--ow-btn);
  background:#fff;padding:.875rem 1rem;font:inherit;font-size:1rem;color:var(--ink)}
.ow-dist__q:focus{outline:3px solid var(--ink);outline-offset:2px}
.ow-dist__regions{display:flex;flex-wrap:wrap;gap:.5rem}
.ow-dist__regions button{border:1px solid var(--ow-hair);background:#fff;color:var(--ink);border-radius:999px;
  padding:.5rem .875rem;font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.ow-dist__regions button:hover{border-color:var(--ink)}
.ow-dist__regions button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ow-dist__count{margin:0 0 1rem;color:var(--ow-mut-2);min-height:1.5em}
.ow-dist__list{list-style:none;margin:0;padding:0}
.ow-dist:not(.is-on) .ow-dist__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));column-gap:2rem;
  max-height:30rem;overflow-y:auto;padding-right:.5rem}
.ow-dist:not(.is-on) .ow-dist__list li{padding:.25rem 0;font-size:.9375rem}
.ow-dist:not(.is-on) .ow-dist__list li span{color:var(--ow-mut-2);font-size:.8125rem}
.ow-dist.is-on .ow-dist__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.75rem}
.ow-dist__card:focus{outline:3px solid var(--ink);outline-offset:2px}
.ow-dist__card{display:flex;align-items:center;gap:.875rem;background:#fff;border-radius:1rem;padding:.75rem 1rem;min-height:4.5rem}
.ow-dist__logo{flex:none;width:2.75rem;height:2.75rem;border-radius:.75rem;background:var(--wash-2);overflow:hidden;
  display:grid;place-items:center;font-size:.875rem;font-weight:700;color:var(--ow-mut-2)}
.ow-dist__logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.ow-dist__txt{min-width:0;display:flex;flex-direction:column;gap:.125rem}
.ow-dist__txt b{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.ow-dist__txt span{font-size:.8125rem;color:var(--ow-mut-2)}
.ow-dist__api{font-style:normal;font-size:.75rem;font-weight:700;color:var(--red-aa)}
.ow-dist__more{display:flex;margin:1.5rem auto 0}
.ow-dist__more[hidden]{display:none}
.ow-dist__ask{margin:1.5rem 0 0;text-align:center;color:var(--ow-mut-2)}
.ow-dist__ask.is-lit{color:var(--ink);font-weight:600}
.ow-wall__find{margin-top:1.25rem;color:#fff}
@media (max-width:640px){
  .ow-dist__q{flex-basis:100%;max-width:none}
  .ow-dist.is-on .ow-dist__list{grid-template-columns:1fr}
}
.ow-sup__names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 2.25rem}
.ow-sup__names li{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--ow-mut)}
.ow-sup__more{margin:var(--ow-head) 0 0;text-align:center}
@media (max-width:991px){.ow-sup__names li{font-size:1.125rem}}

/* ---------- FAQ ---------- */
.ow-faq__head{text-align:center;margin-bottom:var(--ow-head)}
.ow-faq__list{max-width:65rem;margin:0 auto;display:grid;gap:.5rem}
.ow-qa{border-radius:var(--ow-card);background:var(--wash);overflow:hidden}
/* on a grey section the grey cards vanish: flip them to white */
.ow-sec--wash .ow-qa,.ow-sec--wash2 .ow-qa,.ow-sec--wash .ow-mcard,.ow-sec--wash2 .ow-mcard{background:#fff}
.ow-qa summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.75rem 2rem;cursor:pointer;list-style:none;font-size:1.375rem;font-weight:600;letter-spacing:-.03em}
.ow-qa summary::-webkit-details-marker{display:none}
.ow-qa__x{position:relative;width:1.25rem;height:1.25rem;flex:none}
.ow-qa__x::before,.ow-qa__x::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.ow-qa__x::after{transform:rotate(90deg)}
.ow-qa[open] .ow-qa__x::after{transform:rotate(0)}
.ow-qa__b{padding:0 2rem 1.75rem;color:var(--ow-mut);font-size:1rem;line-height:1.5;max-width:70ch}
.ow-qa__b p{margin:0}
@media (max-width:991px){
  .ow-qa summary{padding:18px 20px;font-size:1.0625rem}
  .ow-qa__b{padding:0 20px 18px}
}

/* ---------- the team ---------- */
.ow-team{text-align:center}
.ow-team__head{max-width:46rem;margin:0 auto}
.ow-team__head p{margin:1.5rem 0 0;color:rgba(255,255,255,.82);font-size:1.25rem;line-height:1.42}
.ow-team__foot{margin:2rem auto 0;max-width:44rem;color:rgba(255,255,255,.66);font-size:1rem}
@media (max-width:991px){
  .ow-team__head p{font-size:1rem;margin-top:16px}
  .ow-team__foot{margin-top:28px;font-size:.875rem}
}

/* ---------- 8. support and learning ---------- */
.ow-res__head{max-width:48rem;margin-bottom:var(--ow-head)}
.ow-res__head>.ow-body-l{max-width:43ch;margin:1.25rem 0 0}
.ow-res__eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red-deep);margin:0 0 1rem}
.ow-res__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.ow-res__feature{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;border-radius:var(--ow-card);background:#fff}
.ow-res__photo{min-height:25rem}
.ow-res__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ow-res__featureText{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:3rem}
.ow-res__featureText>p:not(.ow-res__eyebrow),.ow-res__card>p:not(.ow-res__eyebrow){font-size:1.125rem;line-height:1.5;color:var(--grey);margin:1.25rem 0 1.75rem;max-width:38ch}
.ow-res__featureText .ow-link{margin-top:.25rem}
.ow-res__card{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--ow-hair);border-radius:var(--ow-card);padding:2.5rem;background:#fff}
.ow-res__card .ow-link{margin-top:auto}
.ow-res__card .ow-res__eyebrow{min-height:1.75rem;display:flex;align-items:center}
.ow-rtag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--red-soft);color:var(--red-deep);padding:.35rem .7rem;border-radius:.5rem}
.ow-res__contact{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:2rem;align-items:center;margin-top:2.5rem;border-top:1px solid var(--ow-hair);padding-top:2rem}
.ow-res__contact p{margin:.375rem 0 0;color:var(--grey);font-size:1rem}
.ow-res__contact a{display:flex;flex-direction:column;gap:.375rem;align-items:flex-start}
.ow-res__contact a span{font-size:.875rem;color:var(--grey)}
.ow-res__contact a b{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.ow-res__contact a:hover b{color:var(--red-deep)}
.ow-res__grid a:focus-visible,.ow-res__contact a:focus-visible,.ow-foot a:focus-visible{outline:2px solid var(--red-deep);outline-offset:5px;border-radius:4px}
@media (max-width:991px){
  .ow-res__featureText{padding:28px}
  .ow-res__photo{min-height:22rem}
  .ow-res__card{padding:28px}
  .ow-res__contact{grid-template-columns:1fr 1fr;gap:24px}
  .ow-res__contact>div{grid-column:1/-1}
}
@media (max-width:600px){
  .ow-res__grid,.ow-res__feature{grid-template-columns:1fr}
  .ow-res__photo{min-height:0;aspect-ratio:4/3}
  .ow-res__featureText,.ow-res__card{padding:24px}
  .ow-res__contact{grid-template-columns:1fr;gap:20px}
}

/* ---------- 9. closing CTA ---------- */
.ow-cta{position:relative;overflow:hidden;margin-top:calc(-1 * var(--ow-lip));
  border-radius:var(--ow-lip) var(--ow-lip) 0 0;z-index:2;color:#fff;background:var(--ink)}
.ow-cta__bg{position:absolute;inset:0}
.ow-cta__bg img{width:100%;height:100%;object-fit:cover}
.ow-cta__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(13,13,15,.94) 0%,rgba(13,13,15,.78) 44%,rgba(13,13,15,.3) 100%)}
.ow-cta__in{position:relative;z-index:2;max-width:var(--ow-max);margin:0 auto;padding:5rem var(--ow-pad);
  display:flex;align-items:center;gap:2.5rem;min-height:37.25rem}
.ow-cta__head{max-width:35.625rem;display:flex;flex-direction:column;gap:1.5rem}
.ow-cta__head p{margin:0;color:var(--ow-lightmut);font-size:1.25rem;line-height:1.35}
.ow-cta__btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}
/* REV-04: where #book lands if the chat never loads */
.ow-cta__head .ow-cta__alt{font-size:1rem;scroll-margin-top:calc(var(--ow-nav) + 2rem)}
.ow-cta__alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:991px){.ow-cta__in{min-height:0;padding:56px 20px}}

/* ---------- footer ---------- */
.ow-foot{background:#fff;border-radius:var(--ow-lip) var(--ow-lip) 0 0;margin-top:calc(-1 * var(--ow-lip));
  position:relative;z-index:3;padding:5rem 0 1.5rem}
.ow-foot__wrap{max-width:var(--ow-max);margin:0 auto;padding:0 var(--ow-pad);
  display:flex;flex-direction:column;gap:5rem}
.ow-foot__top{display:flex;align-items:center;justify-content:space-between;gap:2.5rem}
.ow-foot__top img{height:1.75rem;width:auto}
.ow-foot__btns{display:flex;gap:.75rem}
.ow-foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ow-foot__grid--sec{grid-template-columns:repeat(4,minmax(0,1fr))}
.ow-foot__col h3{font-size:1rem;font-weight:600;color:var(--ow-mut-2);margin:0 0 1rem}
.ow-foot__col a{display:block;font-size:1rem;margin-bottom:1rem;color:var(--ink)}
.ow-foot__col a:hover{color:var(--red-deep)}
.ow-foot__label{display:block;font-size:.8125rem;color:var(--grey);margin-bottom:.25rem}
.ow-foot__col address{font-size:1rem;font-style:normal;line-height:1.6;color:var(--ink)}
.ow-foot__bot{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  font-size:.8125rem;color:var(--ow-mut-2);border-top:1px solid var(--ow-hair);padding-top:1.5rem}
.ow-foot__bot ul{display:flex;gap:1.25rem;flex-wrap:wrap}
@media (max-width:991px){
  .ow-foot__wrap{gap:40px}
  .ow-foot__top{flex-direction:column;align-items:flex-start;gap:20px}
  .ow-foot__btns{flex-wrap:wrap;width:100%}
  .ow-foot__btns .ow-btn{flex:1 1 auto;justify-content:center}
  .ow-foot__grid,.ow-foot__grid--sec{grid-template-columns:repeat(2,1fr);gap:24px 16px}
}

/* ---------- reveal + reduced motion ----------
   Same contract as the other two concepts: the finished state lives in CSS and
   JS animates from a hidden state, so a blocked CDN degrades to a readable
   page rather than an empty one. */
.ow-rv{opacity:1}
@media (prefers-reduced-motion:reduce){
  .ow-smarq__track{animation:none}
  .ow-smarq{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory}
  .ow-smarq .ow-scard{scroll-snap-align:start}
  .ow-scard--dup,.marquee__set[aria-hidden="true"]{display:none}
  .marquee--logos .marquee__set{flex-wrap:wrap;justify-content:center;width:100%}
  .marquee--logos .marquee__track{width:100%}
  .ow-roll__i[data-on="false"]{display:none}
  .ow-mega,.ow-tpanel,.ow-btn{transition:none}
}

/* ---------- corrections and small primitives ---------- */

/* the rotating tail needs a transition to animate against; the resting state
   in CSS still shows exactly one phrase if the script never runs */
.ow-roll__i{transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* app.js is not loaded on this page, so the second POS row reverses in CSS
   rather than being handed a direction by GSAP */
/* 48s was tuned for the old text marquee, whose set ran several thousand
   pixels wide. A set of 23 chips is about a third of that, so the same
   duration crawled at roughly 22px/s. These land both rows near 55px/s; the
   rows differ slightly in width, and letting the durations differ with them
   keeps the two travelling at the same apparent speed. */
.ow-wall .marquee__track{animation-duration:48s}
.ow-wall .marquee--logos:not(.marquee--rev) .marquee__track{animation-duration:37s}
.ow-wall .marquee--logos.marquee--rev .marquee__track{animation-duration:34s}
.ow-wall .marquee--rev .marquee__track{animation-direction:reverse}

/* measured at its natural width by the mega-panel morph, whatever the shell
   is currently sized to */
.ow-mega__p{width:max-content}

/* .hand is the red Caveat eyebrow from styles.css; inside the CTA the
   surrounding paragraph rule would otherwise win on specificity */
.ow-cta__head .hand{color:var(--red);margin:0}

/* skip link: hidden until it takes keyboard focus */
.ow-skip{position:fixed;left:1rem;top:-4rem;z-index:1000;background:var(--ink);color:#fff;
  padding:.75rem 1.25rem;border-radius:.75rem;font-weight:600;transition:top .15s}
.ow-skip:focus{top:1rem}
#main:focus{outline:none}

/* pause control for anything that moves on its own for more than 5s (WCAG 2.2.2) */
.ow-pause{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ow-hair);background:#fff;
  color:var(--ink);border-radius:999px;padding:.45rem .9rem;font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.ow-pause:hover{border-color:var(--ink)}
.ow-pause::before{content:"";width:.625rem;height:.75rem;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.ow-pause[aria-pressed="true"]::before{width:0;height:0;border:0;border-left:.625rem solid currentColor;
  border-top:.375rem solid transparent;border-bottom:.375rem solid transparent}
.ow-hero .ow-pause{position:absolute;left:1.25rem;bottom:1.25rem;z-index:3;background:var(--ink);
  color:#fff;border-color:rgba(255,255,255,.35)}
.ow-hero .ow-pause:hover{border-color:#fff}
.ow-stories__ctl{display:flex;justify-content:center;margin-top:1.25rem}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the marquee mask from styles.css assumes a light ground */
.ow-wall .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* ---------- phones ----------
   Below 992 the root snaps back to a real 16px, so the desktop composition
   stops scaling and the components have to reflow rather than shrink. The
   headline is the tricky one: its rotating phrases are nowrap on desktop to
   keep the roll on one line, which on a narrow screen would force the whole
   page wider than the viewport. */
@media (max-width:640px){
  .ow-h1{font-size:2.125rem}
  .ow-h2{font-size:1.75rem}
  .ow-h3{font-size:1.5rem}
  .ow-h4{font-size:1.25rem}
  .ow-body-l{font-size:1rem}

  .ow-nav__brand{flex:none}
  .ow-nav__in{gap:10px}
  /* the demo CTA and the language toggle both live in the drawer on a phone */
  .ow-nav__right .ow-btn{display:none}
  .ow-nav__right .lang{order:-1}
  .ow-nav__login{font-size:.875rem;padding:0;white-space:nowrap}

  .ow-hero{--ow-fade:5rem;min-height:auto;padding:48px 0 var(--ow-fade)}
  .ow-hero__h1{max-width:none}
  .ow-roll{display:grid}
  .ow-roll__i{white-space:normal}
  /* stacked, so neither the field nor the label has to be truncated */
  .ow-hero__form{flex-direction:column;align-items:stretch;gap:8px;border-radius:1rem;padding:8px}
  .ow-hero__form input{text-align:center;padding:10px}
  .ow-hero__form .ow-btn{width:100%}
  /* the subscribe button matches the demo button's full width (GEN-03) */
  .ow-hero__alt{flex-direction:column;width:100%;max-width:34rem}
  .ow-hero__alt .ow-btn{width:100%}
  .ow-hero__note{font-size:.8125rem}

  /* the app mocks carry four columns; shrink the type rather than clip a name */
  .tbl{font-size:12px;table-layout:auto}
  .tbl th,.tbl td{padding:9px 10px}
  .tbl th{font-size:10px;letter-spacing:.06em}
  .card__top{height:auto;padding:10px 12px;flex-wrap:wrap;gap:8px}
  .card__seg span{display:none}
  .recipe li,.orders li{font-size:12.5px;padding:10px 12px}
  /* two lines, as in the hero frame: label and tag, then name and quantity.
     styles.css names an .it area no row carries, so clear the areas outright */
  .orders li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:none;row-gap:4px;column-gap:10px}
  .orders li>.sup{grid-area:1/1}
  .orders li>.tagm{grid-area:1/2;justify-self:end}
  .orders li>span:not(.sup):not(.tagm){grid-area:2/1}
  .orders li>.qty{grid-area:2/2}
  .kpis{grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}
  .kpi{padding:9px 10px}
  .kpi b{font-size:16px}

  .tbl td:first-child,
  .ow-tpanel .recipe span{overflow:visible;text-overflow:clip;white-space:normal}

  .ow-scard{width:15rem;height:20rem}
  .ow-scard__now{font-size:1.25rem}
  .ow-scard__was{font-size:1rem}

  .ow-tabs__menu{grid-template-columns:1fr 1fr}
  .ow-tab{font-size:.9375rem}

  /* 80rem of decorative rings is absurd on a phone, even clipped */
  .ow-wall__rings{width:40rem;height:40rem;top:-8rem}

  .ow-badges{gap:8px}
  .ow-badge{padding:10px 14px 10px 10px;gap:10px}
  .ow-badge b{font-size:1.125rem}
  .ow-badges{grid-template-columns:1fr}
  .ow-badge{grid-template-columns:7rem minmax(0,1fr)}
  .ow-badge>span{font-size:.8125rem}
  .ow-wall__names{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ow-wall__cap{font-size:1rem}

  .ow-bcard{min-height:13rem}
    .ow-foot__grid,.ow-foot__grid--sec{grid-template-columns:1fr}
}



/* ---------- product hero ---------- */
.ow-phero{padding:5rem 0 4rem;background:#fff}
.ow-phero__wrap{display:flex;align-items:center;gap:2.5rem}
.ow-phero__l{width:48rem;flex:none;display:flex;flex-direction:column;gap:2.25rem}
/* the search phrase a page answers, above its headline: small, and pulled
   up against the h1 so the column's gap doesn't split them */
.ow-kicker{margin:0 0 -1.5rem;font-size:.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ow-mut)}
.ow-plans__head .ow-kicker{margin-bottom:-.75rem}

.ow-phero__sub{max-width:25rem;margin:0;color:var(--ow-mut)}
.ow-phero__btns{display:flex;gap:.5rem;flex-wrap:wrap}
.ow-phero__r{flex:1;min-width:0;display:grid;place-items:center}
/* the frame is a card inside a card: 10px of ground around a 24px inner radius */
.ow-phero__frame{width:100%;max-width:30rem;background:var(--wash);border-radius:1.875rem;padding:.625rem;min-width:0}
.ow-phero__frame .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{min-width:0}
.kpi span{overflow-wrap:break-word;hyphens:auto}
.ow-phero__frame .card{border-radius:1.5rem}
.ow-phero__frame .card__top{border-radius:1.5rem 1.5rem 0 0}
/* PRD-11 / INT-03: where the hero is a platform capture, the capture gets
   the room and the headline steps down a size */
@media (min-width:992px){
  .ow-phero--wide .ow-phero__l{width:min(38rem,44%)}
  .ow-phero--wide .ow-h1{font-size:4rem}
  .ow-phero--wide .ow-phero__frame{max-width:none}
}
@media (max-width:991px){
  .ow-phero{padding:32px 0 24px}
  .ow-phero__wrap{flex-direction:column;align-items:stretch;gap:28px}
  .ow-phero__l{width:100%;gap:20px}
  .ow-kicker{margin-bottom:-10px;font-size:.75rem}
  .ow-phero__sub{max-width:100%}
}

/* ---------- three benefits beside a square ---------- */
.ow-bens__head{max-width:36rem;margin:0 auto var(--ow-head);text-align:center}
.ow-bens__row{display:flex;align-items:center;gap:6.25rem}
.ow-bens__img{width:38rem;flex:none;aspect-ratio:1;border-radius:var(--ow-card);overflow:hidden;background:var(--wash-2)}
.ow-bens__img img{width:100%;height:100%;object-fit:cover}
.ow-bens__list{flex:1;min-width:0;display:flex;flex-direction:column;gap:4.25rem}
.ow-bens__list li{display:flex;gap:2rem;align-items:flex-start}
.ow-bens__n{width:3.125rem;height:3.125rem;flex:none;border-radius:.875rem;background:var(--red-soft);
  color:var(--red-deep);display:grid;place-items:center;font-size:1rem;font-weight:700;letter-spacing:.02em}
.ow-bens__t{display:block;font-size:1.125rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}
.ow-bens__d{margin:0;color:var(--ow-mut);font-size:1rem;line-height:1.42}
.ow-bens__d+.ow-bens__d{margin-top:.625rem}
h3.ow-bens__t{margin-top:0}
.ow-bens__list--long{gap:2.75rem}
@media (max-width:991px){
  .ow-bens__row{flex-direction:column;gap:28px;align-items:stretch}
  .ow-bens__img{width:100%}
  .ow-bens__list{gap:24px}
  .ow-bens__list li{gap:16px}
  .ow-bens__n{width:40px;height:40px}
}

/* ---------- feature bento ---------- */
.ow-fb__head{max-width:36rem;margin:0 auto var(--ow-head);text-align:center}
.ow-fb__list{display:flex;flex-wrap:wrap;gap:1rem}
.ow-fb__hero{flex:1 1 100%;display:flex;align-items:stretch;background:#fff;border-radius:var(--ow-card);
  overflow:hidden;min-height:32rem}
.ow-fb__hero--flip{flex-direction:row-reverse}
.ow-fb__heroTxt{width:50%;flex:none;display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem 2rem 6rem;gap:.75rem}
.ow-fb__heroMedia{width:50%;flex:none;position:relative;overflow:hidden;background:var(--wash-2);
  display:grid;place-items:center;padding:2rem}
.ow-fb__heroMedia img{width:100%;height:auto;border-radius:1rem;box-shadow:0 30px 60px -42px rgba(13,13,15,.5)}
.ow-fb__heroMedia>.card{width:100%;box-shadow:0 30px 60px -42px rgba(13,13,15,.5)}
/* product cutouts: no frame, a drop shadow that follows the device, and the
   UI card tucked over its base so photo and screen read as one object */
.ow-fb__heroMedia--device{display:flex;flex-direction:column;align-items:center;justify-content:center}
.ow-fb__heroMedia .ow-fb__device,.ow-fb__halfMedia .ow-fb__device{width:auto;max-width:78%;max-height:16rem;
  border-radius:0;box-shadow:none;filter:drop-shadow(0 28px 30px rgba(13,13,15,.28))}
.ow-fb__heroMedia--device>.card{margin-top:-1rem;position:relative;z-index:1}
.ow-fb__halfMedia{margin-top:auto;background:var(--wash-2);display:grid;place-items:center;padding:1.5rem}
.ow-fb__halfMedia .ow-fb__device{max-height:12rem}
.ow-fb__k{font-size:1rem;color:var(--ow-mut);margin:0}
.ow-fb__h{font-size:3rem;line-height:1.02;letter-spacing:-.03em;font-weight:400;margin:0;max-width:15ch}
.ow-fb__half{flex:1 1 calc(50% - .5rem);min-width:0;background:#fff;border-radius:var(--ow-card);
  overflow:hidden;display:flex;flex-direction:column;min-height:13rem}
.ow-fb__halfTxt{padding:2rem 1.75rem;display:flex;flex-direction:column;gap:.75rem}
.ow-fb__halfTxt b{font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1.2;max-width:26ch;text-wrap:balance}
.ow-fb__halfTxt span{color:var(--ow-mut);font-size:1rem;line-height:1.45;max-width:46ch;text-wrap:pretty}
/* the strip bleeds to the card edge rather than sitting inset */
.ow-fb__strip{margin-top:auto;padding:0 1.75rem}
.ow-fb__strip .card{border-radius:1rem 1rem 0 0;box-shadow:none;border-bottom:0}
@media (max-width:991px){
  .ow-fb__hero,.ow-fb__hero--flip{flex-direction:column;min-height:0}
  .ow-fb__heroTxt,.ow-fb__heroMedia{width:100%;padding:20px}
  .ow-fb__heroTxt{padding-bottom:28px}
  .ow-fb__h{font-size:1.75rem}
  .ow-fb__half{flex-basis:100%}
  .ow-fb__halfTxt{padding:20px}
  .ow-fb__heroMedia .ow-fb__device{max-height:13rem}
  .ow-fb__heroMedia--device>.card{margin-top:-.75rem}
}

/* ---------- short objection FAQ ---------- */
.ow-pfaq__head{max-width:36rem;margin:0 auto var(--ow-head);text-align:center}


.ow-more__head{max-width:36rem;margin:0 auto var(--ow-head);text-align:center}
.ow-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ow-mcard{background:var(--wash);border-radius:var(--ow-card);padding:1.75rem;display:flex;
  flex-direction:column;gap:.5rem;transition:background .25s var(--ease),transform .25s var(--ease)}
.ow-mcard:hover{background:var(--wash-2);transform:translateY(-3px)}
.ow-mcard b{font-size:1.25rem;font-weight:600;letter-spacing:-.03em;display:flex;align-items:center;gap:.4em}
.ow-mcard span{color:var(--ow-mut);font-size:1rem;line-height:1.35}
.ow-mcard:hover .arw{transform:translateX(3px)}
@media (max-width:991px){.ow-more__grid{grid-template-columns:1fr;gap:10px}}

/* ---------- dark closing band ---------- */
.ow-dcta{background:var(--ink);color:#fff;text-align:center;
  margin-top:calc(-1 * var(--ow-lip));border-radius:var(--ow-lip) var(--ow-lip) 0 0;
  position:relative;z-index:2;padding:8rem 0}
.ow-dcta h2{max-width:24ch;margin:0 auto}
.ow-dcta--404{min-height:calc(100dvh - 5rem);display:flex;align-items:center;padding-top:8rem}
.ow-dcta--404 h1{max-width:24ch;margin:0 auto}
.ow-dcta__k{margin:0 auto 1rem!important;font-size:1rem!important;font-weight:600;letter-spacing:.08em;color:var(--red)!important}
.ow-dcta p{margin:1.5rem auto 0;max-width:52ch;color:var(--ow-lightmut);font-size:1.25rem;line-height:1.35}
.ow-dcta__btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}
@media (max-width:991px){.ow-dcta{padding:56px 0}.ow-dcta p{font-size:1rem;margin-top:16px}}

/* ---------- card mock inside the hero frame ----------
   The .card component in css/styles.css was authored for a full-width panel:
   .orders reserves 96px + 40px + 130px of fixed columns, which leaves the name
   about 60px inside the 424px hero frame, so every row wrapped to two and a
   half lines. Rather than change the shared component and disturb the wide
   contexts it already serves, re-flow it only in here.

   .orders becomes two lines — label and tag on the first, name and quantity on
   the second — which is what the data actually wants at this width. */
.ow-phero__frame .card__top{height:auto;min-height:0;padding:.75rem 1rem;gap:.625rem;flex-wrap:wrap}
.ow-phero__frame .card__title{font-size:.875rem}
.ow-phero__frame .card__meta{font-size:.6875rem;margin-left:auto}

.ow-phero__frame .orders li{grid-template-columns:1fr auto;align-items:center;
  row-gap:.25rem;column-gap:.75rem;padding:.75rem 1rem}
.ow-phero__frame .orders li>.sup{grid-area:1/1}
.ow-phero__frame .orders li>.tagm{grid-area:1/2;justify-self:end}
.ow-phero__frame .orders li>span:not(.sup):not(.tagm){grid-area:2/1}
.ow-phero__frame .orders li>.qty{grid-area:2/2;text-align:right}

.ow-phero__frame .recipe li{grid-template-columns:minmax(0,1fr) minmax(3.5rem,max-content) 3.75rem;gap:.5rem;
  padding:.625rem 1rem;font-size:.84375rem}

.ow-phero__frame .tbl{font-size:.8125rem}
.ow-phero__frame .tbl th{font-size:.59375rem;letter-spacing:.06em;padding:.75rem 1rem .375rem}
.ow-phero__frame .tbl td{padding:.5rem 1rem}

.ow-phero__frame .kpis{gap:.5rem;padding:.875rem .875rem .25rem}
.ow-phero__frame .kpi{padding:.625rem .6875rem}
.ow-phero__frame .kpi span{font-size:.59375rem;letter-spacing:.05em}
.ow-phero__frame .kpi b{font-size:1.125rem}

.ow-phero__frame .alrg{padding:.75rem 1rem 1rem}


.ow-fb__third{flex:1 1 calc(33.333% - .667rem);min-width:0;background:#fff;
  border-radius:var(--ow-card);overflow:hidden;display:flex;flex-direction:column;min-height:13rem}
@media (max-width:991px){.ow-fb__third{flex-basis:100%}}

/* ---------- POS logo wall ----------
   The brand marks are mixed: most are transparent coloured icons, but a few
   (Givex, MYR) ship as solid dark tiles. A single white filter would flatten
   the icons and invert the tiles into white blocks, so each mark sits on a
   light chip instead — it carries both kinds, keeps the brands in their own
   colours, and reads as a wall rather than a row of loose glyphs. */
.marquee--logos .marquee__set{align-items:center;
  gap:clamp(14px,1.6vw,22px);padding-right:clamp(14px,1.6vw,22px)}
.marquee--logos+.marquee--logos{margin-top:clamp(10px,1.2vw,16px)}
.poslogo{flex:none;width:clamp(50px,4.8vw,66px);height:clamp(50px,4.8vw,66px);
  border-radius:clamp(12px,1.2vw,16px);background:rgba(255,255,255,.92);
  padding:clamp(5px,.6vw,8px);object-fit:contain;
  opacity:.82;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.marquee--logos:hover .poslogo{opacity:1}
.poslogo:hover{transform:translateY(-3px)}

/* ---------- keep the wall running ----------
   .marquee:hover pauses the track. That is right for the complaint cards,
   which are links a reader may want to stop and read, but wrong for a wall of
   logos: the cursor crosses it on the way to anything below and the whole row
   stops dead, which reads as a stutter rather than a pause. */
.marquee--logos:hover .marquee__track{animation-play-state:running}

/* ---------- logo wall motion ----------
   The shared .marquee animates translateX(-50%), which only lands on a seam if
   the track is exactly two sets wide — so both sets are in the markup and the
   percentage never changes under the animation.

   The reverse row gets its own keyframe rather than animation-direction:
   reverse. Reversing starts playback at the final frame, which parks the row
   at -50% before the second set exists, leaving it stranded mid-content on
   first paint. Running -50% -> 0 starts on the second set's first mark, which
   is the same image as the first set's, so the loop is seamless from frame one.

   Promoting the track keeps the wall off the main thread: without it the mask
   on the parent forces a repaint of all 46 chips every frame. */
.marquee--logos .marquee__track{
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden}
.ow-wall .marquee--logos.marquee--rev .marquee__track{
  animation-direction:normal;
  animation-name:slide-logos-rev}
@keyframes slide-logos-rev{
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}}
.marquee--logos:not(.marquee--rev) .marquee__track{animation-name:slide-logos}
@keyframes slide-logos{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}}
/* the wall paints independently of the rings and copy behind it */
.marquee--logos{contain:paint}
/* a per-chip transform on hover invalidates the animating layer every frame it
   changes; opacity alone is composited and costs nothing */
.poslogo:hover{transform:none}

/* ---------- pricing ----------
   The price card is one piece of markup, shared by the homepage #pricing
   section and pricing.html. Ink on the washed section, so it is the one dark
   object on the page; the red is spent only on the ticks and the button. */
.ow-plans__head{max-width:46rem;margin:0 auto var(--ow-head);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.ow-plans__head .ow-body-l{max-width:36rem;margin:0}
.ow-plans{display:grid;grid-template-columns:repeat(2,minmax(0,30rem));justify-content:center;gap:1.25rem;align-items:stretch}
/* pricing.html: the intro follows the cards, so the price is the first thing under the title */
.ow-plans__foot{max-width:46rem;margin:var(--ow-head) auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.ow-plans__foot .ow-body-l{max-width:36rem;margin:0}
.ow-phero--plans{padding:5rem 0 6rem}
.ow-price{background:var(--ink);color:#fff;border-radius:var(--ow-card);padding:2.5rem;width:100%;max-width:30rem;
  display:flex;flex-direction:column;gap:1.5rem;text-align:left}
.ow-price__k{margin:0;font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ow-lightmut)}
.ow-price__amt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem .875rem}
.ow-price__n{white-space:nowrap}
.ow-price__n{font-size:4.5rem;line-height:.85;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.ow-price__per{font-size:1rem;line-height:1.2;color:var(--ow-lightmut);padding-bottom:.125rem}
.ow-price__fine{margin:-.75rem 0 0;font-size:.875rem;color:rgba(255,255,255,.56)}
.ow-price__list{list-style:none;margin:0;padding:1.5rem 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:.75rem}
.ow-price__list li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem;line-height:1.35}
.ow-price__list li::before{content:"";flex:none;width:1.125rem;height:1.125rem;margin-top:.0625rem;border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.75rem no-repeat}
.ow-price__extra{margin:0;padding:1rem 1.25rem;border-radius:1rem;background:rgba(255,255,255,.07);
  font-size:.9375rem;line-height:1.4;color:var(--ow-lightmut)}
.ow-price__extra b{display:block;margin-bottom:.25rem;color:#fff;font-weight:600}
.ow-price .ow-btn{width:100%;margin-top:auto}
.ow-price__btns{margin-top:auto;display:flex;flex-direction:column;gap:.5rem}
.ow-price__btns .ow-btn{margin-top:0}
/* Enterprise: the same card in white, so the priced plan stays the one dark
   object; no number, and its button is ink rather than red */
.ow-price--ent{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ow-hair)}
.ow-price--ent .ow-price__k,.ow-price--ent .ow-price__per{color:var(--ow-mut)}
.ow-price--ent .ow-price__fine{color:var(--ow-mut-2)}
.ow-price--ent .ow-price__list{border-top-color:var(--ow-hair)}
.ow-price--ent .ow-price__list li::before{background-color:var(--ink)}
.ow-price--ent .ow-price__extra{background:var(--wash);color:var(--ow-mut)}
.ow-price--ent .ow-price__extra b{color:var(--ink)}

/* what's included: the mega menu's four groups as white cards on the wash */
.ow-inc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.ow-inc__g{background:#fff;border-radius:var(--ow-card);padding:1.75rem;display:flex;flex-direction:column;gap:.625rem}
.ow-inc__g h3{margin-bottom:.5rem}
.ow-inc__g a{color:var(--ink);text-decoration:none;font-size:1rem;display:flex;gap:.6rem;align-items:center}
.ow-inc__g a::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--red);flex:none}
.ow-inc__g a:hover{color:var(--red)}
.ow-inc__plus{text-align:center;margin:2rem auto 0}
.ow-mcard--static:hover{background:var(--wash);transform:none}

@media (max-width:991px){
  .ow-plans{grid-template-columns:minmax(0,1fr)}
  .ow-price{padding:1.75rem}
  .ow-price__n{font-size:3.25rem}
  .ow-price--ent .ow-price__n{font-size:2.75rem}
  .ow-inc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.ow-inc{grid-template-columns:1fr}}

/* figures never break inside a table cell: "−$212" on one line */
.tbl td:not(:first-child){white-space:nowrap}
.ow-sec--ink .pos__sub{color:var(--ow-lightmut);font-size:1.125rem;margin-top:2rem}
.ow-sec--ink .pos__guides{margin-top:.75rem}
.pos__guides a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.pos__guides a:hover{color:#fff}

/* ---------- legal pages (privacy.html, terms.html) ----------
   Both languages are in the markup; <html lang> picks one. i18n.js sets it
   to fr-CA or en, and with no script the page stays English. */
html:not([lang^="fr"]) [data-lang-only="fr"],
html[lang^="fr"] [data-lang-only="en"]{display:none !important}
.ow-legal__hero{padding-bottom:7rem}
.ow-legal__hero .ow-h1{font-size:4rem}
.ow-legal__date{margin:1.25rem 0 1.5rem;font-size:.9375rem;font-weight:600;color:var(--ow-mut-2)}
.ow-legal__lede{max-width:44rem;margin:0;line-height:1.45}
.ow-legal{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:4rem;align-items:start}
.ow-legal__toc{position:sticky;top:6.5rem;display:flex;flex-direction:column;gap:1.5rem}
.ow-legal__toc ol{display:flex;flex-direction:column;gap:.125rem;counter-reset:toc}
.ow-legal__toc li{counter-increment:toc}
.ow-legal__toc li a{display:flex;gap:.625rem;padding:.375rem 0;font-size:.9375rem;line-height:1.3;color:var(--ow-mut)}
.ow-legal__toc li a::before{content:counter(toc);min-width:1.25rem;color:var(--ow-mut-2);font-variant-numeric:tabular-nums}
.ow-legal__toc li a:hover{color:var(--red)}
.ow-legal__body{background:#fff;border-radius:var(--ow-card);padding:3rem 3.5rem;max-width:52rem}
.ow-legal__s{scroll-margin-top:6.5rem;padding:2.25rem 0;border-top:1px solid var(--ow-hair)}
.ow-legal__s:first-child{padding-top:0;border-top:0}
.ow-legal__s:last-child{padding-bottom:0}
.ow-legal__h{font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:0 0 1rem}
.ow-legal__body p,.ow-legal__body li{font-size:1.0625rem;line-height:1.6;color:var(--ink-2)}
.ow-legal__body p:last-child{margin-bottom:0}
.ow-legal__body ul{margin:0 0 1em;display:flex;flex-direction:column;gap:.5rem}
.ow-legal__body ul li{position:relative;padding-left:1.25rem}
.ow-legal__body ul li::before{content:"";position:absolute;left:0;top:.7em;width:.375rem;height:.375rem;border-radius:50%;background:var(--red)}
.ow-legal__body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.15em}
.ow-legal__body a:hover{color:var(--red)}
.ow-legal__body b{font-weight:600;color:var(--ink)}
.ow-legal__body code{font-size:.875em;background:var(--wash);padding:.125em .375em;border-radius:.375rem}
.ow-legal__tbl{display:block;overflow-x:auto;width:100%;border-collapse:collapse;margin:0 0 1em;font-size:.9375rem}
.ow-legal__tbl th,.ow-legal__tbl td{text-align:left;vertical-align:top;padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--ow-hair)}
.ow-legal__tbl th{font-weight:600;color:var(--ow-mut);white-space:nowrap}
@media (max-width:991px){
  .ow-legal__hero{padding-bottom:64px}
  .ow-legal__hero .ow-h1{font-size:2.5rem}
  .ow-legal{grid-template-columns:minmax(0,1fr);gap:24px}
  .ow-legal__toc{position:static;background:#fff;border-radius:20px;padding:20px 24px}
  .ow-legal__body{padding:28px 22px;border-radius:20px}
  .ow-legal__h{font-size:1.25rem}
  .ow-legal__body p,.ow-legal__body li{font-size:1rem}
}

/* ---------- what's new (whats-new.html) ----------
   One white card per release on the wash: version and date on the left,
   the New / Improved / Fixed groups on the right. Bullets are the same red
   dot as the pricing page's included list. */
.ow-rel{max-width:62rem;margin:0 auto;display:flex;flex-direction:column;gap:1.25rem}
.ow-rel__i{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:2.5rem;background:#fff;
  border-radius:var(--ow-card);padding:2.5rem;scroll-margin-top:6rem}
.ow-rel__meta{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.ow-rel__meta p{margin:0}
.ow-rel__latest{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--red-aa);padding:.3rem .65rem;border-radius:999px;margin-bottom:.25rem}
.ow-rel__body{display:flex;flex-direction:column;gap:1.75rem}
.ow-rel__g{display:flex;flex-direction:column;align-items:flex-start;gap:.875rem}
.ow-rel__tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:.5rem}
.ow-rel__tag--new{background:var(--red-soft);color:var(--red-deep)}
.ow-rel__tag--imp{background:var(--wash);color:var(--ink)}
.ow-rel__tag--fix{background:transparent;color:var(--ow-mut);box-shadow:inset 0 0 0 1px var(--ow-hair)}
.ow-rel__g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem}
.ow-rel__g li{display:flex;gap:.75rem;font-size:1.0625rem;line-height:1.4}
.ow-rel__g li::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--red);
  flex:none;margin-top:.6em}
.ow-rel__more{text-align:center;margin:3rem auto 0}
.ow-rel__cta{text-align:center;margin-top:.75rem}
@media (max-width:991px){
  .ow-rel__i{grid-template-columns:1fr;gap:1.25rem;padding:1.75rem}
  .ow-rel__meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.75rem}
  .ow-rel__latest{margin-bottom:0}
  .ow-rel__g li{font-size:1rem}
}

/* ---------- comparison pages (restock-vs-*.html, alternatives.html) ----------
   Generated by tools/site/build.mjs. The table sits on the wash, so it is
   white; the RESTOCK column is the one in ink. On a phone it scrolls
   sideways inside its own box rather than squeezing three columns. */
.ow-cmp__scroll{overflow-x:auto;border-radius:var(--ow-card);background:#fff;-webkit-overflow-scrolling:touch}
.ow-cmp{width:100%;min-width:40rem;border-collapse:collapse;font-size:1rem;line-height:1.45;text-align:left}
.ow-cmp th,.ow-cmp td{padding:1.1rem 1.5rem;vertical-align:top;border-top:1px solid var(--line)}
.ow-cmp thead th{border-top:0;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ow-mut)}
.ow-cmp thead th:nth-child(2){color:var(--ink)}
.ow-cmp tbody th{width:22%;font-weight:600;color:var(--ow-mut)}
.ow-cmp td:nth-child(2){width:36%;font-weight:600;color:var(--ink)}
.ow-cmp sup{margin-left:.2em;font-size:.7em}
.ow-cmp__fn{color:var(--red-deep);text-decoration:none;margin-left:.15em}
.ow-cmp__fn:hover{text-decoration:underline}
.ow-cmp__note{margin:1.25rem 0 0;font-size:.875rem;line-height:1.55;max-width:60rem}
.ow-cmp__sources{margin-top:3rem}
.ow-cmp__sources ol{margin:1rem 0 0;padding-left:1.5rem;font-size:.875rem;line-height:1.7;color:var(--ow-mut);overflow-wrap:anywhere}
.ow-cmp__sources a{color:inherit}
.ow-cmp__sources li:target{color:var(--ink);font-weight:600}
.ow-cmp__hub{margin-top:1rem;text-align:left}
.ow-pos-logo{width:5rem;height:5rem;border-radius:1.25rem;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(13,13,15,.08);background:#fff;margin-bottom:-.5rem}
.ow-pos-others a{color:var(--ink)}
.ow-cmp__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.75rem}
/* on a phone each row stacks: its label across the top, then the two
   answers side by side, each named (data-label) since the header is hidden */
@media (max-width:640px){
  .ow-cmp{min-width:0;font-size:.875rem}
  .ow-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ow-cmp tbody tr{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem;padding:1rem;border-top:1px solid var(--line)}
  .ow-cmp tbody tr:first-child{border-top:0}
  .ow-cmp tbody th,.ow-cmp td{width:auto;padding:0;border:0}
  .ow-cmp tbody th{grid-column:1/-1;margin-bottom:.5rem;color:var(--ink)}
  .ow-cmp td::before{content:attr(data-label);display:block;margin-bottom:.2rem;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ow-mut)}
}

/* ---------- free tools (food-cost-calculator.html, recipe-costing-template.html) ----------
   Generated by tools/site/build.mjs; the arithmetic is js/tools.js. A white
   card on the wash: fields, then the results in ink. */
.ow-more__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ow-tool{background:#fff;border-radius:var(--ow-card);padding:2rem;display:grid;gap:1.75rem}
.ow-tool__fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.25rem}
.ow-tool__f{display:flex;flex-direction:column;gap:.4rem;font-size:.9375rem;font-weight:600}
.ow-tool__f--wide{grid-column:1/-1}
.ow-tool__f small{font-size:.8125rem;font-weight:400;color:var(--ow-mut)}
.ow-tool__in{position:relative;display:flex}
.ow-tool input,.ow-tool textarea{width:100%;font:inherit;font-weight:400;color:var(--ink);background:var(--wash);border:1px solid var(--line);border-radius:var(--r-md);padding:.75rem 1rem}
.ow-tool__in i{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ow-mut);pointer-events:none}
.ow-tool__in input{padding-right:2.25rem}
.ow-tool input:focus-visible,.ow-tool textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;background:#fff}
.ow-tool textarea{resize:vertical;min-height:6rem}
.ow-tool__outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:1.5rem}
.ow-tool__o{display:flex;flex-direction:column;gap:.35rem}
.ow-tool__o span{font-size:.8125rem;color:var(--ow-lightmut)}
.ow-tool__o output{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ow-tool__formula{margin:0;font-size:.875rem;line-height:1.55}
.ow-tool__scroll{overflow-x:auto}
.ow-tool__table{width:100%;min-width:44rem;border-collapse:collapse}
.ow-tool__table th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ow-mut);padding:0 .5rem .5rem}
.ow-tool__table td{padding:.3rem .5rem;vertical-align:middle}
.ow-tool__table td:first-child{width:30%}
.ow-tool__table output{display:block;min-width:6rem;font-weight:600;font-variant-numeric:tabular-nums}
.ow-tool__x{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--ow-mut);cursor:pointer;padding:.25rem .5rem;border-radius:var(--r-md)}
.ow-tool__x:hover{color:var(--red-deep);background:var(--wash)}
.ow-tool__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem}
.ow-tool__bar-r{display:flex;flex-wrap:wrap;gap:.75rem}
.ow-tool__btn.ow-btn--glass{background:#fff;color:var(--ink);border:1px solid var(--line)}
.ow-tool__btn.ow-btn--glass:hover{background:var(--wash)}
@media (max-width:991px){
  .ow-more__grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ow-more__grid--4{grid-template-columns:1fr}
  .ow-tool{padding:1.25rem}
  .ow-tool__o output{font-size:1.375rem}
}

/* the glossary: one definition per row, the other language's term beside
   the headword */
.ow-gl{margin:0;display:grid;gap:.75rem}
.ow-gl__i{background:#fff;border-radius:var(--r-lg);padding:1.25rem 1.5rem;scroll-margin-top:calc(var(--ow-nav) + 1rem)}
.ow-gl__i:target{outline:2px solid var(--ink)}
.ow-gl dt{font-size:1.125rem;font-weight:700;letter-spacing:-.02em}
.ow-gl__a{color:inherit;text-decoration:none}
.ow-gl__a:hover{text-decoration:underline}
.ow-gl__o{font-weight:400;font-size:.9375rem;color:var(--ow-mut);margin-left:.4rem}
.ow-gl dd{margin:.4rem 0 0;line-height:1.55;color:var(--ow-mut)}
.ow-gl dd a{color:var(--ink);white-space:nowrap}

/* printing the recipe template gives the sheet alone, for the line */
@media print{
  body:has(.ow-tool--sheet) :is(.ow-nav,.ow-foot,.chat,.ow-cmp-hero,#faq,.ow-dcta,.ow-tool__bar,.ow-tool__x,.ow-skip){display:none!important}
  .ow-tool--sheet{padding:0}
  .ow-tool--sheet input,.ow-tool--sheet textarea{border:0;background:none;padding:.25rem 0}
  .ow-tool--sheet .ow-tool__outs{background:none;color:#000;border:1px solid #000}
  .ow-tool--sheet .ow-tool__o span{color:#000}
  .ow-tool--sheet .ow-tool__table{min-width:0}
}

/* ---------- the all-in-one comparison table (alternatives.html) ----------
   RESTOCK's column is tinted and first after the feature names; the feature
   column stays put while the table scrolls sideways on narrow screens. */
.ow-mx__scroll{overflow-x:auto;border-radius:var(--ow-card);background:#fff;-webkit-overflow-scrolling:touch}
.ow-mx__scroll:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ow-mx{width:100%;min-width:60rem;border-collapse:separate;border-spacing:0;font-size:.9375rem;line-height:1.35;text-align:center}
.ow-mx th,.ow-mx td{padding:.9rem .75rem;border-top:1px solid var(--line);vertical-align:middle}
.ow-mx thead th{border-top:0;font-size:.8125rem;font-weight:700;letter-spacing:.02em;padding-top:1.25rem;padding-bottom:1.1rem}
.ow-mx thead a{color:var(--ink);text-decoration:none}
.ow-mx thead a:hover{text-decoration:underline}
/* both the feature names and RESTOCK stay put: every competitor scrolls past them */
.ow-mx{--mx-first:13rem;--mx-us:9.5rem}
.ow-mx tbody th,.ow-mx thead th:first-child{position:sticky;left:0;z-index:2;background:#fff;text-align:left;font-weight:600;width:var(--mx-first);min-width:var(--mx-first);max-width:var(--mx-first)}
.ow-mx .is-us{position:sticky;left:var(--mx-first);z-index:1;width:var(--mx-us);min-width:var(--mx-us);box-shadow:6px 0 8px -6px rgba(13,13,15,.18)}
.ow-mx .is-us{background:var(--red-soft);font-weight:700;color:var(--ink)}
.ow-mx thead .is-us{color:var(--red-deep);font-size:.9375rem;letter-spacing:.04em;border-radius:1rem 1rem 0 0}
.ow-mx td{color:var(--ow-mut);font-size:.875rem}
.ow-mx__y{color:var(--ok);font-size:1.25rem;font-weight:700}
.ow-mx .is-us .ow-mx__y{color:var(--red-deep)}
.ow-mx__n{color:var(--ow-mut-lead);font-size:1.125rem}
.ow-mx__g th{background:var(--wash)!important;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ow-mut)!important;padding:.6rem .75rem}
.ow-mx__cta{margin-top:1.75rem;justify-content:flex-start}
@media (max-width:640px){
  .ow-mx{font-size:.8125rem;min-width:52rem;--mx-first:7.5rem;--mx-us:6.5rem}
  .ow-mx th,.ow-mx td{padding:.75rem .5rem}
}

/* ---------- narrow phones: the whole header bar fits ----------
   Sign in and the language switch stay in the bar at every width (GEN-02,
   REV-12), so below 400px everything tightens rather than spill past the edge. */
@media (max-width:400px){
  .ow-nav__in{padding:0 16px;gap:8px}
  .ow-nav__right{gap:8px}
  .ow-nav__brand img{height:1.125rem}
  .ow-nav__right .lang__btn{padding:6px 8px}
  .ow-nav__login{font-size:.8125rem}
}
@media (max-width:350px){
  .ow-nav__in,.ow-nav__right{gap:6px}
  .ow-nav__brand img{height:.9375rem}
  .ow-nav__ham{width:2.25rem}
}

/* ---------- October 2026 QA (docs/qa-october-2026.md) ---------- */

/* homepage: the first platform statement beside the showcase (ACC-26).
   The montage is never cropped: it keeps its 2200 × 1200 ratio. */
.ow-intro{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:3.5rem;align-items:center;margin-bottom:4rem}
.ow-intro .ow-tabs__head{margin-bottom:0;max-width:none}
.ow-intro__txt .ow-h2{font-size:2.75rem;line-height:1.04}
.ow-intro__txt p{margin:1.25rem 0 1.5rem}
.ow-intro__img{margin:0}
.ow-intro__img img{display:block;width:100%;height:auto;aspect-ratio:2200/1200;object-fit:contain}
@media (max-width:991px){
  .ow-intro{grid-template-columns:1fr;gap:24px;margin-bottom:32px}
  .ow-intro__txt .ow-h2{font-size:2.25rem}
}

/* a real capture in the benefits slot: shown whole, not cropped to a square */
.ow-bens__img--shot{aspect-ratio:auto;background:transparent;border-radius:var(--ow-card)}
.ow-bens__img--shot img{height:auto;max-height:34rem;object-fit:contain;border-radius:1rem}
/* an editorial portrait in the square: keep the face and the tablet in frame */
.ow-bens__img--portrait img{object-position:50% 30%}

/* About (ACC-23) */
.ow-team__head .ow-team__k{margin:0 0 1rem;font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-on-dark)}

/* a product hero with a real capture instead of a mock card */
.ow-phero__shot{margin:0;width:100%}
.ow-phero__shot img{display:block;width:100%;height:auto;object-fit:contain}

/* recipes: the example recipe, a real recipe record (PRD-02/03) */
.ow-recipe__shot{margin:0}
.ow-recipe__shot img{display:block;width:100%;height:auto;border-radius:1rem;border:1px solid var(--line)}
.ow-recipe__shot figcaption{margin-top:.75rem}

.ow-fb__heroMedia--card{display:grid;place-items:center}

/* CLOCK: the app's own screens in the half cards */
.ow-fb__halfMedia--shot{padding:1.5rem 1.5rem 0;overflow:hidden}
.ow-fb__halfMedia--shot img{display:block;width:100%;max-width:22rem;height:auto}

/* pricing: CLOCK presented with its description (TAR-09) */
.ow-addon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:center;background:#fff;
  border-radius:var(--ow-card);padding:2.5rem;margin-bottom:1rem}
.ow-addon__txt{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.ow-addon__txt p{margin:0}
.ow-addon__img{margin:0}
.ow-addon__img img{display:block;width:100%;height:auto}
.ow-more__grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:991px){
  .ow-addon{grid-template-columns:1fr;padding:24px;gap:20px}
  .ow-more__grid--two{grid-template-columns:1fr}
}

/* equipment page (EQP-01..03) */
.ow-eqp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.ow-eqp__card{display:flex;flex-direction:column;gap:.375rem;height:100%;background:#fff;border-radius:1.5rem;padding:1.25rem;
  border:1px solid transparent;transition:border-color .2s var(--ease),transform .25s var(--ease)}
.ow-eqp__card:hover{border-color:var(--ink);transform:translateY(-2px)}
.ow-eqp__card img{width:100%;height:9rem;object-fit:contain;margin-bottom:.75rem}
.ow-eqp__card b{font-size:1.125rem;letter-spacing:-.02em}
.ow-eqp__card span{color:var(--ow-mut);font-size:.9375rem;line-height:1.35}
.ow-eqd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:center}
.ow-eqd--flip .ow-eqd__txt{order:2}
.ow-eqd__txt{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.ow-eqd__txt p{margin:0}
.ow-eqd__media{margin:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;gap:1rem}
.ow-eqd__media>img:not(.ow-eqd__device){display:block;width:100%;justify-self:stretch;height:auto;border-radius:1rem}
.ow-eqd__device{width:auto;max-width:40%;max-height:16rem;object-fit:contain}
.ow-eqd__device--sm{position:absolute;right:-1rem;bottom:-2rem;max-width:30%;max-height:9rem;filter:drop-shadow(0 20px 30px rgba(13,13,15,.3))}
.ow-eqd__device--solo{max-width:60%;max-height:18rem}
.ow-eqd__media--video{border-radius:var(--ow-card);overflow:hidden;background:var(--ink);padding:0 0 1rem}
.ow-eqd__media--video video{display:block;width:100%;justify-self:stretch;aspect-ratio:16/9;object-fit:cover;opacity:.9}
.ow-eqd__media--video .ow-eqd__device{position:absolute;right:1.25rem;bottom:3.5rem;max-width:28%;max-height:12rem;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.ow-eqd__media--video figcaption{color:rgba(255,255,255,.72);padding:0 1.25rem;justify-self:start}
.ow-eqd__media--video .ow-pause{position:absolute;left:1rem;top:1rem;z-index:2}
.ow-eqd__stores{display:flex;gap:.5rem;flex-wrap:wrap}
.ow-specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1.25rem;margin:0;font-size:.9375rem}
.ow-specs dt{font-weight:600}
.ow-specs dd{margin:0;color:var(--ow-mut)}
@media (max-width:1180px){.ow-eqp{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:991px){
  .ow-eqd{grid-template-columns:1fr;gap:28px}
  .ow-eqd--flip .ow-eqd__txt{order:0}
  .ow-eqd__device--sm{right:.5rem;bottom:-1rem}
}
@media (max-width:640px){.ow-eqp{grid-template-columns:repeat(2,minmax(0,1fr))}.ow-eqp__card img{height:6.5rem}}

/* contact page (NEW-01) */
.ow-contact{padding:5rem 0 8rem}
.ow-contact__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem;align-items:start}
.ow-contact__l{display:flex;flex-direction:column;gap:1.75rem}
.ow-contact__l p{margin:0}
.ow-contact__ways{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.ow-contact__ways li{display:grid;gap:.125rem}
.ow-contact__ways span{font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ow-mut-2)}
.ow-contact__ways a,.ow-contact__ways address{font-size:1.125rem;font-style:normal;font-weight:600}
.ow-contact__ways a:hover{color:var(--red)}
.ow-contact__done{max-width:44rem;display:flex;flex-direction:column;gap:1.5rem}
.ow-contact__done p{margin:0}
.ow-form{background:var(--wash);border-radius:var(--ow-card);padding:2.5rem;display:flex;flex-direction:column;gap:1.25rem}
.ow-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.ow-form__f{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.ow-form__f label{font-weight:600;font-size:.9375rem}
.ow-form__opt{font-weight:400;color:var(--ow-mut-2)}
.ow-form input:not([type="hidden"]),.ow-form textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid rgba(13,13,15,.22);border-radius:.75rem;padding:.75rem .875rem}
.ow-form textarea{resize:vertical;min-height:8rem}
.ow-form input:focus,.ow-form textarea:focus{outline:3px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.ow-form [aria-invalid="true"]{border-color:var(--red-aa);box-shadow:0 0 0 1px var(--red-aa)}
.ow-form__hint{font-size:.8125rem;color:var(--ow-mut-2)}
.ow-form__err{font-size:.875rem;font-weight:600;color:var(--red-deep)}
.ow-form p{margin:0}
.ow-form__send{align-self:flex-start}
.ow-form__send:disabled{opacity:.6;cursor:default}
.ow-form__status{font-weight:600;outline:0}
.ow-form__status:empty{display:none}
.ow-form__status[data-kind="ok"]{color:var(--ok);background:#e9f6ef;border-radius:.75rem;padding:1rem}
.ow-form__status[data-kind="error"]{color:var(--red-deep);background:var(--red-soft);border-radius:.75rem;padding:1rem}
.ow-form__status[data-kind="info"]{color:var(--ow-mut)}
/* the honeypot: out of sight and out of the tab order, for people and screen readers */
.ow-form__hp{display:none!important}
@media (max-width:991px){
  .ow-contact{padding:40px 0 64px}
  .ow-contact__wrap{grid-template-columns:1fr;gap:32px}
  .ow-form{padding:20px}
  .ow-form__row{grid-template-columns:1fr}
}

/* ---------- platform captures (GEN-09) ----------
   Real screens from the 2024 English and 2025 French presentations replace
   the illustrated cards. French pages get the French files (data-fr-* in the
   English source, swapped by the build). Device mockups and the tablet are
   cut out on transparency, so they go bare: no frame, no shadow. */
.ow-shot{display:block;width:100%;height:auto;border-radius:1rem;box-shadow:0 30px 60px -42px rgba(13,13,15,.5)}
.ow-shot--bare,.ow-fb__heroMedia img.ow-shot--bare{border-radius:0;box-shadow:none}
.ow-tpanel__vis .ow-shot{max-width:37.5rem}
.ow-phero__frame .ow-shot{border-radius:1.5rem}
.ow-phero__frame .ow-shot--bare{border-radius:0;padding:.75rem 0}
/* under a product cutout, the capture tucks over its base like the card did */
.ow-fb__heroMedia--device>.ow-fb__shot{margin-top:-1rem;position:relative;z-index:1}
.ow-fb__heroMedia--device>.ow-fb__shot--label{width:auto;max-width:70%}
.ow-fb__heroMedia--photo{padding:0}
.ow-fb__heroMedia--photo img{height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.ow-fb__strip .ow-shot{border-radius:0}
@media (max-width:991px){.ow-fb__heroMedia--device>.ow-fb__shot{margin-top:-.75rem}}

/* ---------- Product menu (MEN-06) ----------
   Our two products on the left; the hovered one's features on the right.
   The panes share one grid cell so the panel doesn't resize between them. */
.ow-mega__prod{display:grid;grid-template-columns:17rem 42rem;gap:1.5rem;align-items:stretch}
.ow-mega__pick{display:flex;flex-direction:column;gap:.5rem;padding-right:1.5rem;border-right:1px solid var(--ow-hair)}
.ow-mega__brand{display:flex;flex-direction:column;align-items:flex-start;gap:.625rem;padding:1rem;border-radius:.75rem;
  transition:background .18s var(--ease)}
.ow-mega__brand img{height:1.375rem;width:auto}
.ow-mega__brand span{font-size:.875rem;line-height:1.35;color:var(--ow-mut-2)}
.ow-mega__brand.is-on{background:var(--wash)}
.ow-mega__panes{display:grid}
.ow-mega__pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:1.5rem;align-items:start;
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s}
.ow-mega__pane.is-on{opacity:1;visibility:visible}
.ow-mega__links{display:grid;grid-template-columns:1fr 1fr;column-gap:.75rem}
.ow-mega__fimg{display:grid;place-items:center;aspect-ratio:16/10;border-radius:.75rem;overflow:hidden;background:var(--wash)}
.ow-mega__shot{width:100%;height:100%;object-fit:cover;object-position:0 0}
.ow-mega__shot--bare{object-fit:contain;padding:.5rem}
.ow-mega__g a.ow-mega__sup{flex-direction:column;align-items:flex-start;gap:.125rem;margin-top:.375rem;
  padding-top:.625rem;border-top:1px solid var(--ow-hair);border-radius:0}
.ow-mega__sup span{font-size:.875rem;font-weight:600}
.ow-mega__sup i{font-style:normal;font-size:.8125rem;color:var(--ow-mut-2)}

/* ---------- client testimonials (ACC-32) ---------- */
.ow-tst__head{max-width:46rem;margin:0 auto var(--ow-head);text-align:center}
.ow-tst__head p{margin:.75rem auto 0;max-width:48ch}
.ow-tst__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1rem}
.ow-tst__card{margin:0;background:#fff;border-radius:var(--ow-card);padding:2rem;display:flex;flex-direction:column;gap:1.5rem}
.ow-tst__card--lead{grid-row:span 2}
.ow-tst__logo{height:5rem;display:flex;align-items:center}
.ow-tst__logo img{display:block;height:100%;width:auto;max-width:12rem;object-fit:contain}
.ow-tst__logo--ink{height:auto;align-self:flex-start;background:var(--ink);border-radius:1rem;padding:1.125rem 1.375rem}
.ow-tst__logo--ink img{height:1.25rem;max-width:none}
.ow-tst__q{margin:0;flex:1;quotes:"\201C" "\201D"}
:lang(fr) .ow-tst__q{quotes:"«\00a0" "\00a0»"}
.ow-tst__q p{margin:0;font-size:1.25rem;line-height:1.45;letter-spacing:-.01em}
.ow-tst__q p::before{content:open-quote}
.ow-tst__q p::after{content:close-quote}
.ow-tst__card--lead .ow-tst__logo{height:7rem}
.ow-tst__card--lead .ow-tst__q p{font-size:1.375rem;line-height:1.5}
.ow-tst__by{display:flex;flex-direction:column;gap:.125rem;padding-top:1rem;border-top:1px solid var(--ow-hair);
  font-size:.9375rem;color:var(--ow-mut)}
.ow-tst__by b{font-size:1rem;font-weight:600;color:var(--ink)}
@media (max-width:991px){
  .ow-tst__grid{grid-template-columns:1fr}
  .ow-tst__card--lead{grid-row:auto}
  .ow-tst__card{padding:24px 20px;gap:20px}
  .ow-tst__logo,.ow-tst__card--lead .ow-tst__logo{height:4.5rem}
  .ow-tst__q p,.ow-tst__card--lead .ow-tst__q p{font-size:1.0625rem}
}

/* pricing: CLOCK's published price (TAR-10) */
.ow-addon__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.ow-addon__price b{font-size:2rem;font-weight:700;letter-spacing:-.03em}
.ow-addon__price span{color:var(--ow-mut)}

/* integrations: menu engineering's four categories (PRD-12), in the app's colours */
.ow-mix{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ow-mix li{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:999px;
  background:var(--wash);font-size:.9375rem;font-weight:600}
.ow-mix li::before{content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--dot)}
.ow-mix--star{--dot:#8cc63f}
.ow-mix--promote{--dot:#3b5bdb}
.ow-mix--weak{--dot:#f2b632}
.ow-mix--harm{--dot:var(--red)}
.ow-fb__heroTxt .ow-body-l{margin:0;max-width:38rem}

/* the CLOCK logo with "by RESTOCK" (TAR-11, GEN-10) */
.ow-brandline{display:flex;align-items:center;gap:.625rem;margin:0;font-size:.9375rem;font-weight:600;color:var(--ow-mut)}
.ow-brandline img{height:1.5rem;width:auto}
.ow-brandline--lg img{height:2.25rem}
.ow-brandline--lg{font-size:1.0625rem}