/* ==========================================================================
   Motion and 3D, added on top of the approved design (theme v4).

   Everything here is progressive. The effects that change a layout switch
   on only when motion.js adds their class, so without JavaScript, or with
   reduced motion, each page is exactly the approved design.

    1. Page to page
    2. Rolling numbers
    3. Home: the bank listing as a 3D object
    4. Home: the CLOSED stamp
    5. Home: the coral thread
    6. Home: reviews
    7. Sort my books: before and after, turning over
    8. Monthly service: one card, two ways
    9. Payroll: payslips, the tilting quote, the envelope
   10. Get started: choices that tilt and turn
   11. Phones: the Call / WhatsApp bar
   12. Small labels readable on every background
   13. Phones: every tap target at least 44px
   14. Phones: side-swipe cards
   15. Phones: payroll − / + buttons
   16. Phones: Get started one step at a time
   17. Reduced motion
   ========================================================================== */

/* ---- 1. page to page: the header stays put, the page glides in ----------- */
@view-transition{navigation:auto}
.site{view-transition-name:site-header}
.wa{view-transition-name:whatsapp-button}
::view-transition-old(root){animation:vt-out .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* the WebP logo and badge sit in <picture>; let the <img> keep its own layout */
.brand picture,.badgerow picture{display:contents}

/* ---- 2. rolling numbers (site.js AvinatOdo) ------------------------------ */
.odo{--oh:1.15em;display:inline-block;white-space:nowrap;line-height:var(--oh);vertical-align:top;
  font-variant-numeric:tabular-nums}
.odo .oc{display:inline-block;height:var(--oh);line-height:var(--oh);vertical-align:top;overflow:hidden;white-space:pre}
.odo .od{max-width:1em;transition:max-width .45s cubic-bezier(.16,1,.3,1)}
.odo .od.blank{max-width:0}
.odo .os{display:block;transition:transform .65s cubic-bezier(.2,.85,.25,1)}
.odo .os i{display:block;height:var(--oh);font-style:normal;text-align:center}
.odo.still .os,.odo.still .od{transition:none!important}
/* the quote box styles every span in it as a small label; its price is not one */
.qtot .big .odo,.qtot .big .odo span{font-size:inherit;letter-spacing:normal;color:inherit;font-weight:inherit}

/* ---- 3. home: the bank listing as a 3D object ----------------------------
   It rests at an angle with a real edge and a shadow on the page; ledger3d.js
   turns it towards the mouse. Each line is a two-sided tile (home.js). */
.ledger-stage{perspective:1500px;perspective-origin:60% 30%}
.hero .ledger{position:relative;overflow:visible;transform-style:preserve-3d;box-shadow:none;
  transform:translateY(var(--ty,0px)) rotateX(var(--rx,4deg)) rotateY(var(--ry,-9deg))}
.hero .ledger::before{content:"";position:absolute;left:6%;right:6%;top:12%;bottom:-5%;border-radius:30px;
  background:rgba(60,31,37,.32);filter:blur(36px);transform:translateZ(-110px);pointer-events:none}
.hero .ledger .edge{position:absolute;inset:-1px;border-radius:17px;pointer-events:none}
.hero .ledger .edge:nth-child(1){transform:translateZ(-3px);background:#efe9e5}
.hero .ledger .edge:nth-child(2){transform:translateZ(-6px);background:#e8e0db}
.hero .ledger .edge:nth-child(3){transform:translateZ(-9px);background:#e0d6d1}
.hero .ledger .edge:nth-child(4){transform:translateZ(-12px);background:#d6cac4}
.hero .ledger .lhead{position:relative;transform-style:preserve-3d;border-radius:16px 16px 0 0}
.hero .ledger .lfoot{border-radius:0 0 16px 16px}
.hero #rows{transform-style:preserve-3d}
.hero .ledger .count{transform:translateZ(24px);box-shadow:0 8px 18px rgba(60,31,37,.14);
  transition:background .6s,color .6s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.hero .ledger .count.done{transform:translateZ(24px) scale(1.07)}
.hero .ledger .sheen{position:absolute;inset:0;border-radius:16px;pointer-events:none;transform:translateZ(1px);overflow:hidden}
/* the highlight is its own layer, twice the card's size, slid rather than repainted (ledger3d.js sets --sx/--sy) */
.hero .ledger .sheen::before{content:"";position:absolute;left:-50%;top:-50%;width:200%;height:200%;will-change:transform;
  background:radial-gradient(27.5% 22.5% at 50% 50%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);transform:translate(var(--sx,-5%),var(--sy,-15%))}

.row.flip{display:block;padding:0;position:relative;transform-style:preserve-3d;background:transparent!important;
  rotate:x 0deg;transition:rotate .82s cubic-bezier(.3,1.25,.5,1)}
.row.flip.fixed{rotate:x -180deg}
.row.flip.fixed.unfix{rotate:x -360deg}                      /* rolls on round, like a departures board */
.row.flip .face{display:grid;grid-template-columns:76px 1fr 96px 132px;gap:10px;align-items:center;padding:13px 20px;
  background:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.row.flip .back{position:absolute;inset:0;transform:rotateX(180deg);background:#f4faf5}
.row.flip .front .flag{background:rgba(219,79,83,.13);color:var(--coral-strong)}
.row.flip .back .flag{background:rgba(47,122,69,.14);color:var(--green)}
.row.flip.turning{animation:lift .82s cubic-bezier(.3,.7,.3,1)}
@keyframes lift{0%{translate:0 0 0}12%{translate:0 0 22px}80%{translate:0 0 22px}100%{translate:0 0 0}}

@media (max-width:980px){
  .ledger-stage{perspective:1100px}
  .row.flip .face{grid-template-columns:1fr 88px 12px;padding:12px 16px}
  .row.flip .face .d{display:none}
  .row.flip .face .flag{display:block;width:10px;height:10px;padding:0;border-radius:50%;font-size:0;justify-self:end}
  .row.flip .front .flag{background:var(--coral)}
  .row.flip .back .flag{background:var(--green)}
}

/* ---- 4. home: "No penalties." gets its stamp ----------------------------- */
.pc .stamp{position:absolute;top:30px;right:30px;padding:7px 14px 6px;border:3px solid var(--green);border-radius:9px;
  color:var(--green);font-weight:700;font-size:17px;letter-spacing:.2em;line-height:1;pointer-events:none;
  transform:rotate(-12deg);opacity:0;mix-blend-mode:multiply}
.pc.in .stamp{animation:stamp .55s cubic-bezier(.2,.9,.3,1.3) .95s both}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-12deg) scale(2.1)}
  60%{opacity:.92;transform:rotate(-12deg) scale(.94)}
  100%{opacity:.88;transform:rotate(-12deg) scale(1)}
}

/* ---- 5. home: the coral thread on the dark band (thread.js) -------------- */
.thread-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.thread-canvas.on{opacity:1}

/* ---- 6. home: reviews (only shown once real reviews are added) ----------- */
.reviews{padding:110px 0;background:var(--paper-2)}
.reviews .rhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.reviews .rhead h2{margin-bottom:0}
.reviews .rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:600;font-size:15px;color:var(--plum)}
.reviews .rating a{white-space:nowrap}
.reviews .rating a{color:var(--coral);font-weight:600}
.reviews .stars{color:var(--coral);letter-spacing:2px;font-size:17px}
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.rcard{margin:0;background:#fff;border-radius:18px;padding:30px 28px;border:1px solid rgba(60,31,37,.07);
  box-shadow:0 14px 40px rgba(60,31,37,.07);display:flex;flex-direction:column;gap:16px;transition:transform .35s,box-shadow .35s}
.rcard:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(60,31,37,.12)}
.rcard blockquote{margin:0;font-size:16.5px;line-height:1.6;color:var(--plum)}
.rcard figcaption{margin-top:auto;font-size:14px;color:var(--grey)}
.rcard figcaption b{display:block;color:var(--plum);font-size:15px;margin-bottom:2px}
@media (max-width:980px){.r-grid{grid-template-columns:1fr}}

/* ---- 7. sort my books: each "as they were" turns over to "as they should be"
   as it passes up the screen, and turns back if you scroll up (motion.js). */
.story.turning .cols{display:none}
.story.turning .ch{display:block;border-top:0;padding:0;margin:0 0 16px;perspective:1100px}
.story.turning .tile{display:grid;transform-style:preserve-3d;will-change:transform}
.story.turning .tface{grid-area:1/1;display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start;align-content:start;
  background:#fff;border:1px solid rgba(60,31,37,.08);border-radius:16px;padding:24px 28px;
  box-shadow:0 12px 34px rgba(60,31,37,.06);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.story.turning .tface.after{transform:rotateX(180deg);background:#fbfdfb;border-color:rgba(47,122,69,.18)}
.story.turning .lab{font-size:12px;letter-spacing:.18em;font-weight:700;padding-top:4px;color:var(--coral)}
.story.turning .tface.after .lab{color:var(--green)}
.story.turning .was p{display:block;text-decoration:none!important}
.story.turning .tk{transform:scale(1)}
@media (max-width:980px){.story.turning .tface{grid-template-columns:1fr;gap:10px;padding:20px}}

/* ---- 8. monthly service: one card, turned between the two ways ---------- */
.way-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:34px;padding:5px;
  border-radius:999px;background:#fff;border:1px solid rgba(60,31,37,.1);box-shadow:0 8px 24px rgba(60,31,37,.07)}
.way-switch[hidden]{display:none}
.way-switch button{position:relative;z-index:1;font-family:var(--font);font-size:15.5px;font-weight:600;color:var(--grey);
  background:none;border:0;padding:12px 26px;border-radius:999px;cursor:pointer;transition:color .3s;white-space:nowrap}
.way-switch button[aria-selected=true]{color:#fff}
.way-switch button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.way-switch .knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--plum);
  transition:transform .5s cubic-bezier(.34,1.3,.64,1)}
.way-switch.right .knob{transform:translateX(100%)}
.two.turning{display:block;max-width:880px;margin-top:22px;perspective:1800px}
.two.turning .flipper{display:grid;transform-style:preserve-3d;transition:rotate .9s cubic-bezier(.3,1.15,.4,1)}
.two.turning .flipper.full{rotate:y 180deg}
.two.turning .way{grid-area:1/1;opacity:1;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.two.turning .way,.two.turning .way:hover{transform:none}
.two.turning .way.accent,.two.turning .way.accent:hover{transform:rotateY(180deg)}
@media (max-width:980px){.way-switch{display:grid;width:100%}.way-switch button{padding:12px 10px}}

/* ---- 9. payroll: payslips behind the quote, the quote tilts, the envelope - */
.quote-wrap{position:sticky;top:110px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.way{scroll-margin-top:120px}
.quote-wrap .quote{position:relative;top:auto;z-index:2}
.calc{perspective:1600px}
.slips{position:absolute;left:24px;top:-38px;width:62%;height:130px;z-index:0;pointer-events:none}
.slips .slip{position:absolute;inset:0;border-radius:10px;background:#fff;border:1px solid rgba(60,31,37,.1);
  box-shadow:0 6px 16px rgba(60,31,37,.08);opacity:0;transform:translateY(26px) rotate(0);
  transition:opacity .4s,transform .55s cubic-bezier(.34,1.3,.64,1);
  background-image:linear-gradient(rgba(60,31,37,.12),rgba(60,31,37,.12)),linear-gradient(rgba(60,31,37,.09),rgba(60,31,37,.09));
  background-size:46% 5px,30% 5px;background-position:16px 34px,16px 46px;background-repeat:no-repeat}
.slips .slip.on{opacity:1}
.slips .slip.top{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px;font-size:11.5px;
  letter-spacing:.16em;font-weight:700;color:var(--coral-strong)}
.slips .slip.top em{font-style:normal;letter-spacing:.02em;font-weight:600;color:var(--grey);font-size:12.5px}
.quote-wrap .envelope{position:absolute;left:50%;top:46%;width:230px;height:146px;margin:-73px 0 0 -115px;z-index:5;pointer-events:none;
  opacity:0;perspective:700px}
.env-back,.env-front,.env-flap{position:absolute;left:0;right:0;border-radius:10px}
.env-back{inset:0;background:#e9dfd8;box-shadow:0 22px 50px rgba(0,0,0,.35);z-index:1}
.env-letter{position:absolute;left:18px;right:18px;top:-64px;height:124px;border-radius:6px;background:#fff;z-index:2;
  padding:14px 16px;display:flex;flex-direction:column;gap:7px;color:var(--plum);text-align:left}
.env-letter small{font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--coral-strong)}
.env-letter b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.env-letter i{display:block;height:5px;border-radius:3px;background:rgba(60,31,37,.12);width:70%}
.env-letter i+i{width:48%}
.env-front{inset:0;z-index:3;background:#f3ece6;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.env-flap{top:0;height:58%;z-index:1;background:#e2d6ce;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;
  transform:rotateX(180deg)}
.mailing .envelope{animation:env 2.1s cubic-bezier(.3,.7,.3,1) both}
.mailing .env-letter{animation:env-letter 2.1s cubic-bezier(.4,0,.2,1) both}
.mailing .env-flap{animation:env-flap 2.1s cubic-bezier(.4,0,.2,1) both}
@keyframes env{0%{opacity:0;transform:translateY(24px) scale(.9)}10%{opacity:1;transform:none}
  62%{opacity:1;transform:none}100%{opacity:0;transform:translate(110px,-150px) rotate(-10deg) scale(.5)}}
@keyframes env-letter{0%,14%{transform:none}40%,100%{transform:translateY(66px)}}
@keyframes env-flap{0%,40%{transform:rotateX(180deg);z-index:1}41%{z-index:4}56%,100%{transform:rotateX(0);z-index:4}}
@media (max-width:980px){
  .quote-wrap{position:static}
  .slips{display:none}
}

/* ---- 10. get started: choices that tilt, and the chosen one turns over --- */
.needs.turning .need{padding:0;border:0;background:none;box-shadow:none;transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .75s cubic-bezier(.2,.7,.3,1)}
.needs.turning .need:hover{transform:none}
.nflip{display:grid;height:100%;transform-style:preserve-3d;transition:rotate .75s cubic-bezier(.3,1.25,.5,1)}
.need.on .nflip{rotate:y 180deg}
.nf{grid-area:1/1;display:block;text-align:left;padding:22px 20px;border-radius:16px;border:1.5px solid rgba(60,31,37,.14);
  background:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:border-color .22s,box-shadow .22s}
.need:hover .nf.front{border-color:rgba(219,79,83,.55);box-shadow:0 14px 30px rgba(60,31,37,.1)}
.nf.back{transform:rotateY(180deg);background:var(--coral);border-color:var(--coral);color:#fff;
  box-shadow:0 14px 34px rgba(219,79,83,.3)}
.need .nf.back b{color:#fff}
.need .nf.back small{color:rgba(255,255,255,.88)}
.nf-tick{display:block;width:26px;height:26px;border-radius:50%;background:#fff;margin-bottom:12px;position:relative}
.nf-tick::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border-right:2.5px solid var(--coral);
  border-bottom:2.5px solid var(--coral);transform:rotate(42deg)}
.nf .glint{position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(60% 60% at var(--mx,50%) var(--my,30%),rgba(219,79,83,.09),transparent 70%)}
.nf.front{position:relative}
.need:hover .nf .glint{opacity:1}

/* ---- 11. phones: Call and WhatsApp within reach of your thumb ------------- */
.mbar{display:none}
@media (max-width:980px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:65;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(248,245,243,.92);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(60,31,37,.08);
    transform:translateY(110%);transition:transform .45s cubic-bezier(.16,1,.3,1);view-transition-name:phone-bar}
  .mbar.show{transform:none}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 10px;border-radius:999px;
    font-weight:600;font-size:16px;color:#fff}
  .mbar .call{background:var(--plum)}
  .mbar .wapp{background:#25D366}
  .mbar svg{width:20px;height:20px;flex:0 0 auto}
  body.has-mbar .wa{display:none}
  body.has-mbar .foot{padding-bottom:120px}
  body.sheet-open .mbar{transform:translateY(110%)}
  /* the payroll page's price bar owns the bottom edge: lift the WhatsApp button above it */
  body:has(#pricebar) .wa{bottom:calc(106px + env(safe-area-inset-bottom))}
}

/* ---- 12. small labels readable on every background ----------------------
   The coral labels above headings measured 3.7:1 on the light sections and
   about 2.6:1 on the plum ones; small text wants 4.5:1. A hair darker on
   light (4.9:1 on the beige sections), a soft light coral on plum (4.9:1). */
.eyebrow{color:#b93b3f}
.dark .eyebrow{color:#f59c9e}

/* ---- 13. phones: every tap target at least 44px -------------------------
   Invisible padding with a matching negative margin: the touch area grows,
   nothing moves. */
@media (max-width:980px){
  .arrow{padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
  .foot a,.contact .line a,.how .h3i p a{display:inline-block;padding:12px 4px;margin:-12px -4px}
  .qmini button{padding:13px 8px;margin:-13px -8px}
  .brand{padding:3px 0;margin:-3px 0}
  .tick{min-height:44px}
  .tick input{width:22px;height:22px}
  .q button{min-height:44px}
}

/* ---- 14. phones: side-swipe cards (steps, results, cases, packages) -----
   The row scrolls sideways with snap points; the next card peeks in so it's
   clear there's more. motion.js adds the dots underneath. */
.swipe-dots{display:none}
@media (max-width:980px){
  .swipe-m{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:84%;
    gap:14px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding:0 var(--pad);position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:18px var(--pad) 18px}
  .swipe-m::-webkit-scrollbar{display:none}
  .swipe-m>*{scroll-snap-align:start;min-width:0}
  .swipe-dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
  .swipe-dots button{position:relative;width:28px;height:28px;border:0;padding:0;background:none;cursor:pointer}
  .swipe-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
    border-radius:4px;background:rgba(60,31,37,.22);transition:width .3s cubic-bezier(.16,1,.3,1),margin .3s cubic-bezier(.16,1,.3,1),background .3s}
  .swipe-dots button.on::before{width:22px;margin-left:-11px;background:var(--coral)}
  .dark .swipe-dots button::before{background:rgba(248,245,243,.3)}
  .dark .swipe-dots button.on::before{background:var(--coral)}
  .steps .swipe-m ~ .track{display:none}
}

/* ---- 15. phones: payroll staff numbers with big − / + buttons ----------- */
.stepper{display:none}
@media (max-width:980px){
  .controls .fld input[type=range]{display:none}
  .stepper{display:grid;grid-template-columns:58px 1fr 58px;gap:10px;align-items:center}
  .st-btn{height:58px;border-radius:16px;border:1.5px solid rgba(60,31,37,.16);background:#fff;color:var(--plum);
    font-family:var(--font);font-size:30px;font-weight:600;line-height:1;cursor:pointer;touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;transition:background .15s,transform .15s}
  .st-btn:active{background:var(--paper-2);transform:scale(.95)}
  .stepper input{width:100%;height:58px;border-radius:16px;border:1.5px solid rgba(60,31,37,.16);background:#fff;
    text-align:center;font-family:var(--font);font-size:26px;font-weight:700;color:var(--plum);-moz-appearance:textfield}
  .stepper input:focus{outline:0;border-color:var(--coral)}
  .stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
}

/* ---- 16. phones: Get started one step at a time (get-started.js) --------
   1 choose, 2 your details, 3 anything else and send. */
.gs-progress,.gs-nav{display:none}
@media (max-width:700px){
  .gs-wizard .gs-progress{display:flex;align-items:center;gap:6px;margin:0 0 22px}
  .gs-progress span{flex:1;height:4px;border-radius:2px;background:rgba(60,31,37,.12);transition:background .4s}
  .gs-progress span.on{background:var(--coral)}
  .gs-progress b{margin-left:8px;font-size:12px;letter-spacing:.14em;font-weight:700;color:#b93b3f;white-space:nowrap}
  .gs-wizard[data-step="1"] .formwrap{display:none!important}
  .gs-wizard[data-step="2"] .needs,.gs-wizard[data-step="3"] .needs{display:none}
  .gs-wizard[data-step="2"] .s3,.gs-wizard[data-step="2"] #enq [type=submit]{display:none}
  .gs-wizard[data-step="3"] .s2,.gs-wizard[data-step="3"] .chosen,.gs-wizard[data-step="3"] .carry{display:none!important}
  .gs-wizard .gs-nav{display:flex;gap:10px;margin:4px 0 14px}
  .gs-wizard .gs-nav .btn{flex:1;width:auto;font-family:var(--font);cursor:pointer}
  .gs-wizard[data-step="3"] .gs-next{display:none}
  .gs-wizard .gs-in{animation:gs-in .45s cubic-bezier(.16,1,.3,1)}
}
@keyframes gs-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* ---- forms: the hidden trap fields, and the quote email box on phones ----
   The trap fields (Get started, Email me this quote) used to sit off-screen,
   where phone and tablet autofill could fill them, and then a real person
   was turned away as a bot. Not displayed at all, autofill never touches
   them; bots reading the page still do. */
.hp,.hp-trap{display:none!important}
@media (max-width:980px){
  /* "Send it" is a full-width button on phones, which squeezed the email box
     to a sliver: stack them instead */
  .qmail{flex-wrap:wrap}
  .qmail input[type=email]{flex:1 1 100%;min-height:50px;font-size:16px}
  .qmail .btn{flex:1 1 100%;width:100%}
}

/* ---- 17. reduced motion: everything rests in its finished state --------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .odo .os,.odo .od{transition:none!important}
  .row.flip{transition:none}
  .row.flip.turning{animation:none}
  .pc.in .stamp{animation:none;opacity:.88}
  .thread-canvas{display:none}
  .quote-wrap,.slips .slip,.nflip,.way-switch .knob{transition:none}
  .mailing .envelope,.mailing .env-letter,.mailing .env-flap{animation:none}
  .mbar{transition:none}
  .gs-wizard .gs-in{animation:none}
  .swipe-dots button::before{transition:none}
}