/* ==========================================================================
   Paidrelay — stylesheet
   Navy from the logo's tile, green from its chevron for actions and "paid".
   The system UI font everywhere (no web fonts); system monospace only for
   wallet addresses. Logical properties throughout so the
   Arabic tree (dir="rtl") mirrors without a second stylesheet.
   ========================================================================== */

:root{
  --ink:#0f1b2d;        /* headings, dark surfaces */
  --body:#33415a;       /* body copy */
  --muted:#5d6b82;      /* captions */
  --signal:#0b7d3e;     /* accent from the logo's green chevron: links, selected states */
  --signal-h:#08622f;
  --signal-wash:#e3f4ea;
  --go:#12a150;         /* the chevron green itself: buttons and highlights on navy */
  --go-h:#18b85d;
  --navy-text:#b8c4d8;  /* body copy on navy */
  --approved:#12a150;   /* paid / success only */
  --approved-wash:#e5f5ec;
  --declined:#c2361f;   /* the error strings people paste */
  --declined-wash:#fcebe7;
  --amber:#a15c07; --amber-wash:#fdf3e2;
  --paper:#f4f6fa;      /* page */
  --white:#ffffff;
  --line:#d5dbe6;
  --line-2:#bcc5d4;

  /* The device's own UI font: San Francisco, Segoe UI, Roboto. Nothing to
     download, and Vietnamese, Chinese and Arabic come with the system. */
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --f-head:var(--f);
  /* No monospace on the site: numbers use the text face with tabular figures.
     The token stays so older rules keep working. */
  --f-mono:var(--f);
  --f-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* wallet addresses only */

  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1rem; --t-lg:1.125rem;
  --h3:clamp(1.1rem,1.05rem + .3vw,1.25rem);
  --h2:clamp(1.45rem,1.2rem + 1vw,1.95rem);
  --h1:clamp(1.9rem,1.4rem + 2.2vw,3rem);

  --gut:clamp(16px,.6rem + 1.8vw,32px);
  --sec:clamp(3rem,2rem + 3.2vw,5rem);
  --wrap:1120px;
  --r:8px; --r-lg:12px;
}
:root:lang(zh-Hant-TW){--f:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}
:root:lang(ar){--f:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{font-variant-numeric:tabular-nums;margin:0;background:var(--paper);color:var(--body);font:400 var(--t-md)/1.65 var(--f);text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--signal);text-underline-offset:.18em}
a:hover{color:var(--signal-h)}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;margin:0;text-wrap:balance;font-family:var(--f-head);font-weight:700;letter-spacing:-.015em}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3)}
p{margin:0}
code,.mono{font-family:var(--f-mono);font-size:.92em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:16px;top:12px;z-index:50;background:var(--white);padding:8px 12px}

