/* ReplaMail — the dressing on top of core blocks.
   Every rule here hangs off a className set on a real block, so the page stays
   editable in WordPress: change the words, move a column, add a section, and
   it still looks right. Nothing here creates layout the editor cannot see. */

:root{
  --rm-ink:#14162b; --rm-ink2:#474357; --rm-ink3:#5a6280;
  --rm-line:#e5e8f0; --rm-line2:#d3d8e6;
  --rm-v:#4f46e5; --rm-vd:#4338ca; --rm-vs:#eef2ff; --rm-vl:#c7d2fe;
  --rm-good:#0c654b;
  --rm-d:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --rm-b:"Public Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --rm-m:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

/* ── the 645px trap ───────────────────────────────────────────────────────
   Twenty Twenty-Five's contentSize is 645px and post-content is a constrained
   layout, so a top-level group is capped at 645px and the 1120px design
   renders a third of its width — the price cards came out ~112px on the
   sibling site that shipped it. The sections opt out with align:full and
   carry their own contentSize, which is the native fix; this only removes the
   page title and lets the content area go full width underneath it. */
body.page-id-20 .wp-block-post-title{display:none}
body.page-id-20 .entry-content{max-width:none}
/* Twenty Twenty-Five stacks 70px of main margin, 70px of wrapper padding and a
   19px block margin above the first block — 160px of nothing between the header
   and the headline, measured. The theme's own layout rules win on specificity,
   so these carry !important rather than a longer selector that would break the
   next time the theme reorganises its wrappers. The hero brings its own top
   padding, so nothing is lost. */
body.page-id-20 main.wp-block-group{margin-block-start:0!important}
body.page-id-20 main > .wp-block-group{padding-top:0!important}
/* Its twin at the BOTTOM was missed until 4 Oct: the page template's wrapper
   adds 70px under the last section, stacking on the section's own padding and
   the footer's — Mats saw a slab of empty space between the contact form and
   the footer. The contact section brings its own bottom padding. */
body.page-id-20 main > .wp-block-group{padding-bottom:0!important}
body.page-id-20 .entry-content{margin-block-start:0!important}
body.page-id-20 .entry-content > .wp-block-group:first-child{margin-block-start:0!important}

body.page-id-20{font-family:var(--rm-b);color:var(--rm-ink);line-height:1.65}
body.page-id-20 h1,body.page-id-20 h2,body.page-id-20 h3,body.page-id-20 h4{
  font-family:var(--rm-d);line-height:1.06;text-wrap:balance;color:var(--rm-ink)}
body.page-id-20 h1{font-size:clamp(38px,5.2vw,57px);letter-spacing:-.035em;font-weight:800}
body.page-id-20 h2{font-size:clamp(26px,4vw,40px);letter-spacing:-.025em;font-weight:700}
body.page-id-20 h3{font-size:19px;font-weight:700}
body.page-id-20 h4{font-size:15px;font-weight:600}
body.page-id-20 a{color:var(--rm-vd)}
/* Global styles set body to weight 300, but Public Sans is a 400-700 variable
   face: 300 clamps to 400, and <strong>'s default "bolder" then also resolves
   to 400 — so every bold word in the body copy rendered as plain text. Pin it. */
strong,b{font-weight:700}

.rm-eyebrow{font-family:var(--rm-d);font-size:11.5px!important;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rm-vd);margin:0 0 4px}
.rm-lede{font-size:18.5px;color:var(--rm-ink2);max-width:62ch;margin-inline:auto}
.rm-note{font-size:15.5px;color:var(--rm-ink2)}
.rm-fine{font-size:13.5px;color:var(--rm-ink3)}
.rm-head{margin-bottom:28px}
.rm-head > *{margin-block:0}
.rm-head h2{margin-bottom:10px}

/* ── buttons ─────────────────────────────────────────────────────────── */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link{
  font-family:var(--rm-d);font-weight:600;font-size:16px;border-radius:12px;
  padding:15px 26px;border:1.5px solid transparent;text-decoration:none}
