/* ==========================================================================
   MyMagiCanvas — landing page
   Brand: #EDE8D0 (sand) · #B3C99C (sage) · white ground
   ========================================================================== */

:root{
  --sand:#EDE8D0;
  --sand-soft:#F7F4E8;
  --sand-deep:#DFD7B4;
  --sage:#B3C99C;
  --sage-deep:#7F9A67;
  --sage-ink:#4A5C3A;

  --ink:#1D1E1A;
  --ink-2:#4A4C45;
  --ink-3:#7A7C72;
  --line:#E7E5DC;
  --white:#fff;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sh-1:0 1px 2px rgba(29,30,26,.05), 0 6px 18px rgba(29,30,26,.05);
  --sh-2:0 2px 6px rgba(29,30,26,.06), 0 18px 48px rgba(29,30,26,.09);
  --sh-3:0 30px 70px rgba(29,30,26,.16);

  --f-head:'Fraunces', Georgia, serif;
  --f-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad:clamp(20px, 5vw, 40px);
  --sec:clamp(64px, 9vw, 120px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important; transition-duration:.01ms!important} }

body{
  margin:0; background:var(--white); color:var(--ink);
  font:400 17px/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg,video,canvas{display:block; max-width:100%}
img{height:auto}
button,input,select{font:inherit; color:inherit}

.wrap{width:min(1240px, 100% - var(--pad)*2); margin-inline:auto}
.wrap--narrow{width:min(820px, 100% - var(--pad)*2)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

:focus-visible{outline:2.5px solid var(--sage-deep); outline-offset:3px; border-radius:6px}

/* ───────────────────────────────────────────────────────── typography */
h1,h2,h3{font-family:var(--f-head); font-weight:500; letter-spacing:-.018em; margin:0; line-height:1.08}
h1{font-size:clamp(2.6rem, 6.2vw, 4.6rem); line-height:1.02; letter-spacing:-.032em}
h1 em{font-style:italic; color:var(--sage-deep)}
h2{font-size:clamp(1.95rem, 3.9vw, 3rem)}
h3{font-size:1.16rem; line-height:1.3}
p{margin:0}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.745rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage-ink); margin:0 0 18px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sage); box-shadow:0 0 0 4px rgba(179,201,156,.28)}
.lede{font-size:clamp(1.03rem,1.35vw,1.2rem); color:var(--ink-2); line-height:1.66; max-width:56ch}
.hint{font-size:.845rem; color:var(--ink-3); line-height:1.55; margin-top:10px}

.sh{margin-bottom:clamp(36px,5vw,58px); max-width:64ch}
.sh--center{margin-inline:auto; text-align:center}
.sh__sub{margin-top:16px; color:var(--ink-2); font-size:1.04rem; line-height:1.62}
.sh--center .sh__sub{margin-inline:auto; max-width:58ch}

.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(8px,2vw,24px)}
.sec--cream{background:var(--sand-soft)}
.sec--cfg{background:linear-gradient(180deg,#fff 0%, var(--sand-soft) 12%, var(--sand-soft) 88%, #fff 100%)}

/* ───────────────────────────────────────────────────────────── buttons */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  padding:14px 26px; border-radius:999px; cursor:pointer;
  font-size:.955rem; font-weight:600; letter-spacing:-.005em; text-decoration:none;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, background .16s, color .16s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--dark{--bg:var(--ink); --bd:var(--ink); --fg:#fff}
.btn--ghost{--bg:transparent; --bd:var(--line); --fg:var(--ink)}
.btn--ghost:hover{--bd:var(--sage-deep); --bg:rgba(179,201,156,.1)}
.btn--lg{padding:17px 34px; font-size:1.02rem}
.btn--sm{padding:9px 17px; font-size:.86rem}
.btn--block{width:100%}
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

.lnk{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  font-size:.85rem; font-weight:500; color:var(--ink-3);
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
  white-space:nowrap; flex:none;
}
.lnk:hover{color:var(--sage-ink); border-color:var(--sage)}

/* ────────────────────────────────────────────────────────────── header */
.hdr{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s;
}
.hdr.is-stuck{border-color:var(--line); box-shadow:0 1px 20px rgba(29,30,26,.045)}
.hdr__in{display:flex; align-items:center; gap:24px; height:70px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--f-head); font-size:1.12rem; font-weight:600; letter-spacing:-.02em}
.brand em{font-style:italic; font-weight:500; color:var(--sage-deep)}
.brand__mark{width:30px; height:30px; color:#B08C5A; flex:none}
.nav{display:flex; gap:22px; margin-left:auto}
.nav a{color:var(--ink-2); text-decoration:none; font-size:.92rem; font-weight:500; position:relative; padding:4px 0}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--sage-deep); transition:right .22s ease}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.hdr__cta{flex:none}
@media (max-width:920px){ .nav{display:none} .hdr__cta{margin-left:auto} }

/* ──────────────────────────────────────────────────────────────── hero */
.hero{padding-block:clamp(40px,6vw,80px) clamp(30px,4vw,50px); position:relative; overflow:hidden}
.hero::before{
  content:''; position:absolute; inset:auto -10% 8% 42%; height:70%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(237,232,208,.85), transparent 70%);
  filter:blur(10px); pointer-events:none; z-index:-1;
}
.hero__in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero__copy h1{margin-bottom:26px}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

