@font-face{font-family:'Avenir LT 85 Heavy';font-style:normal;font-weight:400;font-display:swap;src:url(avenir-heavy.woff2) format('woff2')}@font-face{font-family:'Avenir LT 35 Light';font-style:normal;font-weight:400;font-display:swap;src:url(avenir-light.woff2) format('woff2')}
:root{--ink:#1C1E3F;--muted:#63657D;--line:#D3D3E0;--accent:#3054ED;--bg:#fff;--soft:#F6F6F7;--onaccent:#FFFFFF;--menu-ink:#1C1E3F;--menu-font:'Avenir LT 85 Heavy',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--menu-font2:arial,helvetica,sans-serif;--font-body:'Avenir LT 35 Light',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Open Sans',sans-serif;--font-strong:'Avenir LT 85 Heavy',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Open Sans',sans-serif;--flyout-bg:#FFFFFF;--flyout-line:transparent}
/* Dark mode lifts the accent: #3054ED on #1C1E3F is too low contrast for link text. */
@media (prefers-color-scheme:dark){:root{--ink:#F2F3F8;--muted:#A9ACC4;--line:#33365C;--bg:#12132A;--soft:#1C1E3F;--accent:#8DA2FF;--onaccent:#12142B;--menu-ink:#F2F3F8;--flyout-bg:#23264A;--flyout-line:#33365C}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--font-body)}
h1,h2,h3,h4,strong,b,th,.btn,.needs .k,.needs .t,.strip p,.steps li::before,
.langsw a[aria-current="true"],
.cols h3,.related h2{font-family:var(--font-strong);font-weight:400}
/* Header and menu copied from verestro.com: white bar, navy logo box, Avenir
   LT 85 Heavy at 14px with 0.05em tracking, item padding 10px 2px and margin
   4px, current page in #1D67CD, hover in #3141FF. Measured on the live site. */
.masthead{background:var(--soft)}
.mast-in{max-width:1000px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:0;flex-wrap:wrap;min-height:58px}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit;height:58px;padding:0}
.brand .wm{display:block;height:27px;width:auto}
.brand .wm-white{display:none}
@media (prefers-color-scheme:dark){
  .brand .wm-navy{display:none}
  .brand .wm-white{display:block}
}
.sitename{font-family:var(--menu-font);font-size:14px;letter-spacing:.05em;text-decoration:none;color:var(--menu-ink);padding:10px 2px;margin:4px 4px 4px 18px}
.sitename::before{content:"|";color:var(--line);margin-right:18px;font-weight:400}
.sitetag{font-family:var(--menu-font);font-size:14px;letter-spacing:.05em;color:var(--menu-ink);padding:10px 2px;margin:4px 4px 4px 18px;white-space:nowrap}
.sitetag::before{content:"|";color:var(--line);margin-right:18px;font-weight:400}
/* Right hand group of the top bar. It carries the language switcher on the
   translated pages and nothing else: the return link to verestro.com came
   out on 11.09.2026, the wordmark already goes there. Sits on the column's
   right edge, the same edge the order button in the section bar ends on. */
.mast-in .up{margin-left:auto;margin-right:0;
  font-family:var(--menu-font);font-size:14px;letter-spacing:.05em;display:flex;gap:16px;align-items:center}
.mast-in .up a{color:var(--menu-ink);text-decoration:none;padding:10px 2px;margin:4px}
.mast-in .up a:hover{color:#3141FF}
.langsw{display:flex;gap:6px;align-items:center;font-size:13px}
.langsw a{text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--muted)}
.langsw a[aria-current="true"]{border-color:var(--accent);color:var(--accent);font-weight:700}
nav.sub{background:var(--bg);border-bottom:1px solid var(--line)}
/* Air between the sections, set as a gap on the row rather than a margin on
   each link, so the first one still lines up with the page content. It was
   32px, measured off verestro.com, until the order button joined the row:
   eight labels and the button measure 748px, and eight gaps of 32px took the
   total to 1004px against 956px of usable width, so the button dropped to a
   line of its own with a hole above it. At 22px the row measures 924px and
   holds. overflow stays visible, otherwise the row would clip its flyouts. */
nav.sub > ul{max-width:1000px;margin:0 auto;padding:0 22px;display:flex;gap:22px;
  list-style:none;flex-wrap:wrap;overflow:visible}
nav.sub > ul > li{position:relative}
nav.sub > ul > li > a:not(.btn){display:block;padding:10px 2px;margin:4px 0;font-family:var(--menu-font);
  font-size:14px;font-weight:400;letter-spacing:.05em;text-decoration:none;color:var(--menu-ink);
  white-space:nowrap}
nav.sub a:not(.btn):hover{color:#3141FF}
nav.sub a.on:not(.btn),nav.sub a[aria-current="page"]:not(.btn){color:#1D67CD}
/* The last section is the one commercial action on the bar, so it carries
   the same `.btn` as the hero rather than a colour on a nav link. The rule
   above exempts it from the link styling, which would otherwise win on
   specificity and flatten it. Only placement and a tighter height live
   here, so the two buttons stay identical by construction. */
nav.sub > ul > li.cta{margin-left:auto;display:flex;align-items:center}
nav.sub > ul > li.cta > a.btn{padding:9px 20px;font-size:14px;letter-spacing:.05em;
  font-family:var(--menu-font)}
@media (max-width:1000px){nav.sub > ul > li.cta{margin-left:0}}
/* Flyout panel, measured off verestro.com: white, 10px radius, the same offset
   shadow, 5px of padding, and 14px arial rows at 10px 30px. It opens on hover
   and on keyboard focus, so tabbing through the row reaches every child link. */
.flyout{position:absolute;top:100%;left:-14px;z-index:40;visibility:hidden;opacity:0;
  background:var(--flyout-bg);border:1px solid var(--flyout-line);border-radius:10px;
  box-shadow:2.83px 2.83px 13px rgba(28,30,63,.09);padding:5px;
  transition:opacity .12s ease}
nav.sub > ul > li:hover > .flyout,nav.sub > ul > li:focus-within > .flyout{visibility:visible;opacity:1}
.flyout ul{list-style:none;margin:0;padding:0;display:block}
.flyout a{display:block;padding:10px 30px;font-family:var(--menu-font2);font-size:14px;
  letter-spacing:.05em;text-decoration:none;color:var(--menu-ink);white-space:nowrap}
/* Twenty countries in one column would run past the viewport, so the long panel
   splits into two, at the 48px column spacing verestro.com uses. */
.flyout.split ul{column-count:2;column-gap:48px}
.flyout.split a{break-inside:avoid}
/* Below the full column width the flyouts go away: hover is unreliable on
   touch, and eight panels opened at once would bury the page. Instead the panel
   of the section you are currently in expands underneath it, which is what the
   old second row did.
   The bound was 700px until a measurement at 768px showed every page scrolling
   sideways by 97px. The panels sit in the layout even while hidden, and the
   widest one starts 371px into the row and runs 417px, so it ended at 788px
   against a 768px viewport. Above 1000px the column is centred with free space
   on both sides and the same panel cannot reach the edge, so that is where the
   bound belongs. Everything between is a touch device that could not open the
   panel anyway. */
@media (max-width:1000px){
  nav.sub > ul{gap:0 18px;padding:6px 22px 10px}
  nav.sub > ul > li > a{padding:6px 0;margin:0}
  .flyout{position:static;visibility:visible;opacity:1;display:none;box-shadow:none;border:0;
    background:transparent;padding:2px 0 8px 12px}
  nav.sub > ul > li:has(> .flyout):has(> a.on),
  nav.sub > ul > li:has(> .flyout):has(> a[aria-current="page"]){width:100%}
  nav.sub > ul > li:has(> a.on) > .flyout,
  nav.sub > ul > li:has(> a[aria-current="page"]) > .flyout{display:block}
  .flyout.split ul{column-count:2;column-gap:20px}
  .flyout a{padding:4px 0;white-space:normal}
}
@media (max-width:700px){
  .sitename{margin-left:12px}
  .sitename::before{margin-right:12px}
  /* Three labels plus the return link wrap onto two rows at phone width,
     which strands a separator in front of the site name. The line of
     business is the one that can go: it earns its place on a wide bar. */
  .sitetag{display:none}
}
/* The page frame matches the header, the footer and the hero at 1000px, so
   tiles, tables, figures and grids get real room instead of sitting in a 716px
   slot. Running text is capped separately below: a paragraph set the full 956px
   would run past 110 characters a line, which is harder to read, not easier. */
main{max-width:1000px;margin:0 auto;padding:34px 22px 70px}
main>h1,main>h2,main>h3,main>p,main>.meta,main>.crumb,
main>ul:not(.needs):not(.steps)>li,main>ol>li{max-width:860px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)}
h1{font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 18px}
h2{font-size:clamp(21px,3vw,27px);line-height:1.25;margin:44px 0 12px;letter-spacing:-.01em}
h3{font-size:18px;margin:26px 0 8px}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:7px}
a{color:var(--accent)}
.lede{font-size:19px}
.meta{color:var(--muted);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:28px}
.sources{margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.sources h2{font-size:17px;margin:0 0 10px}
.sources ul{margin:0;padding-left:20px;font-size:14px;line-height:1.6;color:var(--muted)}
.sources li{margin:4px 0}
.sources a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.sources a:hover{color:var(--ink)}
table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px;display:block;overflow-x:auto}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;color:var(--muted);white-space:nowrap}
code{background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:14px}
.note{background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:14px 16px;margin:0 0 18px}
.note p:last-child{margin:0}
.related{border-top:1px solid var(--line);margin-top:46px;padding-top:22px}
.related h2{font-size:17px;margin:0 0 10px}
.related ul{padding-left:20px;font-size:15px}
.related li,.note p{max-width:860px}
footer{border-top:1px solid var(--line);background:var(--soft)}
.foot-in{max-width:1000px;margin:0 auto;padding:30px 22px 46px;color:var(--muted);font-size:14px}
.foot-in ul{list-style:none;padding:0;display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px}
/* The mark sits above the links, on the same navy on light, white on dark swap
   the masthead uses. Never redrawn or recoloured, only swapped. */
.foot-mark{display:inline-block;margin:0 0 18px}
.foot-mark .wm{display:block;height:24px;width:auto}
.foot-mark .wm-white{display:none}
@media (prefers-color-scheme:dark){
  .foot-mark .wm-navy{display:none}
  .foot-mark .wm-white{display:block}
}

figure.fig{margin:26px 0;padding:0}
figure.fig svg{display:block;width:100%;height:auto}
figure.fig figcaption{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.fig .fbox{fill:var(--soft);stroke:var(--line)}
.fig .fbox-on{fill:none;stroke:var(--accent);stroke-width:2}
.fig .ftxt{fill:var(--ink);font-family:inherit}
/* Label sitting on a filled accent bar. Must come after .ftxt: same
   specificity, so source order decides which one wins. */
.fig .fon{fill:#FFFFFF}
.fig .fmut{fill:var(--muted);font-family:inherit}
.fig .facc{fill:var(--accent);font-family:inherit}
.fig .fline{stroke:var(--line);fill:none}
.fig .farr{stroke:var(--muted);fill:none}
.fig .fbad{fill:#A32020}
@media (prefers-color-scheme:dark){.fig .fbad{fill:#F09A9A}
.fig .fon{fill:#12142B}}

.fig .fbar{fill:var(--accent)}
.fig .fbar2{fill:var(--muted);opacity:.45}
.fig .ftrack{fill:var(--muted);opacity:.16}
.fig .fdash{stroke:var(--muted);stroke-dasharray:4 4;fill:none}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;margin:8px 0 34px}
.hero h1{margin:0 0 14px}
.hero p.lede{font-size:18px;line-height:1.62;margin:0 0 22px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero img{display:block;width:100%;height:auto;max-width:360px;margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--onaccent);
  border-radius:8px;padding:13px 24px;font-weight:700;font-size:15px;text-decoration:none}
.btn:hover{filter:brightness(.94)}
.btn.ghost{background:var(--bg);color:var(--accent);border:1px solid var(--accent)}
.btn svg{flex:none;width:17px;height:17px}
/* Pillar hero, arranged the way the Card Issuing page on verestro.com arranges
   its own: a tinted full width band carrying a faint hexagon pattern, the copy
   on a white card floating over it, and the product shot to the right with the
   card overlapping its left edge. The band breaks out of the 760px article
   column, so body gets overflow-x clipped against the 100vw arithmetic. */
body{overflow-x:hidden}
.heroband{position:relative;margin:-34px calc(50% - 50vw) 40px;padding:52px 0 56px;
  background:linear-gradient(115deg,#F4F1FF 0%,#FBFAFE 46%,#F1EDFF 100%)}
.heroband::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%231C1E3F' stroke-opacity='.07'%3E%3Cpath d='M60 2 90 19v35L60 71 30 54V19z'/%3E%3Cpath d='M0 54 30 71v35L0 123l-30-17V71z'/%3E%3Cpath d='M120 54l30 17v35l-30 17-30-17V71z'/%3E%3C/g%3E%3C/svg%3E");
  background-position:right -30px top -20px;background-repeat:repeat}
.heroband .hero{max-width:1080px;margin:0 auto;padding:0 22px;gap:0;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:center}
/* The right padding is the lane the card laps into. Copy stops at 42+118px from
   the panel edge, the card starts 88px inside it, so the overlap lands on empty
   white and never on a word. Change one of the two and check the other. */
.heroband .hero>div:first-child{position:relative;z-index:2;background:var(--bg);border-radius:18px;
  padding:40px 118px 38px 42px;box-shadow:0 18px 50px rgba(28,30,63,.10)}
.heroband .hero>div:last-child{position:relative;z-index:3;margin:0 -40px 0 -88px}
/* The card laps 40px past the hero's right padding. Above roughly 1150px the
   band has room for that on both sides. Below it the pull ran the card off
   the viewport and the homepage scrolled sideways by about 30px, which a
   width sweep found at 900, 1000 and 1100. The lap is decoration, so it is
   the part that gives way. */
@media (max-width:1180px){.heroband .hero>div:last-child{margin-right:0}}
/* Tilt stays, shadow does not: dropped on request 2026-09-10. The card now sits
   flat on the tinted band, so the only lifted object in the hero is the white
   copy panel. If a shadow ever comes back it has to be drop-shadow, not
   box-shadow: the render is RGBA with rounded corners and box-shadow would
   trace the square bounding box instead of the card. */
.heroband .hero img{transform:rotate(-6deg)}
/* Trimmed padding, so both calls to action sit on one line inside the card. */
.heroband .btn{padding:13px 20px}
.heroband .hero img{max-width:none;width:100%;margin:0}
.heroband h1{font-size:clamp(30px,4.2vw,42px)}
.heroband p.lede{color:var(--ink)}
@media (prefers-color-scheme:dark){
  .heroband{background:linear-gradient(115deg,#191B3A 0%,#12132A 46%,#1D1F45 100%)}
  .heroband::after{filter:invert(1);opacity:.28}
}
.needs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 8px;padding:0;list-style:none}
.needs li{margin:0}
.needs a{display:block;height:100%;border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px;
  background:var(--soft);text-decoration:none;color:inherit}
.needs a:hover{border-color:var(--accent)}
.needs .k{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--accent);margin:0 0 7px}
.needs .t{display:block;font-size:16px;font-weight:700;line-height:1.35;margin:0 0 7px}
.needs .d{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.cols>div{border:1px solid var(--line);border-radius:10px;padding:18px}
.cols h3{margin:0 0 10px;font-size:16px}
.cols ul{margin:0;padding-left:19px}
.cols li{margin:0 0 7px;font-size:15px;line-height:1.5}
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 46px;margin:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;
  border-radius:50%;background:var(--accent);color:var(--onaccent);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center}
.steps strong{display:block;margin:0 0 3px}
.steps span{color:var(--muted);font-size:15px;line-height:1.5}
.close{border:1px solid var(--accent);border-radius:12px;padding:26px;margin:30px 0 8px;text-align:center}
.close h2{margin:0 0 8px;border:0;padding:0}
.close p{margin:0 auto 18px;max-width:520px;color:var(--muted)}
.strip{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;background:var(--soft);padding:18px 20px;margin:26px 0}
.strip p{margin:0;font-size:15.5px;font-weight:700}
.strip .btn{flex:none}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:22px}
  .hero img{margin:0 auto;max-width:300px}
  .heroband{padding:30px 0 34px;margin-bottom:30px}
  .heroband .hero{gap:26px;grid-template-columns:1fr}
  .heroband .hero>div:first-child{padding:26px 24px 24px;box-shadow:0 10px 30px rgba(28,30,63,.10)}
  .heroband .hero>div:last-child{margin:0}
  .heroband .hero img{max-width:300px;margin:0 auto}
  .needs{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
}
@media (max-width:560px){.needs{grid-template-columns:1fr}}

figure.pic{margin:26px 0;padding:0}
figure.pic img{display:block;width:100%;height:auto;border-radius:10px}
figure.pic.plate{background:#F6F6F7;border:1px solid var(--line);border-radius:12px;padding:18px}
figure.pic.plate img{border-radius:0;max-width:240px;margin:0 auto}
figure.pic figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}
figure.pic.plate figcaption{margin-top:14px;text-align:center}
figure.pic.narrow img{max-width:520px;margin:0 auto}
/* Text left, picture right. The picture is cropped to 3:4 rather than shown at
   its own ratio, so the column keeps its height whatever file is dropped in.
   With no picture the block collapses back to ordinary full width flow, which
   is what happens while `_assets/restaurant.jpg` is missing. */
.twoup{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:30px;
  align-items:stretch;margin:26px 0 30px}
.twoup:not(:has(img)){display:block}
.twoup>div>h2:first-child,.twoup>div>h3:first-child{margin-top:0}
.twoup>div>p:last-child{margin-bottom:0}
/* The picture is cut to the height of the text beside it rather than to a fixed
   ratio: the figure stretches to the grid row, and the image takes whatever the
   caption leaves. min-height keeps it sane if the text ever gets very short. */
.twoup figure.pic{margin:0;display:flex;flex-direction:column}
.twoup figure.pic img{flex:1 1 0;min-height:190px;width:100%;aspect-ratio:auto;
  object-fit:cover;border-radius:14px;max-width:none}
@media (max-width:700px){
  .twoup{grid-template-columns:1fr;gap:20px}
  .twoup figure.pic img{flex:none;aspect-ratio:4/3;min-height:0;max-width:100%}
}
/* This site styles some of the same class names. Rolled back inside
   the wizard so the ported rules below decide. */
#ow .btn{align-items:revert;background:revert;border:revert;border-radius:revert;color:revert;display:revert;filter:revert;flex:revert;font-family:revert;font-size:revert;font-weight:revert;gap:revert;height:revert;letter-spacing:revert;padding:revert;text-decoration:revert;width:revert}
#ow .err{color:revert;display:revert;font-size:revert;margin-top:revert}
#ow .ghost{background:revert;border:revert;color:revert}
#ow .hero{align-items:revert;background:revert;border-radius:revert;box-shadow:revert;display:revert;flex-wrap:revert;font-size:revert;gap:revert;grid-template-columns:revert;height:revert;line-height:revert;margin:revert;margin-left:revert;max-width:revert;padding:revert;position:revert;transform:revert;width:revert;z-index:revert}
#ow .hint{color:revert;font-size:revert;margin:revert}
#ow .k{color:revert;display:revert;font-size:revert;font-weight:revert;letter-spacing:revert;margin:revert}
#ow .lede{color:revert;font-size:revert;line-height:revert;margin:revert}
#ow .note{background:revert;border:revert;border-left:revert;border-radius:revert;margin:revert;max-width:revert;padding:revert}
#ow .steps{align-items:revert;background:revert;border-radius:revert;color:revert;content:revert;counter-increment:revert;counter-reset:revert;display:revert;font-size:revert;font-weight:revert;height:revert;justify-content:revert;left:revert;line-height:revert;list-style:revert;margin:revert;padding:revert;position:revert;top:revert;width:revert}
#ow{--navy:#1C1E3F; --accent:#3054ED; --n1:#3A3B58; --n2:#63657D; --n3:#D3D3E0; --n4:#F6F6F7;
  --bg:#F6F6F7; --surface:#FFFFFF; --ink:#1C1E3F; --muted:#63657D; --line:#D3D3E0;
  --ok:#0F7B4F; --okbg:#E8F5EE; --warn:#8A5A00; --warnbg:#FFF4DC; --bad:#A32020; --badbg:#FCEBEB;
  --radius:14px; --shadow:0 1px 2px rgba(28,30,63,.06), 0 8px 24px rgba(28,30,63,.07);}
@media (prefers-color-scheme: dark){
#ow{--bg:#12132A; --surface:#1C1E3F; --ink:#F2F3F8; --muted:#A9ACC4; --line:#33365C;
    --n4:#232647; --ok:#6FD3A3; --okbg:#12352A; --warn:#F0C070; --warnbg:#3A2E14; --bad:#F09A9A; --badbg:#3A1E1E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);}
}
#ow *{box-sizing:border-box}
#ow h1,#ow h2,#ow h3,#ow h4{margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.25}
#ow p{margin:0}
#ow button,#ow input,#ow select,#ow textarea{font:inherit; color:inherit}
#ow a{color:var(--accent)}
#ow .wrap{max-width:1280px; margin:0 auto; padding:0 24px}
#ow /* ---------- masthead{background:var(--n4); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
#ow /* ---------- hero ---------- */
.hero{position:relative; padding:44px 0 48px; background:linear-gradient(115deg,#F4F1FF 0%,#FBFAFE 46%,#F1EDFF 100%)}
#ow .hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%231C1E3F' stroke-opacity='.07'%3E%3Cpath d='M60 2 90 19v35L60 71 30 54V19z'/%3E%3Cpath d='M0 54 30 71v35L0 123l-30-17V71z'/%3E%3Cpath d='M120 54l30 17v35l-30 17-30-17V71z'/%3E%3C/g%3E%3C/svg%3E"); background-position:right -30px top -20px; background-repeat:repeat}
@media (prefers-color-scheme: dark){
#ow .hero{background:linear-gradient(115deg,#1A1B36 0%,#15162E 46%,#1E1F3E 100%)}
#ow .hero::after{opacity:.3}
}
#ow .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:0; align-items:center}
#ow .herocard{position:relative; z-index:2; background:var(--surface); border-radius:18px; padding:40px 118px 38px 42px; box-shadow:0 18px 50px rgba(28,30,63,.10)}
#ow .hero h1{font-size:clamp(30px,4.2vw,42px); font-weight:900; color:var(--ink)}
#ow .hero .sub{color:var(--muted); margin-top:14px; font-size:18px; line-height:1.62; max-width:56ch}
#ow .heroblurb{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
#ow .chip{background:var(--n4); border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:12.5px; color:var(--muted)}
#ow .heroart{position:relative; z-index:3; margin:0 -24px 0 -88px}
#ow .heroart .cardsvg{max-width:none; box-shadow:none; transform:rotate(-6deg);
  filter:drop-shadow(0.6px 5px 9px rgba(28,30,63,.10)) drop-shadow(2.9px 27px 44px rgba(28,30,63,.20))}
#ow /* ---------- steps ---------- */
.steps{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:62px; z-index:30}
#ow .steps .wrap{display:flex; gap:6px; padding-top:10px; padding-bottom:10px; overflow-x:auto}
#ow .step{display:flex; align-items:center; gap:10px; padding:9px 16px; border-radius:999px; border:1px solid transparent; background:none; cursor:pointer; white-space:nowrap; color:var(--muted); font-size:14px}
#ow .step:hover{background:var(--n4)}
#ow .step .num{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; font-weight:700; background:var(--n4); color:var(--muted); border:1px solid var(--line); flex:none}
#ow .step[aria-current="step"]{color:var(--ink); background:var(--n4); border-color:var(--line); font-weight:700}
#ow .step[aria-current="step"] .num{background:var(--accent); color:#fff; border-color:var(--accent)}
#ow .step.done .num{background:var(--ok); color:#fff; border-color:var(--ok)}
#ow /* ---------- layout ---------- */
.main{padding:26px 0 60px}
#ow .grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:26px; align-items:start}
#ow .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin-bottom:18px}
#ow .panel > header{margin-bottom:16px}
#ow .panel h2{font-size:18px}
#ow .panel .hint{color:var(--muted); font-size:13.5px; margin-top:4px}
#ow .eyebrow{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--accent); margin-bottom:6px}
#ow /* ---------- fields ---------- */
.field{display:block; margin-bottom:14px}
#ow .field > span.lab{display:block; font-size:13px; font-weight:700; margin-bottom:6px}
#ow .field .help{font-size:12.5px; color:var(--muted); margin-top:5px}
#ow input[type=text],#ow input[type=number],#ow input[type=email],#ow input[type=date],#ow select,#ow textarea{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  transition:border-color .15s, box-shadow .15s;}
#ow input:focus,#ow select:focus,#ow textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(48,84,237,.18)}
#ow input::placeholder{color:var(--muted); opacity:.7}
#ow .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
#ow .row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
#ow /* ---------- option tiles ---------- */
.opts{display:grid; gap:12px}
#ow .opts.c2{grid-template-columns:1fr 1fr}
#ow .opts.c3{grid-template-columns:repeat(3,1fr)}
#ow .opt{position:relative; display:flex; flex-direction:column; border:1.5px solid var(--line); border-radius:12px; padding:14px 14px 14px 42px; cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s}
#ow .opt:hover{border-color:#8E9AD8}
#ow .opt input{position:absolute; opacity:0; width:0; height:0}
#ow .opt .dot{position:absolute; left:14px; top:16px; width:17px; height:17px; border-radius:50%; border:2px solid var(--n3); background:var(--surface)}
#ow .opt:has(input:checked){border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface))}
#ow .opt:has(input:checked) .dot{border-color:var(--accent); box-shadow:inset 0 0 0 4px var(--accent)}
#ow .opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(48,84,237,.25)}
#ow .opt .t{display:block; font-weight:700; font-size:14.5px; line-height:1.35}
#ow .opt .t .tag{display:inline-block; font-weight:400; font-size:11px; color:var(--accent); border:1px solid currentColor; border-radius:999px; padding:0 7px; margin-left:6px; vertical-align:1px}
#ow .opt .d{display:block; font-size:12.5px; color:var(--muted); margin-top:5px}
#ow .mcc{display:flex; flex-wrap:wrap; gap:5px; margin-top:10px}
#ow .mcc code{font-size:11px; background:var(--n4); border:1px solid var(--line); border-radius:5px; padding:2px 6px; color:var(--muted); font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
#ow .blocked{font-size:12px; color:var(--bad); margin-top:auto; padding-top:10px; display:flex; align-items:flex-start; gap:6px}
#ow .blocked svg{flex:none; margin-top:2px}
#ow /* swatches */
.swatches{display:flex; gap:10px; flex-wrap:wrap}
#ow .sw{width:44px; height:44px; border-radius:10px; border:2px solid var(--line); cursor:pointer; position:relative; padding:0}
#ow .sw[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 3px rgba(48,84,237,.2)}
#ow /* ---------- card lines table ---------- */
.lines{width:100%; border-collapse:collapse; margin-top:4px}
#ow .lines th{text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:none; color:var(--muted); font-weight:700; padding:0 10px 8px 0; white-space:nowrap}
#ow .lines td{padding:0 10px 10px 0; vertical-align:top}
#ow .lines td:last-child,#ow .lines th:last-child{padding-right:0; text-align:right}
#ow .linetotal{font-variant-numeric:tabular-nums; font-weight:700; padding-top:11px; white-space:nowrap}
#ow .iconbtn{background:none; border:1px solid var(--line); border-radius:9px; width:38px; height:42px; cursor:pointer; color:var(--muted); display:grid; place-items:center}
#ow .iconbtn:hover{border-color:var(--bad); color:var(--bad)}
#ow .iconbtn:disabled{opacity:.35; cursor:not-allowed}
#ow .addrow{margin-top:2px; background:none; border:1px dashed var(--line); border-radius:10px; padding:10px 14px; cursor:pointer; color:var(--accent); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:8px}
#ow .addrow:hover{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent)}
#ow /* ---------- notices ---------- */
.note{border-radius:10px; padding:11px 13px; font-size:13px; display:flex; gap:9px; align-items:flex-start; margin-top:12px; border:1px solid transparent}
#ow .note svg{flex:none; margin-top:2px}
#ow .note.ok{background:var(--okbg); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent)}
#ow .note.warn{background:var(--warnbg); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
#ow .note.bad{background:var(--badbg); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent)}
#ow .note.info{background:var(--n4); color:var(--muted); border-color:var(--line)}
#ow .note b{color:inherit}
#ow /* ---------- card preview ---------- */
.preview{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:18px}
#ow .previewhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px}
#ow .cardstage{display:grid; place-items:center; padding:6px 0 2px}
#ow .cardsvg{width:100%; max-width:340px; height:auto; border-radius:16px; box-shadow:0 10px 30px rgba(28,30,63,.22)}
#ow .badgerow{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px}
#ow .badge{font-size:11.5px; border:1px solid var(--line); background:var(--n4); border-radius:999px; padding:4px 10px; color:var(--muted)}
#ow .badge.on{border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent)}
#ow /* ---------- summary rail ---------- */
.rail{position:sticky; top:118px}
#ow .sumcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
#ow .sumcard h3{padding:16px 18px 12px; font-size:15px; border-bottom:1px solid var(--line)}
#ow .sumbody{padding:14px 18px}
#ow .sline{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:13.5px}
#ow .sline .k{color:var(--muted)}
#ow .sline .v{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
#ow .sline.muted .v{color:var(--muted); font-weight:400}
#ow .sdiv{height:1px; background:var(--line); margin:10px 0}
#ow .stotal{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 18px; background:var(--n4); border-top:1px solid var(--line)}
#ow .stotal .k{font-size:12.5px; color:var(--muted); font-weight:700}
#ow .stotal .v{font-size:21px; font-weight:900; font-variant-numeric:tabular-nums}
#ow .terms{border-top:1px solid var(--line); padding:14px 18px; background:var(--n4)}
#ow .terms summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent); list-style:none}
#ow .terms summary::-webkit-details-marker{display:none}
#ow .terms summary::before{content:"+ "; font-weight:900}
#ow .terms[open] summary::before{content:"- "}
#ow .terms .tgrid{display:grid; gap:10px; margin-top:12px}
#ow .terms label{font-size:12px; font-weight:700; display:block; margin-bottom:4px; color:var(--muted)}
#ow .terms input{padding:8px 10px; font-size:13px}
#ow /* ---------- nav ---------- */
.nav{display:flex; gap:12px; justify-content:space-between; margin-top:6px}
#ow .btn{border-radius:10px; padding:13px 24px; font-weight:700; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:transform .06s, background .15s}
#ow .btn:active{transform:translateY(1px)}
#ow .btn.primary{background:var(--accent); color:#fff}
#ow .btn.primary:hover{background:#2543CC}
#ow .btn.ghost{background:transparent; border-color:var(--line); color:var(--ink)}
#ow .btn.ghost:hover{border-color:var(--n2)}
#ow .btn:disabled{opacity:.45; cursor:not-allowed}
#ow /* ---------- review ---------- */
.review{display:grid; gap:0}
#ow .rrow{display:grid; grid-template-columns:190px 1fr auto; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; align-items:baseline}
#ow .rrow:last-child{border-bottom:none}
#ow .rrow .k{color:var(--muted); font-size:13px}
#ow .rrow .edit{background:none; border:none; color:var(--accent); cursor:pointer; font-size:12.5px; font-weight:700; padding:0}
#ow .next{display:grid; gap:10px; counter-reset:n}
#ow .nextit{display:flex; gap:12px; align-items:flex-start; font-size:14px}
#ow .nextit .n{counter-increment:n; flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center}
#ow .nextit .n::before{content:counter(n)}
#ow .err{color:var(--bad); font-size:12.5px; margin-top:5px; display:none}
#ow .field.invalid input,#ow .field.invalid select{border-color:var(--bad)}
#ow .field.invalid .err{display:block}
#ow .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:1040px){
#ow .grid{grid-template-columns:1fr}
#ow .rail{position:static}
#ow .hero .wrap{grid-template-columns:1fr; gap:26px}
#ow .heroart{order:-1; margin:0}
#ow .heroart .cardsvg{display:block; max-width:340px; margin:0 auto}
#ow .herocard{padding:30px 26px}
#ow .opts.c3{grid-template-columns:1fr}
#ow .opts.c2{grid-template-columns:1fr}
}
@media (max-width:620px){
#ow .row2,#ow .row3{grid-template-columns:1fr}
#ow .steps{top:auto; position:static}
#ow .rrow{grid-template-columns:1fr; gap:2px}
#ow .hero{padding:20px 0 26px}
#ow .hero .wrap{gap:18px}
#ow .hero .sub{font-size:15.5px; margin-top:10px}
#ow .heroblurb{gap:8px; margin-top:14px}
#ow .chip{font-size:11.5px; padding:5px 10px}
#ow .heroart .cardsvg{max-width:265px}
#ow .herocard{padding:24px 20px}
#ow .heroblurb .chip:nth-child(2),#ow .heroblurb .chip:nth-child(3),#ow .heroblurb .chip:nth-child(4){display:none}
#ow /* card lines stack into blocks instead of a cramped table */
  .lines,#ow .lines tbody,#ow .lines tr,#ow .lines td{display:block; width:100%}
#ow .lines thead{display:none}
#ow .lines tr{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px; position:relative}
#ow .lines td{padding:0 0 10px 0}
#ow .lines td:last-child{padding:0; position:absolute; top:10px; right:10px; width:auto}
#ow .lines td[data-l]::before{content:attr(data-l); display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px}
#ow .lines td[data-l=""]::before{display:none}
#ow .lines td.linetotal{display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; border-top:1px solid var(--line)}
#ow .lines td.linetotal::before{margin-bottom:0}
#ow .lines td:first-child{padding-right:52px}
}

/* Order wizard, ported from the standalone order page at revision 12. Scoped to
   #ow throughout: the source uses class names the site also uses. The block
   borrows the free space beside the 1000px column so the two column layout and
   the 340px rail survive, and gives it back as the window narrows. */
#ow{margin-left:calc(-1 * clamp(0px,(100vw - 1000px) / 2 - 22px,140px));
    margin-right:calc(-1 * clamp(0px,(100vw - 1000px) / 2 - 22px,140px));
    color:var(--ink)}
#ow *{box-sizing:border-box}
#ow .hero{margin-top:6px;border-radius:16px;overflow:hidden}
#ow .steps{position:sticky;top:0;z-index:30}
#ow .main{padding:20px 0 0}
#ow .hero .lede{color:var(--muted);margin-top:14px;font-size:18px;line-height:1.62;max-width:56ch}
@media (max-width:620px){#ow .hero .lede{font-size:15.5px;margin-top:10px}}