.wp-block-button.is-style-fill .wp-block-button__link{
  background:var(--rm-v);color:#fff;border-color:var(--rm-v)}
.wp-block-button.is-style-fill .wp-block-button__link:hover{background:var(--rm-vd)}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:#fff;color:var(--rm-ink);border-color:var(--rm-line2)}
.rm-cta{gap:12px;margin-top:4px}

/* ── hero ────────────────────────────────────────────────────────────── */
.rm-hero{align-items:center;gap:clamp(24px,5vw,52px)}
.rm-hero > .wp-block-column > *{margin-block:0 20px}
.rm-hero > .wp-block-column > *:last-child{margin-bottom:0}
.rm-stats{gap:26px;margin-top:4px}
.rm-stats .wp-block-column{flex-basis:auto!important;flex-grow:0}
.rm-stat-n{font-family:var(--rm-d);font-size:25px;font-weight:700;
  letter-spacing:-.02em;margin:0;line-height:1.2}
.rm-stat-l{font-size:13.5px;color:var(--rm-ink3);margin:0}

/* ── the figure and its bubble ───────────────────────────────────────── */
/* Repli is ONE drawing, hue-rotated per product — never recoloured by hand.
   The files are the master at 265deg (ReplaPay violet); ReplaMail indigo is
   245, so every figure here is turned -20. */
.rm-repli img,.rm-pose-block img{filter:hue-rotate(-20deg)}
.rm-figsay{position:relative;display:flex;flex-direction:column;align-items:center;
  max-width:420px;margin-inline:auto}
.rm-figsay-centre{margin-top:30px}
.rm-repli{position:relative;width:70%;aspect-ratio:560/834}
.rm-repli img{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0}
.rm-repli .rm-arm{z-index:2;transform-origin:79.53% 33.66%;will-change:transform;
  animation:rm-wave 2.4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes rm-wave{0%{transform:rotate(-8deg)}45%{transform:rotate(10deg)}100%{transform:rotate(-8deg)}}
@keyframes rm-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.rm-pose-block{margin:0!important}
.rm-pose-block img{display:block;height:250px;width:auto;margin:0 auto}
.rm-bub{position:relative;background:#fff;border:2px solid var(--rm-ink);border-radius:20px;
  padding:12px 17px;font-family:var(--rm-d);font-weight:500;font-size:15.5px;line-height:1.32;
  text-align:left;box-shadow:3px 3px 0 var(--rm-ink);max-width:280px;margin:14px auto 0;
  animation:rm-bob 4s ease-in-out infinite}
.rm-bub:after{content:"";position:absolute;top:-10px;left:34px;width:14px;height:14px;
  background:#fff;border-left:2px solid var(--rm-ink);border-top:2px solid var(--rm-ink);
  transform:rotate(45deg)}
.rm-bub-soft{background:var(--rm-vs)}
.rm-bub-soft:after{background:var(--rm-vs)}
/* On a wide screen the bubble sits beside the figure. Every pose raises a hand
   near head height, so it is aligned to the body, never over a hand. */
@media(min-width:782px){
  .rm-figsay{flex-direction:row;align-items:flex-end;max-width:none;justify-content:center;gap:0}
  /* The figure must never be the one that shrinks. In the hero it shares a
     449px column with the bubble, and with both shrinkable flex items the
     character lost 40% of its height. The bubble absorbs the squeeze instead. */
  .rm-figsay > .rm-repli{flex:0 0 auto;width:56%}
  .rm-figsay > .wp-block-image{flex:0 0 auto}
  .rm-bub{margin:0 0 18% -6%;align-self:flex-end;flex:0 1 auto}
  .rm-bub:after{top:auto;bottom:16px;left:-10px;border-left:2px solid var(--rm-ink);
    border-top:0;border-bottom:2px solid var(--rm-ink)}
  .rm-bub-left{order:-1;margin:0 -6% 18% 0}
  .rm-bub-left:after{left:auto;right:-10px;border-left:0;border-bottom:0;
    border-top:2px solid var(--rm-ink);border-right:2px solid var(--rm-ink)}

  /* The four poses further down the page are constrained-layout groups, and
     WordPress gives every child of one margin-left/right:auto !important and
     zeroes its block margins. In a flex ROW, auto margins swallow all the free
     space: across a 1120px section the bubble floated mid-row with ~316px of
     margin on each side, and Repli was shoved to the far edge — the rules
     above never reached them. Two classes beat WordPress's one. The hero is a
     plain group and was never affected. */
  .rm-figsay.is-layout-constrained > *{
    margin-left:0!important;margin-right:0!important;
    margin-top:0!important;margin-bottom:0!important}
  .rm-figsay.is-layout-constrained > .rm-bub{
    align-self:center;max-width:300px!important;
    margin-bottom:56px!important;margin-left:-10px!important}
  .rm-figsay.is-layout-constrained > .rm-bub-left{
    margin-left:0!important;margin-right:-10px!important}
  /* The shrug ("wonder") holds BOTH hands out at shoulder height, so a bubble
     at mid-height lands on one of them. Lift it to head height for that pose.
     Keyed on the file name on purpose: swap the picture in the editor and the
     bubble falls back to the centred placement the other poses use. */
  .rm-figsay.is-layout-constrained:has(img[src*="repli-wonder"]) > .rm-bub{
    align-self:flex-start;margin-bottom:0!important;margin-top:4px!important}
}
@media(prefers-reduced-motion:reduce){
  .rm-repli .rm-arm{animation:none;transform:rotate(0)}
  .rm-bub{animation:none}
}

/* ── the four-node chain ─────────────────────────────────────────────── */
.rm-chain{gap:12px}
.rm-node{background:#fff;border:1px solid var(--rm-line);border-radius:14px;padding:16px 18px}
.rm-node h4{margin:0 0 4px}
.rm-node .rm-fine{margin:0}
.rm-node-us{background:var(--rm-vs);border-color:var(--rm-vl)}

/* ── the comparison table ────────────────────────────────────────────── */
.rm-table table{border-collapse:collapse;font-size:14.5px;width:100%}
.rm-table th,.rm-table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--rm-line)}
.rm-table th{font-family:var(--rm-d);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rm-ink3)}
.rm-table td+td{font-family:var(--rm-m);font-size:13px;white-space:nowrap}
.rm-table tr.rm-me td{background:var(--rm-vs)}
.rm-table tr.rm-me td:first-child{font-weight:600}
.rm-table tr.rm-me td:last-child{color:var(--rm-good);font-weight:600}