.trust{list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; margin:30px 0 0; padding:0}
.trust li{display:flex; align-items:center; gap:8px; font-size:.895rem; color:var(--ink-2)}
.trust svg{width:16px; height:16px; color:var(--sage-deep); flex:none}
.trust b{color:var(--ink); font-weight:600}

.hero__art{margin:0; position:relative}
.hero__art img{border-radius:var(--r-xl); box-shadow:var(--sh-3); aspect-ratio:1; object-fit:cover}
.hero__tag{
  position:absolute; left:-14px; bottom:26px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:11px 20px; font-size:.86rem; color:var(--ink-2); box-shadow:var(--sh-2); white-space:nowrap;
}
.hero__tag strong{color:var(--ink)}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__art{order:-1}
  .hero__tag{left:auto; right:14px; bottom:14px}
}

/* payment badges */
.pay{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:26px}
.pay--center{justify-content:center}
.pay__lbl{font-size:.78rem; color:var(--ink-3); margin-right:4px; letter-spacing:.01em}
.pay__b{
  display:inline-flex; align-items:center; gap:5px;
  height:27px; padding:0 10px; border-radius:6px;
  font-size:.705rem; font-weight:700; letter-spacing:.02em;
  border:1px solid rgba(29,30,26,.12); user-select:none;
}
.pay__mc{display:inline-flex; margin-right:1px}
.pay__mc i{width:11px; height:11px; border-radius:50%; display:block}
.pay__mc i:first-child{background:#EB001B}
.pay__mc i:last-child{background:#F79E1B; margin-left:-4px; mix-blend-mode:multiply}
.pay--sm{margin-top:14px; gap:6px}
.pay--sm .pay__b{height:23px; font-size:.65rem; padding:0 8px}

/* ─────────────────────────────────────────────────────────── gallery */
/* Thumbnail rail on the left, big picture on the right — like a shop
   listing. The rail is two columns wide so all twelve are reachable
   without scrolling. */
.gal{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:18px;
  width:min(100%, 880px); margin-inline:auto; align-items:start;
}
/* the big picture comes first in the markup, but sits on the right */
.gal__stage{grid-column:2; grid-row:1}
.gal__strip{grid-column:1; grid-row:1}
.gal__stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--sand-soft); aspect-ratio:1/1; box-shadow:var(--sh-1);
}
.gal__stage img, .gal__stage video{width:100%; height:100%; object-fit:cover}
.gal__stage video{background:#111; object-fit:contain}

/* prev / next */
.gal__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(29,30,26,.14);
  transition:background .15s, transform .15s, opacity .15s;
}
.gal__nav:hover{background:#fff; transform:translate(0,-50%) scale(1.06)}
.gal__nav svg{width:17px; height:17px; color:var(--ink)}
.gal__nav--prev{left:14px}
.gal__nav--next{right:14px}
.gal__count{
  position:absolute; right:14px; bottom:14px; z-index:2;
  background:rgba(29,30,26,.72); color:#fff; border-radius:999px;
  padding:5px 12px; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  backdrop-filter:blur(6px);
}

.gal__strip{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:2px}
.gal__t{
  position:relative; padding:0; cursor:pointer; width:100%; height:104px;
  border:1.5px solid var(--line); border-radius:11px; overflow:hidden; background:var(--sand-soft);
  transition:border-color .16s, transform .16s;
}
.gal__t img{width:100%; height:100%; object-fit:cover}
.gal__t:hover{transform:translateY(-1px); border-color:var(--sage)}
.gal__t[aria-selected="true"]{border-color:var(--ink); box-shadow:0 0 0 2px rgba(29,30,26,.1)}
.gal__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.34));
}
.gal__play svg{width:20px; height:20px; color:#fff; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}

@media (max-width:760px){
  .gal{grid-template-columns:1fr; gap:12px}
  .gal__stage{grid-column:1; grid-row:1}
  .gal__strip{grid-column:1; grid-row:2}
  .gal__strip{
    display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
    padding-bottom:8px; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .gal__t{flex:0 0 68px; width:68px; height:68px; scroll-snap-align:start}
  .gal__nav{width:36px; height:36px}
  .gal__nav--prev{left:8px} .gal__nav--next{right:8px}
}

/* ───────────────────────────────────────────────────────────── steps */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,34px); counter-reset:s}
.steps li{position:relative; padding-top:22px; border-top:1.5px solid var(--line)}
.steps__n{
  position:absolute; top:-15px; left:0;
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--sage); color:#2C3A22; font-size:.82rem; font-weight:700;
  box-shadow:0 0 0 5px #fff;
}
.steps h3{margin:12px 0 8px}
.steps p{color:var(--ink-2); font-size:.945rem; line-height:1.6}
@media (max-width:860px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════ CONFIGURATOR */
.cfg{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(28px,4vw,60px); align-items:start}
@media (max-width:1040px){ .cfg{grid-template-columns:1fr} }

.cfg__viewport{position:sticky; top:86px}
@media (max-width:1040px){ .cfg__viewport{position:static} }

.stage{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3.2vw,44px); box-shadow:var(--sh-1);
  display:grid; place-items:center; min-height:420px;
}
.stage__scene{
  position:relative; display:grid; place-items:center;
  width:100%; max-width:430px;
}
/* A fixed box the size of the largest canvas, so S and M sit inside it at
   their real proportions instead of every size filling the same space. */