/* --- Masthead ------------------------------------------------------------ */
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(244,246,250,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--f-head);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.logo img{width:30px;height:30px}
.logo:hover{color:var(--ink)}
.foot .logo:hover{color:#fff;text-decoration:none}
.nav{display:flex;gap:4px;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:var(--t-sm);padding:8px 10px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--go);text-decoration-thickness:2px;text-underline-offset:8px}
.lang{position:relative}
.lang select{appearance:none;font:inherit;font-size:var(--t-sm);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:6px;padding:7px 28px 7px 10px;cursor:pointer}
.lang::after{content:"";position:absolute;inset-inline-end:10px;top:50%;width:6px;height:6px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
@media (max-width:760px){
  .nav .hide-sm{display:none}
  .mast .wrap{gap:10px}
}

/* --- Buttons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 var(--t-md)/1.2 var(--f);padding:.8rem 1.35rem;border-radius:var(--r);border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#1d2c46;color:#fff}
/* The logo's double chevron, in green, on every primary action. */
.btn-primary::after{content:"";width:14px;height:12px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 1.5l4.5 4.5-4.5 4.5M8.5 1.5l4.5 4.5-4.5 4.5' stroke='%2312a150' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:root[dir="rtl"] .btn-primary::after{transform:scaleX(-1)}
/* On navy surfaces the button turns green with navy text, like the OG card. */
.on-navy .btn-primary,.offer .btn-primary{background:#0b7d3e;color:#fff}
.on-navy .btn-primary:hover,.offer .btn-primary:hover{background:#0a6e37;color:#fff}
.on-navy .btn-primary::after,.offer .btn-primary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 1.5l4.5 4.5-4.5 4.5M8.5 1.5l4.5 4.5-4.5 4.5' stroke='%23ffffff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.on-navy .btn-ghost{color:#fff;border-color:#3a4c6b}
.on-navy .btn-ghost:hover{border-color:#fff;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{padding:.5rem .9rem;font-size:var(--t-sm)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* --- Hero -------------------------------------------------------------------- */
.hero{padding-block:clamp(2.5rem,1.6rem + 4vw,4.5rem) clamp(3rem,2rem + 4vw,5rem);background:var(--ink);color:var(--navy-text);position:relative;overflow:hidden}
/* Oversized chevrons from the mark, as on the social card. */
.hero::before{content:"";position:absolute;inset-inline-end:-6%;top:50%;width:min(46vw,560px);aspect-ratio:1;transform:translateY(-50%);opacity:.07;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8.5 10l6 6-6 6' stroke='%23f4f6fa' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 10l6 6-6 6' stroke='%2312a150' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:root[dir="rtl"] .hero::before{transform:translateY(-50%) scaleX(-1)}
.hero .wrap{position:relative}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--go)}
.hero .eyebrow{color:var(--go)}
.hero .fineprint{color:#8291ab}
.hero .lede{color:var(--navy-text)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:880px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:grid;gap:20px}
.eyebrow{font:600 var(--t-sm)/1.2 var(--f);letter-spacing:0;color:var(--signal)}
.lede{font-size:var(--t-lg);max-width:54ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fineprint{font-size:var(--t-xs);color:var(--muted)}

/* The hero visual: what the customer saw (declined), then our receipt.
   Words in Plex Sans; only amounts in Plex Mono. */
.hero-visual{display:grid;gap:12px;max-width:420px;justify-self:end;width:100%}
@media (max-width:880px){.hero-visual{justify-self:stretch;max-width:none}}
.rc-paid-tag{margin-inline-start:auto;font:700 .75rem/1 var(--f-head);text-transform:uppercase;letter-spacing:.06em;color:var(--approved);border:1.5px solid var(--approved);border-radius:4px;padding:4px 6px;transform:rotate(-4deg)}
.receipt{color:var(--ink);background:var(--white);border-radius:12px;padding:18px 20px 20px;display:grid;gap:14px;font-size:var(--t-sm);position:relative;box-shadow:0 24px 50px -28px rgba(0,0,0,.6);;margin:0}
.rc-head{display:flex;gap:10px;align-items:center;padding-bottom:14px;border-bottom:1px dashed var(--line-2)}
.rc-head div{display:grid;line-height:1.3}
.rc-head b{color:var(--ink)}
.rc-head span{font-size:var(--t-xs);color:var(--muted)}
.rc-lines{display:grid;gap:8px}
.rc-line{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rc-line .num{font-family:var(--f);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.rc-sub{color:var(--muted)}
.rc-total{border-top:1px solid var(--line);padding-top:10px;font-weight:700;color:var(--ink);font-size:var(--t-md)}
.rc-total .num{font:700 1.4rem/1 var(--f-head)}
.rc-paid{display:flex;align-items:center;gap:10px;color:var(--body)}
.rc-coin{display:flex;gap:4px}
.rc-coin img{width:22px;height:22px}

.rc-status{display:flex;gap:10px;align-items:flex-start;background:var(--approved-wash);border-radius:8px;padding:10px 12px;color:var(--ink);line-height:1.45}
.rc-check{width:20px;height:20px;flex:none;border-radius:50%;margin-top:1px;background:var(--approved) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.receipt-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.receipt-row span:first-child{color:var(--muted)}
.receipt hr{border:0;border-top:1px dashed var(--line-2);margin:0}
.receipt figcaption{font-size:var(--t-xs);color:var(--muted);text-align:center}
.status{display:inline-flex;align-items:center;gap:6px;font:600 .75rem/1 var(--f);padding:5px 9px;border-radius:999px}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-declined{background:var(--declined-wash);color:var(--declined)}
.status-approved{background:var(--approved-wash);color:var(--approved)}
.status-wait{background:var(--amber-wash);color:var(--amber)}
.errline{color:var(--declined);text-decoration:line-through;text-decoration-thickness:1px}

/* --- Sections ---------------------------------------------------------------- */
.sec{padding-block:var(--sec)}
.sec-white{background:var(--white);border-block:1px solid var(--line)}
.sec-ink{background:var(--ink);color:#c9d3e3}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-head{display:grid;gap:10px;margin-block-end:32px;max-width:62ch}

/* --- Plan grid --------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:12px;grid-template-rows:auto auto 1fr auto}
.plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan h3{font-size:1.1rem}
.method{font:600 .75rem/1 var(--f);color:var(--muted);border:1px solid var(--line);padding:4px 7px;border-radius:999px;white-space:nowrap}
.price{font:700 1.7rem/1 var(--f-head);color:var(--ink);font-variant-numeric:tabular-nums}
.price small{font:400 var(--t-xs) var(--f);color:var(--muted);margin-inline-start:4px}
.plan p{font-size:var(--t-sm)}
.plan .btn{width:100%}

/* --- Steps (a real sequence, so numbered) --------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{display:grid;gap:8px;counter-increment:s;align-content:start}
.steps li::before{content:counter(s);font:700 .9rem/1 var(--f-head);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1.5px solid currentColor;color:var(--signal)}
.sec-ink .steps li::before{color:var(--go)}

/* --- Comparison of methods ---------------------------------------------------- */
.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:10px;background:var(--white);align-content:start}
.mcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:var(--t-sm)}
.mcard dt{color:var(--muted)}
.mcard dd{margin:0}

/* --- FAQ --------------------------------------------------------------------- */
.faq{display:grid;gap:10px;max-width:820px;width:100%;margin-inline:auto}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:0 18px}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);padding-block:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.2rem/1 var(--f-mono);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding-block-end:16px;display:grid;gap:10px}

/* --- Callouts, tables --------------------------------------------------------- */
.note{border-inline-start:3px solid var(--signal);background:var(--signal-wash);padding:14px 16px;border-radius:0 var(--r) var(--r) 0;display:grid;gap:6px}
.note-warn{border-color:var(--amber);background:var(--amber-wash)}
.note-ok{border-color:var(--approved);background:var(--approved-wash)}
:root[dir="rtl"] .note{border-radius:var(--r) 0 0 var(--r)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
table{border-collapse:collapse;width:100%;font-size:var(--t-sm)}
th,td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 .8rem/1.3 var(--f);color:var(--muted);background:var(--paper)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Article ----------------------------------------------------------------- */
.crumbs{font-size:var(--t-xs);color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;padding-block:20px 0}
.crumbs a{color:var(--muted)}
.article{display:grid;grid-template-columns:minmax(0,1fr);padding-block:24px var(--sec)}
@media (max-width:960px){.article{grid-template-columns:minmax(0,1fr)}}
.prose{display:grid;gap:18px;max-width:none;min-width:0}
.prose h1{margin-block-end:4px}
.prose h2{margin-block-start:22px;font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem)}
.prose h3{margin-block-start:8px}
.prose ul,.prose ol{margin:0;padding-inline-start:22px;display:grid;gap:6px}
.byline{font-size:var(--t-xs);color:var(--muted)}
.error-quote{font:600 1.05rem/1.5 var(--f);color:var(--declined);background:var(--declined-wash);border:1px solid #f2c9c0;border-radius:var(--r);padding:14px 16px}
.aside{display:grid;gap:16px;align-content:start;position:sticky;top:88px}
@media (max-width:960px){.aside{position:static}}
.offer{background:var(--ink);color:#c9d3e3;border-radius:var(--r-lg);padding:20px;display:grid;gap:12px}
.offer h3{color:#fff;font-size:1.05rem}
.offer .price{color:var(--go)}
.toc{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--white);font-size:var(--t-sm);display:grid;gap:6px}
.toc a{color:var(--body);text-decoration:none}
.toc a:hover{color:var(--signal)}

/* --- Blog index ----------------------------------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.post{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--body)}
.post:hover{border-color:var(--ink)}
.post h3{font-size:1.05rem}
.post .q{font:600 .85rem/1.4 var(--f);color:var(--declined)}

/* --- Forms (order page) ----------------------------------------------------------- */
.field{display:grid;gap:6px;align-content:start}
.field label,.legend{font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r);padding:.7rem .85rem;width:100%}
/* One height for every single-line control, so rows line up. */
.field input:not([type=checkbox]):not([type=radio]),.field select{height:48px;padding-block:0;line-height:1.2}
.field select{appearance:none;-webkit-appearance:none;padding-inline-end:2.4rem;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235d6b82' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .9rem center/12px 8px}
:root[dir="rtl"] .field select{background-position:left .9rem center}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--signal);outline:none;box-shadow:0 0 0 3px var(--signal-wash)}
.field .hint{font-size:var(--t-xs);color:var(--muted)}
.choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.choice label{border:1.5px solid var(--line-2);border-radius:var(--r);padding:10px 12px;cursor:pointer;background:var(--white);display:grid;gap:2px;font-size:var(--t-sm)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label:has(input:checked){border-color:var(--signal);background:var(--signal-wash)}
.choice label:has(input:focus-visible){outline:2.5px solid var(--signal);outline-offset:2px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2.5vw,28px);display:grid;gap:20px}

/* --- Footer -------------------------------------------------------------------- */
.foot{background:var(--ink);color:#9fadc4;font-size:var(--t-sm);padding-block:48px 32px}
.foot .wrap{display:grid;gap:28px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.foot h4{color:#fff;font-size:var(--t-sm);margin-block-end:8px}
.foot a{color:#c9d3e3;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot .legal-line{font-size:var(--t-xs);color:#7d8ba3;border-top:1px solid #23324a;padding-top:20px;display:grid;gap:6px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Home: centred questions block */
.sec-head-center{margin-inline:auto;text-align:center}
.faq-center{margin-inline:auto}

/* Hero receipt: bottom edge torn in a zigzag. The teeth are drawn below the
   card; the shadow sits on the wrapper so it follows the teeth. */
.hero-visual{filter:drop-shadow(0 22px 30px rgba(0,0,0,.45))}
.receipt-torn{border-radius:12px 12px 0 0;box-shadow:none;margin-bottom:10px}
.receipt-torn::after{content:"";position:absolute;inset-inline:0;top:calc(100% - 1px);height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H16L8 10Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0/16px 10px repeat-x}

.post-ic{width:28px;height:28px;padding:5px;border-radius:8px;background:var(--paper);border:1px solid var(--line);box-sizing:content-box;margin-bottom:4px}

/* Home: the three ways we pay */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.way{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:grid;gap:10px;align-content:start}
.way-ic{width:44px;height:44px;border-radius:10px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);margin-bottom:4px}
.way-ic svg{width:22px;height:22px}
.way-svc{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--t-sm)}
.way-svc img{width:16px;height:16px}
.way-svc img:last-of-type{margin-inline-end:4px}
.way-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:var(--t-sm);color:var(--ink)}
.way-list li{display:flex;gap:10px;align-items:flex-start}
.way-list li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;margin-top:1px}
.way-list .ok::before{background:var(--approved-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%2312a150' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.way-list .no::before{background:var(--amber-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v4.5M8 11.5v.1' stroke='%23a15c07' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* Article "what you see" checkout mock (reconstruction, not a screenshot) */
.mock{margin:4px auto 8px;display:grid;gap:0;max-width:560px;width:100%}
.mock .mk-win{display:flex;align-items:center;gap:6px;background:#e7e9ee;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:9px 12px}
.mock .mk-win span{width:9px;height:9px;border-radius:50%;background:#c9ced8}
.mock .mk-win em{font-style:normal;font-size:.78rem;color:var(--muted);margin-inline-start:8px}
.mock .mk-body{border:1px solid var(--line);border-radius:0 0 12px 12px;padding:22px clamp(16px,4vw,32px) 24px;display:grid;gap:12px;max-width:100%}
.mock .mk-h{font-size:1.15rem;font-weight:700}
.mock .mk-row{display:flex;justify-content:space-between;font-size:.92rem;padding-bottom:10px;border-bottom:1px solid var(--mk-line)}
.mock .mk-label{font-size:.78rem;opacity:.75;margin-top:2px}
.mock .mk-field{display:flex;justify-content:space-between;border:1px solid var(--mk-line);border-radius:8px;padding:11px 12px;font-size:.92rem}
.mock .mk-bad{border-color:#df1b41;box-shadow:0 0 0 1px #df1b41}
.mock .mk-err{color:#df1b41;font-size:.88rem;margin-top:-4px}
.mock .mk-banner{background:#fde2e1;color:#b42318;border:1px solid #f4b4b0;border-radius:10px;padding:11px 14px;font-size:.95rem;font-weight:500}
.mock .mk-btn{border-radius:8px;padding:11px;text-align:center;font-weight:600;opacity:.55}
.mock figcaption{font-size:var(--t-xs);color:var(--muted);margin-top:8px;text-align:center}
/* per service look: colours only, no logos */
.mock-chatgpt .mk-body{background:#212121;color:#ececec;--mk-line:#3a3a3a}
.mock-chatgpt .mk-btn{background:#ececec;color:#212121}
.mock-chatgpt .mk-banner{background:#3b1f20;color:#ffb4ab;border-color:#6b2c2c}
.mock-claude .mk-body{background:#faf9f5;color:#2b2a27;--mk-line:#e2ded3}
.mock-claude .mk-btn{background:#2b2a27;color:#fff}
.mock-stripe .mk-body{background:#fff;color:#30313d;--mk-line:#e0e3ea}
.mock-stripe .mk-btn{background:#0570de;color:#fff}
.mock-canva .mk-body{background:#fff;color:#0e1318;--mk-line:#e3e5e8}
.mock-canva .mk-btn{background:#8b3dff;color:#fff}
.quote{margin:0;border-inline-start:3px solid var(--line-2);padding:4px 0 4px 16px;color:var(--ink);font-style:italic}

/* In-text sales card (replaces the old sidebar): title + one line + button, no price */
.offer-inline{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:center;margin:10px 0}
.offer-inline h3{grid-column:1}
.offer-inline .price{display:none}
.offer-inline p{grid-column:1;margin:0}
.offer-inline .btn{grid-column:2;grid-row:1 / span 2;justify-self:end}
@media (max-width:620px){.offer-inline{grid-template-columns:1fr}.offer-inline .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}
.prose h2#faq{text-align:center}

/* Language switch: globe + code button, list of native names */
.lang-sw{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;font:600 var(--t-sm)/1 var(--f);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer}
.lang-btn:hover{border-color:var(--line-2)}
.lang-btn[aria-expanded="true"]{border-color:var(--ink)}
.lang-caret{width:7px;height:7px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);margin-inline-start:2px}
.lang-btn[aria-expanded="true"] .lang-caret{transform:translateY(1px) rotate(-135deg)}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:6px;min-width:190px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px -16px rgba(15,27,45,.28);display:grid;gap:2px}
.lang-menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--body);text-decoration:none;font-size:var(--t-sm)}
.lang-menu a:hover,.lang-menu a:focus{background:var(--paper);color:var(--ink);outline:none}
.lang-menu a[aria-current="true"]{background:var(--paper);color:var(--ink);font-weight:700}