/* ── cards ───────────────────────────────────────────────────────────── */
.rm-cards{gap:18px;margin-bottom:18px}
.rm-card{background:#fff;border:1px solid var(--rm-line);border-radius:18px;padding:24px 22px}
.rm-card h4{margin:0 0 11px;padding-bottom:11px;border-bottom:1px solid var(--rm-line)}
.rm-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.rm-card li{font-size:14.5px;color:var(--rm-ink2);padding-left:17px;position:relative}
.rm-card li:before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50% 50% 50% 1px;background:var(--rm-v);transform:rotate(-20deg)}
.rm-card li strong{color:var(--rm-ink);font-weight:600}

/* ── screenshots ─────────────────────────────────────────────────────── */
.rm-shot img{border-radius:14px;border:1px solid var(--rm-line);
  box-shadow:0 30px 60px -32px rgba(20,22,43,.42);display:block;width:100%;height:auto}
.rm-shot figcaption{font-size:13.5px;color:var(--rm-ink3);text-align:center;margin-top:11px}
.rm-shots{gap:26px;margin-top:26px}
.rm-split{gap:clamp(26px,4.5vw,52px);align-items:center}
.rm-brandlist h3{margin:0 0 5px}
.rm-brandlist .rm-note{margin:0 0 20px}

/* ── the assistant transcript ────────────────────────────────────────── */
.rm-ask{background:#fff;border:1px solid var(--rm-line);border-radius:16px;padding:20px 24px;
  max-width:620px;margin:0 auto 26px;font-family:var(--rm-m);font-size:14px;line-height:1.75}
.rm-ask p{margin:0 0 4px}
.rm-ask p:last-child{margin:0}
.rm-ask .rm-who{color:var(--rm-vd);font-weight:600;margin-right:8px}
.rm-ask .rm-it{color:var(--rm-ink2)}
.rm-ask .rm-gap{margin-top:14px}

/* ── pricing ─────────────────────────────────────────────────────────── */
.rm-tiers{gap:20px;align-items:stretch}
.rm-tier{background:#fff;border:1px solid var(--rm-line);border-radius:18px;padding:26px;
  display:flex;flex-direction:column}
.rm-tier-pick{border:2px solid var(--rm-v);background:var(--rm-vs)}
.rm-tier-tag{font-family:var(--rm-d);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rm-vd);margin:0 0 10px}
.rm-price{font-family:var(--rm-d);font-size:clamp(34px,5vw,46px);font-weight:800;
  letter-spacing:-.03em;line-height:1;margin:0 0 14px}
.rm-once{font-size:16px;font-weight:400;color:var(--rm-ink2)}
.rm-ticks{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;
  gap:9px;font-size:14px;color:var(--rm-ink2)}