.stage__scene:not(.is-easel){aspect-ratio:5/6}
/* .rig is exactly as tall as the framed canvas, so the easel — which is
   positioned against it — always lands with its ledge under the canvas. */
.rig{position:relative; width:var(--cw, 100%); container-type:inline-size}

/* ── the easel ──
   In easel mode the easel sets the size of the scene and the canvas is
   placed on its ledge, so the whole stand is visible and the canvas reads
   at the right scale against it — the way it looks on a real easel. */
.easel{width:100%; pointer-events:none}
.easel img{width:100%; height:auto; filter:drop-shadow(0 18px 24px rgba(29,30,26,.13))}


.stage__scene.is-easel{position:relative}
.stage__scene.is-easel .rig{
  position:absolute; left:50.6%; translate:-50% 0;
  bottom:54.43%;   /* the ledge in the photograph is 45.57% down the easel */
  width:var(--cw, 50%);   /* drawn to scale against the stand; the ledge
                             spans 61.5%, and the largest canvas stays under it */
  z-index:1;
}

.frame{
  position:relative; z-index:1; width:100%;
  transition:padding .28s cubic-bezier(.2,.7,.3,1), background .28s, box-shadow .28s;
  border-radius:3px;
}
/* The framed option uses a photograph of the real moulding, sliced as a
   border-image so the corners stay square and the wood never stretches out
   of shape whatever the canvas ratio. The slice numbers are the moulding
   thickness in the source file, measured off the photo. */
.frame.is-framed{
  /* A floater frame: the moulding, then a dark recess, then the canvas. The
     slice deliberately reaches past the wood and takes the shadow gap with
     it, otherwise the canvas would sit flush against the timber, which this
     frame never does. Measured off the photograph:
     228px left, 234 top, 204 right, 209 bottom, halved with the file.

     The slices are written as percentages of the file rather than as pixels,
     so a browser that scales the image for a dense screen still cuts it in
     the same places. There is no backstop behind the moulding: the canvas
     is a child of this element, so anything drawn around it lands on top
     of the border rather than under it, and a background would fill the
     whole border box and show at the outer edge. The file carries its own
     margin instead — the recess runs a good way past every slice line, so
     a renderer that samples across one finds shadow there. */
  --fw: 8.55cqw;
  padding: 0;
  background: none;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  border-left-width:   var(--fw);
  border-top-width:    calc(var(--fw) * 1.0263);
  border-right-width:  calc(var(--fw) * 0.8947);
  border-bottom-width: calc(var(--fw) * 0.9167);
  border-image-source: url('../img/frame-oak.png');
  border-image-source: image-set(
      url('../img/frame-oak.webp') type('image/webp'),
      url('../img/frame-oak.png')  type('image/png'));
  border-image-slice: 6.890% 7.646% 6.125% 8.546%;
  border-image-repeat: stretch;
  filter: drop-shadow(0 16px 26px rgba(29,30,26,.15));
}


.sheet{
  position:relative; width:100%; overflow:hidden;
  background:#FCFCFA;
  aspect-ratio:var(--ar, .75);
  box-shadow:0 14px 34px rgba(29,30,26,.14), 0 1px 0 rgba(0,0,0,.06);
  transition:aspect-ratio .3s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.sheet__prints{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none;
}
.sheet__tree{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:fill; pointer-events:none; z-index:0;
}
/* The lettering hangs from the foot of the canvas: the date stays fixed
   one physical centimetre above the bottom edge. The names may be dragged
   independently without changing the date position. */
.sheet__text{
  position:absolute; left:6%; right:6%; z-index:2;
  bottom:var(--date-bottom, 4%);
  text-align:center; line-height:1;
}
.sheet__names{
  color:#141414; line-height:1.14; white-space:nowrap;
  font-size:var(--fs-names, 9cqw);
  font-family:var(--f-names, 'Dancing Script', cursive);
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
  will-change:transform; position:relative; display:inline-block;
}
.sheet__names-text{pointer-events:none}
.sheet__names.is-dragging{cursor:grabbing}
.sheet__names:focus-visible{outline:2px dashed rgba(42,42,42,.45); outline-offset:.18em}
.sheet__names-resize{
  position:absolute; right:-.38em; bottom:-.38em;
  width:.72em; height:.72em; min-width:14px; min-height:14px;
  padding:0; border:1.5px solid #fff; border-radius:50%;
  background:#2A2A2A; box-shadow:0 1px 4px rgba(0,0,0,.22);
  cursor:nwse-resize; touch-action:none; opacity:.82;
}
.sheet__names:hover .sheet__names-resize,
.sheet__names:focus-within .sheet__names-resize,
.sheet__names.is-sizing .sheet__names-resize{opacity:1}
.sheet__names.is-sizing{cursor:nwse-resize}

/* Alignment grid appears only while the names are being moved or resized. */
.sheet.is-aligning::after{
  content:'';
  position:absolute; inset:0; z-index:8; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(42,42,42,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42,42,42,.11) 1px, transparent 1px),
    linear-gradient(to right, transparent calc(50% - .7px), rgba(42,42,42,.45) calc(50% - .7px), rgba(42,42,42,.45) calc(50% + .7px), transparent calc(50% + .7px));
  background-size:10% 10%, 10% 10%, 100% 100%;
}
.sheet.is-aligning.is-centred::after{
  background-image:
    linear-gradient(to right, rgba(42,42,42,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42,42,42,.11) 1px, transparent 1px),
    linear-gradient(to right, transparent calc(50% - 1px), rgba(91,126,65,.8) calc(50% - 1px), rgba(91,126,65,.8) calc(50% + 1px), transparent calc(50% + 1px));
}
.name-amp-fallback{font-family:'Cormorant Garamond',serif}

.sheet__date{
  margin-top:.5em; color:#2A2A2A; white-space:nowrap;
  font-size:var(--fs-date, 2.5cqw);
  font-family:var(--f-date, var(--f-body)); font-weight:var(--fw-date, 400); letter-spacing:.03em;
}

.sheet{container-type:inline-size}
.sheet__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

.stage__scale{margin-top:20px; font-size:.8rem; color:var(--ink-3); text-align:center; letter-spacing:.02em}
.stage__bar{display:flex; justify-content:center; margin-top:12px; padding:0 4px}
.stage__note{font-size:.875rem; color:var(--ink-2); text-align:center}
.stage__note b{color:var(--ink); font-weight:600}

/* ── control panel ── */
.cfg__panel{display:flex; flex-direction:column; gap:22px}
.fld{border:0; margin:0; padding:0}
.fld legend{
  font-family:var(--f-head); font-size:1.04rem; font-weight:600; letter-spacing:-.01em;
  padding:0; margin-bottom:14px; color:var(--ink);
}
.fld legend small{font-family:var(--f-body); font-weight:400; font-size:.8rem; color:var(--ink-3); margin-left:6px}
.fld__lbl{font-size:.855rem; color:var(--ink-2); margin:16px 0 10px}
.fld__lbl small{color:var(--ink-3)}