.rm-ticks li:before{content:"\2713 ";color:var(--rm-v);font-weight:700}
.rm-tier .rm-fine{margin:0 0 14px}
.rm-tier-btn{margin-top:auto}
.rm-tier-btn .wp-block-button{width:100%}
.rm-tier-btn .wp-block-button__link{display:block;text-align:center}

/* ── bonuses ─────────────────────────────────────────────────────────── */
.rm-free{display:inline-flex;align-items:baseline;gap:7px;float:right;font-family:var(--rm-d)}
.rm-free s{font-size:1.05rem;font-weight:700;color:var(--rm-ink3);text-decoration-thickness:2px}
.rm-free em{font-style:normal;font-weight:600;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--rm-good);border-radius:20px;padding:3px 9px}
.rm-total{align-items:baseline;gap:14px;border-top:1px solid var(--rm-line);
  padding-top:1.25rem;margin-top:1.5rem}
.rm-total-n{font-family:var(--rm-d);font-size:clamp(2rem,5vw,2.9rem)!important;font-weight:700;
  letter-spacing:-.03em;line-height:1;margin:0}
.rm-total .rm-note{flex:1 1 320px;margin:0}

/* ── what it isn't ───────────────────────────────────────────────────── */
.rm-honest{gap:20px;margin-bottom:20px}
.rm-hon{border-left:3px solid var(--rm-vl);padding:2px 0 2px 16px}
.rm-hon h3{margin:0 0 7px}
.rm-hon .rm-note{margin:0}

/* ── the contact form ────────────────────────────────────────────────── */
.rm-contact{gap:36px;align-items:start;margin-top:30px;text-align:left}
.rm-form{display:block;width:100%;height:755px;border:0;border-radius:14px}
.rm-contact-side{text-align:center}
.rm-contact-side .rm-pose-block img{height:240px}
.rm-contact-side .rm-fine{margin:14px 0 0}
/* The form cannot tell this page its height (it is on another domain and
   sends no message), so each band of screen widths gets a fixed one. It must
   fit the form WITH its "required" messages showing — they add 95px — or a
   visitor who makes a mistake has them cut off. It also grows as the frame
   narrows, most of all below a 640px frame, where ReplaForm's First/Last name
   fields stack (its Tailwind `sm:` breakpoint): +82px.

   So each band is sized at its NARROWEST width, messages showing, plus 8px.
   Measured 4 Oct 2026 by pressing Submit on an empty form with all writes
   blocked. The values these replaced were read off the form page's own height,
   which stretches to fill its window, so they came out up to 233px too tall —
   a slab of empty card under Submit — and the 782–880 band 49px too SHORT,
   which cut the messages off. Re-measure if the form gains or loses a field. */
@media(max-width:1199px){.rm-form{height:837px}}  /* 881–1199: frame 471–650 */
@media(max-width:880px){.rm-form{height:863px}}   /* 782–880: still two columns, narrowest frame */
@media(max-width:781px){.rm-form{height:756px}}   /* 720–781: stacked; frame ≥640, names side by side */
@media(max-width:719px){.rm-form{height:837px}}   /* 600–719 */
@media(max-width:599px){.rm-form{height:863px}}   /* 400–599 */
@media(max-width:399px){.rm-form{height:888px}}   /* under 400 */
/* The contact section is the last thing before the footer, which brings its
   own top spacing — so the full section padding here doubled up into a gap. */
body.page-id-20 #contact{padding-bottom:40px!important}

/* ── phone ───────────────────────────────────────────────────────────── */
@media(max-width:781px){
  .rm-stats{gap:18px}
  .rm-pose-block img{height:200px}
  .rm-free{float:none;display:inline-flex;margin-left:8px}
}

/* ── footer: ways to pay ─────────────────────────────────────────────── */
/* Taken from kortli.com's footer, the family's reference, then left-aligned
   because this footer reads down the left. The marks are inline SVG in the
   footer template part — no image files to lose. The card marks are oblong and
   the crypto marks round, so a hairline divider says "two ways to pay" rather
   than "seven logos". */
.rm-pay{margin:4px 0}
.rm-pay-note{font-size:.85rem;margin:0 0 .6rem}
.rm-pay-row{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.rm-pay-row svg{display:block;flex:none}
.rm-pay-divider{width:1px;height:20px;background:#dcdcd7;margin:0 .45rem}
.rm-pay-fine{font-size:.78rem;color:var(--rm-ink3);margin:.7rem 0 0;line-height:1.5;max-width:68ch}
@media(max-width:600px){.rm-pay-divider{display:none}}