.opts{display:grid; gap:9px}
.opts--2{grid-template-columns:repeat(2,1fr)}
.opts--3{grid-template-columns:repeat(3,1fr)}
.opts--5{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.opt{
  position:relative; cursor:pointer; text-align:left;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:12px 13px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.opt:hover{border-color:var(--sage)}
.opt[aria-pressed="true"]{border-color:var(--ink); background:#fff; box-shadow:inset 0 0 0 1px var(--ink)}
.opt__t{display:block; font-size:.94rem; font-weight:600; letter-spacing:-.01em}
.opt__s{display:block; font-size:.775rem; color:var(--ink-3); margin-top:3px; line-height:1.4}
.opt__p{display:block; font-size:.79rem; color:var(--sage-ink); font-weight:600; margin-top:5px}
.price-tag{
  display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:var(--sand-soft);color:var(--sage-ink);font-size:.72rem;font-weight:700;white-space:nowrap
}
.opts--5 .opt{padding:10px 11px; text-align:center}
.opts--5 .opt__t{font-size:.85rem; font-weight:500}

.swtch{display:flex; gap:13px; align-items:flex-start; cursor:pointer; margin-top:11px; padding:13px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; transition:border-color .15s}
.swtch:hover{border-color:var(--sage)}
.swtch:has(input:checked){border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.swtch input{position:absolute; opacity:0; width:0; height:0}
.swtch__ui{flex:none; width:42px; height:24px; border-radius:999px; background:#DDDCD4; position:relative; transition:background .18s; margin-top:2px}
.swtch__ui::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:translate .18s cubic-bezier(.2,.7,.3,1)}
.swtch input:checked + .swtch__ui{background:var(--sage-deep)}
.swtch input:checked + .swtch__ui::after{translate:18px 0}
.swtch input:focus-visible + .swtch__ui{outline:2.5px solid var(--sage-deep); outline-offset:3px}
.swtch__txt strong{display:block; font-size:.92rem; font-weight:600}
.swtch__txt small{display:block; font-size:.79rem; color:var(--ink-3); margin-top:3px; line-height:1.45}

.grid2{display:grid; grid-template-columns:1.25fr .85fr; gap:11px}
@media (max-width:480px){ .grid2{grid-template-columns:1fr} }
.inp{display:block}
.inp span{display:block; font-size:.8rem; color:var(--ink-2); margin-bottom:6px}
.inp small{color:var(--ink-3)}
.inp input{
  width:100%; padding:12px 13px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font-size:.95rem; transition:border-color .15s;
}
.inp input:hover{border-color:var(--sage)}
.inp input:focus{border-color:var(--ink); outline:none; box-shadow:inset 0 0 0 1px var(--ink)}
.inp select{
  width:100%; min-height:46px; padding:10px 38px 10px 12px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--ink); font:inherit; cursor:pointer;
}
.inp select:focus{border-color:var(--ink); outline:none; box-shadow:inset 0 0 0 1px var(--ink)}
.buy__country{display:grid; gap:7px; margin:4px 0 16px}
.buy__country > span{font-size:.855rem; color:var(--ink-2)}
.buy__country > small{font-size:.75rem; line-height:1.45; color:var(--ink-3)}
.buy__phone{display:grid;gap:7px;margin:0 0 16px}
.buy__phone > span{font-size:.855rem;color:var(--ink-2)}
.buy__phone > small{font-size:.75rem;line-height:1.45;color:var(--ink-3)}
.phone-field{display:flex;align-items:stretch}
.phone-field__prefix{
  display:flex!important;align-items:center;justify-content:center;min-width:62px;
  margin:0!important;padding:0 12px;border:1.5px solid var(--line);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--sand-soft);
  color:var(--ink)!important;font-size:.95rem!important;font-weight:600
}
.phone-field input{border-radius:0 var(--r-sm) var(--r-sm) 0!important}

.fonts{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px}
.font{
  cursor:pointer; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:10px 8px 8px; text-align:center; transition:border-color .15s, box-shadow .15s; overflow:hidden;
}
.font:hover{border-color:var(--sage)}
.font[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.font__s{display:block; font-size:1.24rem; line-height:1.25; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.font__n{display:block; font-size:.7rem; color:var(--ink-3); margin-top:4px; letter-spacing:.04em}

.inks{display:grid; grid-template-columns:repeat(auto-fit,minmax(58px,1fr)); gap:8px}
.ink{
  cursor:pointer; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:8px 4px 6px; display:grid; justify-items:center; gap:5px;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.ink:hover{border-color:var(--sage); transform:translateY(-1px)}
.ink[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.ink[aria-disabled="true"]{opacity:.34; cursor:not-allowed}
.ink[aria-disabled="true"]:hover{transform:none; border-color:var(--line)}
.ink__sw{width:26px; height:32px; border-radius:50% 50% 48% 48%/58% 58% 42% 42%; box-shadow:inset 0 -2px 5px rgba(0,0,0,.14)}
.ink__n{font-size:.68rem; font-weight:700; color:var(--ink-2); letter-spacing:.03em}
.ink__price{font-size:.61rem;line-height:1;color:var(--sage-ink);font-weight:700;min-height:.7rem}
.ink__price.is-extra{color:#8A5A16}
.ink[aria-pressed="true"] .ink__n{color:var(--ink)}

.pals{display:flex; flex-wrap:wrap; gap:7px}
.pal{
  cursor:pointer; background:#fff; border:1.5px solid var(--line); border-radius:999px;
  padding:6px 13px 6px 7px; display:inline-flex; align-items:center; gap:8px;
  font-size:.815rem; color:var(--ink-2); transition:border-color .15s, color .15s;
}
.pal:hover{border-color:var(--sage-deep); color:var(--ink)}
.pal[aria-pressed="true"]{border-color:var(--ink); color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.pal__d{display:inline-flex}
.pal__d i{width:13px; height:13px; border-radius:50%; display:block; box-shadow:0 0 0 1.5px #fff}
.pal__d i + i{margin-left:-5px}

.rng{display:block; margin-top:14px}
.rng__top{display:flex; justify-content:space-between; align-items:baseline; font-size:.855rem; color:var(--ink-2); margin-bottom:9px}
.rng__top output{font-weight:700; color:var(--ink); font-size:1rem}
.rng input{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:99px;
  background:linear-gradient(90deg, var(--sage-deep) var(--pct,40%), var(--line) var(--pct,40%));
  cursor:pointer;
}
.rng input::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid var(--sage-deep); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:grab;
}
.rng input::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:#fff;
  border:2px solid var(--sage-deep); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:grab;
}

.reco{
  margin-top:13px; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--sand-soft); border:1px solid var(--sand-deep);
  font-size:.865rem; line-height:1.5; color:var(--ink-2);
}
.reco.is-ok{background:rgba(179,201,156,.16); border-color:rgba(127,154,103,.4)}
.reco b{color:var(--ink); font-weight:600}
.reco__go{
  display:inline-block; margin-left:4px; padding:4px 11px;
  background:var(--ink); color:#fff; border:0; border-radius:999px;
  font-size:.79rem; font-weight:600; cursor:pointer;
  transition:opacity .15s;
}
.reco__go:hover{opacity:.84}

/* the size the guest list points at */
.opt.is-reco::after{
  content:'Recommended'; position:absolute; top:-8px; right:8px;
  background:var(--sage); color:#2C3A22; border-radius:999px;
  padding:2px 8px; font-size:.62rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; white-space:nowrap;
}

/* ── consent ── */
.consent{
  margin:18px 0 14px; padding:14px 15px;
  background:var(--sand-soft); border:1px solid var(--sand-deep); border-radius:var(--r-sm);
  display:grid; gap:12px;
}
.consent__row{display:flex; gap:11px; align-items:flex-start; cursor:pointer}
.consent__row input{
  flex:none; width:19px; height:19px; margin:1px 0 0; cursor:pointer;
  accent-color:var(--sage-deep);
}
.consent__row span{font-size:.815rem; line-height:1.55; color:var(--ink-2)}
.consent__row a{color:var(--ink); font-weight:600; text-underline-offset:2px}
.consent__opt{display:block; margin-top:3px; color:var(--ink-3); font-weight:400; font-style:italic}
.buy__err--soft{background:#FBF7EC; border-color:var(--sand-deep); color:#7A6A3A}
.btn.is-locked{opacity:.5}

/* ── buy box ── */
.buy{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px); box-shadow:var(--sh-2); margin-top:6px;
}
.buy__row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px}
.buy__what{font-size:.99rem; font-weight:600; letter-spacing:-.01em}
.buy__ship{font-size:.79rem; color:var(--ink-3); margin-top:4px}
.buy__price{font-family:var(--f-head); font-size:clamp(1.7rem,3vw,2.15rem); font-weight:600; letter-spacing:-.02em; white-space:nowrap}
.buy__price small{font-size:.9rem; font-family:var(--f-body); font-weight:400; color:var(--ink-3)}
.buy__price.is-quote{font-size:1.15rem; color:var(--ink-2)}
.buy__err{
  margin-top:11px; padding:11px 13px; border-radius:var(--r-sm);
  background:#FDF3EE; border:1px solid #F0D5C8; color:#8A3E25; font-size:.84rem; line-height:1.5;
}

.rec{margin-top:18px; border-top:1px solid var(--line); padding-top:14px}
.rec summary{cursor:pointer; font-size:.88rem; font-weight:600; list-style:none; display:flex; align-items:center; gap:6px}
.rec summary::-webkit-details-marker{display:none}
.rec summary::before{content:'+'; font-size:1.05rem; color:var(--sage-deep); font-weight:700; width:14px}
.rec[open] summary::before{content:'–'}
.rec summary span{font-weight:400; color:var(--ink-3)}
.rec pre{
  margin:13px 0 0; padding:14px; border-radius:var(--r-sm);
  background:var(--sand-soft); border:1px solid var(--sand-deep);
  font:400 .815rem/1.75 ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  white-space:pre-wrap; word-break:break-word; color:var(--ink-2);
}
.rec__btns{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}

/* ─────────────────────────────────────────────────── two-column blocks */
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,68px); align-items:center}
.two--gap{gap:clamp(18px,2.4vw,30px)}
.two--rev .two__art{order:-1}
.two__art{margin:0}
.two__art img{border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.two__copy h2{margin-bottom:20px}
.lede--tight{margin-bottom:24px; font-size:1rem}
@media (max-width:880px){ .two{grid-template-columns:1fr} .two--rev .two__art{order:0} }

.ticks{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:14px}
.ticks li{position:relative; padding-left:30px; color:var(--ink-2); font-size:.97rem; line-height:1.58}
.ticks li::before{
  content:''; position:absolute; left:0; top:.42em; width:18px; height:18px; border-radius:50%;
  background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.3l2.8 2.8 6-6.2' fill='none' stroke='%232C3A22' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.ticks strong{color:var(--ink); font-weight:600}

.film video{width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-2); background:#111; aspect-ratio:9/16; object-fit:cover; max-height:640px; margin-inline:auto}
.sec--film{background:var(--sand-soft)}

/* ─────────────────────────────────────────────────────────────── cards */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px)}
@media (max-width:860px){ .cards3{grid-template-columns:1fr} }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.card img{aspect-ratio:4/3; object-fit:cover; width:100%}
.card h3{margin:20px 22px 8px}
.card p{margin:0 22px 22px; color:var(--ink-2); font-size:.925rem; line-height:1.58}

.szc{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:10px}
.szc__h{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.szc__l{font-family:var(--f-head); font-size:2rem; font-weight:600; line-height:1}
.szc__p{font-size:.92rem; font-weight:600; color:var(--sage-ink)}
.szc__cm{font-size:1.02rem; font-weight:600; letter-spacing:-.01em}
.szc__in{font-size:.85rem; color:var(--ink-3)}
.szc__cap{font-size:.89rem; color:var(--ink-2); margin-top:2px; padding-top:12px; border-top:1px solid var(--line)}
.szc__cap b{color:var(--ink)}
.szc button{margin-top:auto}

.figwide{margin:clamp(28px,4vw,48px) 0 0}
.figwide img{border-radius:var(--r-lg); box-shadow:var(--sh-1); width:100%}

/* ──────────────────────────────────────────────────────────────── band */
.sec--band{padding-block:0}
.band{
  background:var(--sand); border-radius:var(--r-xl); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(30px,4vw,60px); padding-right:0;
}
.band__copy{max-width:46ch}
.band__copy h2{margin-bottom:16px}
.band__copy p{color:#4B4F3E; font-size:1.02rem; line-height:1.66}
.band__art{margin:0; align-self:stretch}
.band__art img{width:100%; height:100%; object-fit:cover; min-height:300px}
@media (max-width:880px){
  .band{grid-template-columns:1fr; padding-right:clamp(30px,4vw,60px)}
  .band__art{order:-1; margin:calc(clamp(30px,4vw,60px) * -1); margin-bottom:0}
  .band__art img{border-radius:0}
}

/* ───────────────────────────────────────────────────────────── reviews */
.rev__src{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 14px; margin:22px auto 0;
  padding:11px 20px; width:max-content; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--sh-1);
}
.rev__src span{font-size:.84rem; color:var(--ink-2); font-weight:500}
.rev__src img{height:19px; width:auto; display:block}
.rev__src-link{
  font-size:.82rem; font-weight:600; color:var(--ink);
  text-decoration:none; padding-left:14px; border-left:1px solid var(--line);
  white-space:nowrap;
}
.rev__src-link:hover{color:var(--sage-ink); text-decoration:underline; text-underline-offset:3px}
@media (max-width:520px){
  .rev__src{border-radius:var(--r); padding:13px 16px}
  .rev__src-link{padding-left:0; border-left:0}
}
.rev__via{color:var(--sage-ink); font-weight:600}

.revs{columns:3 300px; column-gap:clamp(16px,2.2vw,24px)}
.rev{
  break-inside:avoid; margin:0 0 clamp(16px,2.2vw,24px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--sh-1);
}
.rev__s{color:#E5A83C; font-size:.88rem; letter-spacing:.14em}
.rev__t{margin:11px 0 14px; color:var(--ink-2); font-size:.94rem; line-height:1.62}
.rev__m{font-size:.8rem; color:var(--ink-3)}
.rev__m b{color:var(--ink); font-weight:600}

/* ──────────────────────────────────────────────────────────── delivery */
.ship{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px}
@media (max-width:480px){ .ship{grid-template-columns:1fr} }
.shipc{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px}
.shipc__t{font-size:.74rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--sage-ink)}
.shipc__d{font-family:var(--f-head); font-size:1.28rem; font-weight:600; margin-top:9px; line-height:1.2}
.shipc__s{font-size:.82rem; color:var(--ink-3); margin-top:6px}

/* ───────────────────────────────────────────────────────────────── faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:21px 44px 21px 0; position:relative;
  font-size:1.03rem; font-weight:600; letter-spacing:-.012em; line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  translate:0 -70%; rotate:45deg; transition:rotate .2s, border-color .2s;
}
.faq summary:hover::after{border-color:var(--sage-deep)}
.faq details[open] summary::after{rotate:-135deg; translate:0 -20%}
.faq p{padding:0 44px 24px 0; color:var(--ink-2); font-size:.965rem; line-height:1.68; margin:0; max-width:70ch}

/* ─────────────────────────────────────────────────────────────── close */
.sec--end{padding-block:clamp(70px,9vw,120px); background:var(--sand-soft)}
.end{text-align:center; max-width:60ch; margin-inline:auto}
.end h2{margin-bottom:16px}
.end p{color:var(--ink-2); font-size:1.06rem; margin-bottom:30px; line-height:1.64}

/* ───────────────────────────────────────────────────────────── contact */
.sec--contact{padding-block:clamp(52px,7vw,86px);background:#fff}
.contact-card{
  max-width:920px;margin-inline:auto;padding:clamp(28px,5vw,54px);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--sand-soft);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(28px,5vw,60px);
  box-shadow:var(--sh-1)
}
.contact-card__copy{max-width:560px}
.contact-card__copy h2{margin:6px 0 14px}
.contact-card__copy p{color:var(--ink-2);font-size:1.02rem;line-height:1.65;margin:0}
.contact-card__copy .contact-card__note{margin-top:8px;font-size:.88rem;color:var(--ink-3)}
.btn--whatsapp{
  --bg:#25D366;--bd:#25D366;--fg:#fff;
  flex:none
}
.btn--whatsapp:hover{--bg:#1fbd5a;--bd:#1fbd5a}
.btn--whatsapp svg{width:20px;height:20px;flex:none}
@media (max-width:720px){
  .contact-card{align-items:stretch;flex-direction:column}
  .btn--whatsapp{width:100%}
}

/* ────────────────────────────────────────────────────────────── footer */
.ftr{border-top:1px solid var(--line); padding-block:36px; background:#fff}
.ftr__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px}
.ftr__brand{font-family:var(--f-head); font-size:1.05rem; font-weight:600}
.ftr__brand em{font-style:italic; color:var(--sage-deep)}
.ftr__sm{font-size:.8rem; color:var(--ink-3); margin-top:4px}
.ftr__nav{display:flex; flex-wrap:wrap; gap:20px}
.ftr__nav a,.ftr__cookie{font-size:.87rem; color:var(--ink-2); text-decoration:none}
.ftr__nav a:hover,.ftr__cookie:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.ftr__cookie{
  appearance:none; border:0; background:none; padding:0; font-family:inherit;
  cursor:pointer;
}

/* ───────────────────────────────────────────────── cookie consent */
.cookiebar{
  position:fixed; left:16px; bottom:16px; z-index:140;
  width:min(430px,calc(100vw - 32px)); padding:14px 15px;
  background:rgba(255,255,255,.98); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-3); backdrop-filter:blur(14px);
}
.cookiebar[hidden]{display:none}
.cookiebar__copy{margin:0; color:var(--ink-2); font-size:.79rem; line-height:1.5}
.cookiebar__copy strong{display:block; color:var(--ink); font-size:.86rem; margin-bottom:3px}
.cookiebar__copy a{color:var(--ink); font-weight:600; text-underline-offset:2px}
.cookiebar__actions{display:flex; gap:8px; margin-top:11px}
.cookiebar__actions .btn{flex:1; min-height:40px; padding-inline:12px}
.cookie-open .dock,.cookie-open .setup{display:none!important}
body.cookie-open{padding-bottom:150px}

@media (max-width:560px){
  .cookiebar{
    left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom));
    width:auto; padding:11px 12px; border-radius:12px;
  }
  .cookiebar__copy{font-size:.75rem; line-height:1.42}
  .cookiebar__copy strong{font-size:.82rem}
  .cookiebar__actions{gap:7px; margin-top:8px}
  .cookiebar__actions .btn{min-height:38px; font-size:.77rem}
  body.cookie-open{padding-bottom:165px}
}

/* ─────────────────────────────────────────────────────── mobile dock */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -4px 24px rgba(29,30,26,.08);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  animation:dockUp .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes dockUp{from{translate:0 100%}to{translate:0 0}}
.dock__in{display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:1240px; margin-inline:auto}
.dock__what{font-size:.78rem; color:var(--ink-3)}
.dock__price{font-family:var(--f-head); font-size:1.2rem; font-weight:600; line-height:1.1}
@media (min-width:1041px){ .dock{display:none!important} }

/* ─────────────────────────────────────────────────────── setup notice */
.setup{
  position:fixed; left:14px; bottom:14px; z-index:120; max-width:330px;
  background:var(--ink); color:#fff; border-radius:var(--r);
  padding:15px 17px; box-shadow:var(--sh-3); font-size:.81rem; line-height:1.55;
}
.setup b{display:block; margin-bottom:5px; font-size:.86rem}
.setup code{background:rgba(255,255,255,.16); padding:1px 5px; border-radius:4px; font-size:.95em}
.setup button{position:absolute; top:8px; right:9px; background:none; border:0; color:rgba(255,255,255,.55); cursor:pointer; font-size:1.05rem; line-height:1; padding:4px}
.setup button:hover{color:#fff}
@media (max-width:1040px){ .setup{bottom:82px} }

/* ─────────────────────────────────────────────────────────── reveal */
.rv{opacity:0; translate:0 18px; transition:opacity .6s ease, translate .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; translate:0 0}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; translate:0 0} }


/* ══════════════════════════════════════════════════════ legal pages */
.legal-page .hdr__in{justify-content:space-between}
.legal{padding-block:clamp(40px,6vw,72px) clamp(64px,9vw,110px)}
.legal__h1{font-size:clamp(2.1rem,4.6vw,3.1rem); margin-bottom:10px}
.legal__meta{font-size:.82rem; color:var(--ink-3); margin-bottom:30px}
.legal__lede{
  font-size:1.03rem; line-height:1.68; color:var(--ink-2);
  padding:18px 20px; margin-bottom:34px;
  background:var(--sand-soft); border-left:3px solid var(--sage); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.legal h2{
  font-size:clamp(1.2rem,2vw,1.45rem); margin:38px 0 12px;
  padding-top:22px; border-top:1px solid var(--line);
}
.legal h3{font-size:1rem; margin:22px 0 8px; color:var(--sage-ink)}
.legal p{margin-bottom:14px; color:var(--ink-2); font-size:.965rem; line-height:1.72}
.legal a{color:var(--ink)}
.legal strong{color:var(--ink)}

.legal__ul{margin:0 0 16px; padding-left:22px; display:grid; gap:9px}
.legal__ul li{color:var(--ink-2); font-size:.955rem; line-height:1.65}

.legal__dl{
  display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:11px 24px;
  margin:0 0 18px; padding:20px; background:var(--sand-soft);
  border:1px solid var(--sand-deep); border-radius:var(--r);
}
.legal__dl dt{font-size:.82rem; color:var(--ink-3); font-weight:500}
.legal__dl dd{margin:0; font-size:.955rem; color:var(--ink); font-weight:500; word-break:break-word}
@media (max-width:560px){ .legal__dl{grid-template-columns:1fr; gap:3px 0} .legal__dl dd{margin-bottom:10px} }

.todo{color:#A8442E !important; font-weight:600 !important; font-style:italic}

.legal__warn{
  margin-bottom:30px; padding:15px 17px; border-radius:var(--r-sm);
  background:#FDF3EE; border:1px solid #F0D5C8; color:#8A3E25;
  font-size:.875rem; line-height:1.6;
}
.legal__warn code{background:rgba(138,62,37,.1); padding:1px 5px; border-radius:4px; font-size:.95em}

.legal__nav{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
}
.legal__nav a{font-size:.9rem; font-weight:600; color:var(--ink); text-decoration:none}
.legal__nav a:hover{color:var(--sage-ink); text-decoration:underline; text-underline-offset:3px}


/* ───────────────────────────────────────────────────── order success */
.success-page{min-height:100vh;background:linear-gradient(180deg,#fff 0%,var(--sand-soft) 100%)}
.success-hdr{position:static;background:#fff;border-bottom:1px solid var(--line)}
.success-main{
  min-height:calc(100vh - 71px);display:grid;place-items:center;
  padding:clamp(36px,7vw,84px) var(--pad);
}
.success-card{
  width:min(760px,100%);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-2);
  padding:clamp(34px,6vw,64px);text-align:center;
}
.success-check{
  width:72px;height:72px;margin:0 auto 24px;color:var(--sage-deep);
}
.success-check svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.success-eyebrow{margin-bottom:14px}
.success-card h1{font-size:clamp(2.25rem,5vw,3.6rem);margin-bottom:18px}
.success-lede{
  max-width:56ch;margin:0 auto;color:var(--ink-2);
  font-size:clamp(1rem,2vw,1.13rem);line-height:1.7;
}
.success-email{
  margin:30px auto 0;padding:20px 22px;max-width:590px;
  background:var(--sand-soft);border:1px solid var(--sand-deep);
  border-radius:var(--r);text-align:left;
}
.success-email strong{display:block;font-family:var(--f-head);font-size:1.08rem;margin-bottom:4px}
.success-email p{color:var(--ink-2);font-size:.94rem;line-height:1.55}
.success-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:30px 0;text-align:left;
}
.success-steps>div{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:#fff}
.success-steps span{
  display:grid;place-items:center;width:29px;height:29px;margin-bottom:12px;
  border-radius:50%;background:var(--sage);color:var(--sage-ink);
  font-size:.78rem;font-weight:700;
}
.success-steps p{font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.success-steps strong{color:var(--ink);font-size:.9rem}
.success-note{margin:0 auto 26px;max-width:58ch;color:var(--ink-3);font-size:.84rem;line-height:1.55}
@media (max-width:680px){
  .success-card{padding:30px 20px}
  .success-steps{grid-template-columns:1fr}
  .success-steps>div{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:start}
  .success-steps span{grid-row:1/3}
}