/* La papeterie des noces: the home page, the free results and the public pages.
   The mix: the structure of Papier (a serif title on the product, rows of pieces), the
   matter of Cereal (cream paper, warm ink, hairlines, numbered captions, no rounded corners),
   the motion of Linear (short rises with a lifting blur). The colours come from the printed
   pieces (art.py): cream paper, plum ink, heather for the buttons, old rose for the script.
   Every rule is scoped to .mg, or to a page holding .mg. Fonts served by the site (OFL). */

@font-face { font-family: "Gilda PN"; src: url("fonts/gilda-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Garamond PN"; src: url("fonts/ebgaramond-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Pinyon PN"; src: url("fonts/pinyon-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

.mg {
  --mg-paper: #f8f5ef;
  --mg-sheet: #fffdf9;
  --mg-ink: #2b2330;
  --mg-soft: #574d5c;
  --mg-muted: #6a6070;
  --mg-heather: #6b5577;
  --mg-heather-deep: #4e3c5a;
  --mg-heather-light: #efe9f0;
  --mg-rose: #8a5a6b;
  --mg-line: rgba(43, 35, 48, 0.14);
  --mg-line-strong: rgba(43, 35, 48, 0.28);
  --mg-display: "Gilda PN", "Gilda Display", "Didot", Georgia, serif;
  --mg-body: "Garamond PN", "EB Garamond", Garamond, Georgia, serif;
  --mg-script: "Pinyon PN", "Pinyon Script", cursive;
  --mg-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-family: var(--mg-body);
  color: var(--mg-ink);
  font-size: 19px;
  line-height: 1.55;
}
.mg h1, .mg h2, .mg h3 { margin: 0; font-family: var(--mg-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; color: var(--mg-ink); text-wrap: balance; }
.mg p { margin: 0; }
.mg a { color: var(--mg-heather-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mg-wrap { max-width: 1180px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.mg-label { text-wrap: balance; font-family: var(--mg-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mg-soft); }
.mg-num { font-family: var(--mg-body); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--mg-muted); font-variant-numeric: tabular-nums; }
.mg-fine { font-size: 0.9rem; color: var(--mg-muted); line-height: 1.5; }
.mg-opt { font-weight: 400; color: var(--mg-muted); }
.mg-price { font-family: var(--mg-display); font-size: 1.9rem; color: var(--mg-ink); white-space: nowrap; }

/* Buttons: heather ink, white small capitals (contrast 6.9 to 1), square corners. */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 14px 26px; box-sizing: border-box; border: 1px solid var(--mg-heather-deep);
  background: var(--mg-heather-deep); color: #ffffff; cursor: pointer; border-radius: 0;
  font: inherit; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: center;
  transition: background-color 160ms var(--mg-ease), border-color 160ms var(--mg-ease), transform 160ms var(--mg-ease);
}
.mg-btn::after { content: "→"; letter-spacing: 0; transition: transform 160ms var(--mg-ease); }
.mg a.mg-btn, .mg a.mg-btn:hover { color: #ffffff; }
.mg-btn:hover { background: var(--mg-ink); border-color: var(--mg-ink); }
.mg-btn:hover::after { transform: translateX(4px); }
.mg-btn:active { transform: translateY(1px); }
.mg-btn[disabled] { opacity: 0.6; cursor: wait; }
.mg-btn.ghost, .mg a.mg-btn.ghost { background: transparent; color: var(--mg-heather-deep); }
.mg-btn.ghost:hover, .mg a.mg-btn.ghost:hover { background: var(--mg-heather-deep); color: #ffffff; }
.mg a:focus-visible, .mg button:focus-visible, .mg input:focus-visible, .mg select:focus-visible, .mg textarea:focus-visible, .mg summary:focus-visible, .mg-tab-input:focus-visible + .mg-tab-input + .mg-tabs label {
  outline: 2px solid var(--mg-heather); outline-offset: 3px;
}
.mg-link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.9rem; color: var(--mg-heather-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The page around it: cream paper, a thin bar, the logo instead of the emoji. */
body:has(.mg) { background: #f8f5ef; }
body:has(.mg-home) .topbar { max-width: 1180px; padding: 18px max(24px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid rgba(43, 35, 48, 0.14); }
.brand:has(> .brand-emoji) { font-family: "Gilda PN", Georgia, serif; font-weight: 400; font-size: 1.32rem; letter-spacing: 0.01em; color: #2b2330; }
.brand-emoji { display: inline-block; font-size: 0; width: 30px; height: 30px; flex: 0 0 auto; vertical-align: middle; background: url("logo.svg") center / contain no-repeat; }
body:has(.mg-home) .topnav a { color: #574d5c; }
body:has(.mg-home) .footer { max-width: 1180px; color: #574d5c; }

/* The common pages of the site (offer, public pages, payment, result): the same paper, ink and
   type, square cards and buttons. This file is only loaded on this site (page_head.html). */
body { --radius: 2px; --card: #fffdf9; --line: rgba(43, 35, 48, 0.14); font-family: "Garamond PN", "EB Garamond", Garamond, Georgia, serif; color: #2b2330; background: #f8f5ef; font-size: 18px; }
body h1, body h2, body h3 { font-family: "Gilda PN", "Gilda Display", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
body .card { border-radius: 2px; box-shadow: 0 20px 50px -30px rgba(43, 35, 48, 0.25); border: 1px solid rgba(43, 35, 48, 0.14); background: #fffdf9; }
body .btn { border-radius: 0; background: #4e3c5a; color: #ffffff; box-shadow: none; font-family: inherit; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
body .btn:hover { background: #2b2330; filter: none; }
body .btn.secondary { background: transparent; color: #4e3c5a; border: 1px solid #4e3c5a; }
body .badge { border-radius: 0; background: transparent; color: #574d5c; border: 1px solid rgba(43, 35, 48, 0.28); letter-spacing: 0.14em; font-weight: 500; }
body input, body select, body textarea { border-radius: 2px; font-family: inherit; }
body .topbar { border-bottom: 1px solid rgba(43, 35, 48, 0.14); }
body .guide blockquote, body .guide .quote { font-style: italic; border-left: 1px solid #8a5a6b; }
body .teaser-lead { font-family: "Garamond PN", Georgia, serif; font-style: italic; font-size: 1.1rem; }

/* Hero: the title and the two free tools on the left, the printed pieces on the right. */
.mg-hero { padding: 56px 0 72px; }
.mg-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.mg-hero h1 { font-size: clamp(2.1rem, 3.3vw, 3.1rem); margin: 14px 0 28px; }
.mg-hero h1 em { font-style: normal; color: var(--mg-heather); }
.mg-sheet { background: var(--mg-sheet); border: 1px solid var(--mg-line); padding: 8px 28px 26px; box-shadow: 0 1px 0 rgba(43, 35, 48, 0.04), 0 20px 50px -24px rgba(43, 35, 48, 0.22); }

/* On phones only: the faire-part, large, beside the title, so the product is in the first screen. */
.mg-mini { display: none; }
@media (max-width: 980px) {
  .mg-mini { display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 16px; align-items: center; margin: -6px 0 32px; text-decoration: none; color: var(--mg-soft); font-size: 0.9rem; line-height: 1.4; }
  .mg a.mg-mini { color: var(--mg-soft); }
  .mg-mini-art { position: relative; display: block; }
  .mg-mini-env { position: absolute; left: 40%; top: 78%; width: 72%; aspect-ratio: 229 / 162; z-index: 0; transform: rotate(6deg); background: linear-gradient(160deg, #cfae84, #bf9a6c); box-shadow: 0 8px 16px -8px rgba(43, 35, 48, 0.4); }
  .mg-mini-env::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, #c49f72, #b38c5e); }
  .mg-mini-env .mg-seal { width: 26px; height: 26px; left: 76%; top: 62%; }
  .mg-mini-env .mg-seal::after { font-size: 14px; }
  .mg-mini img { position: relative; z-index: 1; display: block; width: 100%; height: auto; background: #fdfbf7; transform: rotate(-2deg); box-shadow: 0 1px 1px rgba(43, 35, 48, 0.08), 0 14px 28px -12px rgba(43, 35, 48, 0.35); }
  .mg-mini strong { font-weight: 500; color: var(--mg-ink); }
  .mg-mini em { display: block; margin-top: 8px; font-style: normal; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mg-heather-deep); text-decoration: underline; text-underline-offset: 3px; }
}

/* Lists styled like the fields: paper, hairline, square corners, our own arrow. */
.mg select, body .card select, body select {
  appearance: none; -webkit-appearance: none; background-color: #ffffff; color: #2b2330;
  border: 1px solid rgba(43, 35, 48, 0.28); border-radius: 2px; min-height: 50px; padding: 10px 34px 10px 12px;
  font: inherit; font-size: 1rem; cursor: pointer;
  /* The arrow, drawn with two gradients (no image to load). */
  background-image: linear-gradient(45deg, transparent 50%, #4e3c5a 50%), linear-gradient(135deg, #4e3c5a 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color 160ms var(--mg-ease);
}
.mg select:hover, body select:hover { border-color: #6b5577; }

/* The wedding date as three lists. */
.mg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mg-date { border: 0; padding: 0; margin: 0; min-width: 0; }
.mg-date legend { padding: 0; margin-bottom: 8px; font-size: 1rem; color: var(--mg-soft); }
.mg-date-row { display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; gap: 8px; }
.mg-date-row select { min-width: 0; }

/* The two tools as tabs: radio buttons and :has, no script needed. */
.mg-tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mg-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--mg-line); margin: 0 -28px 22px; }
.mg-tabs label { display: block; padding: 16px 20px 14px; font-size: 1rem; cursor: pointer; color: var(--mg-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 160ms var(--mg-ease), border-color 160ms var(--mg-ease); }
.mg-tabs label .mg-num { margin-right: 6px; }
.mg-tools:has(#mg-t-noces:checked) label[for="mg-t-noces"],
.mg-tools:has(#mg-t-fairepart:checked) label[for="mg-t-fairepart"] { color: var(--mg-ink); border-bottom-color: var(--mg-ink); }
.mg-tools:has(#mg-t-noces:checked) .mg-form-fairepart,
.mg-tools:has(#mg-t-fairepart:checked) .mg-form-noces { display: none; }
.mg-form { display: flex; flex-direction: column; gap: 8px; }
.mg-form label, .mg-more summary { font-size: 1rem; color: var(--mg-soft); }
.mg-form input, .mg-form select {
  font: inherit; font-size: 1.05rem; color: var(--mg-ink); background-color: #ffffff; width: 100%; box-sizing: border-box;
  min-height: 50px; padding: 10px 14px; border: 1px solid var(--mg-line-strong); border-radius: 2px;
  transition: border-color 160ms var(--mg-ease);
}
.mg-form input:hover, .mg-form select:hover { border-color: var(--mg-heather); }
.mg-form .mg-btn { margin-top: 12px; width: 100%; }
.mg-pair-label { font-size: 1rem; color: var(--mg-soft); margin-top: 6px !important; }
.mg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-pair > div { display: flex; flex-direction: column; gap: 6px; }
.mg-more summary { cursor: pointer; padding: 6px 0; }
.mg-more summary span { color: var(--mg-muted); }
.mg-more[open] summary { margin-bottom: 8px; }
.mg-form .mg-fine { margin-top: 4px; }

/* The printed pieces, laid like paper on a table. */
.mg-stack { position: relative; margin: 0; min-height: 500px; }
.mg-piece { position: absolute; display: block; width: 58%; background: #fdfbf7; box-shadow: 0 1px 1px rgba(43, 35, 48, 0.08), 0 8px 16px -6px rgba(43, 35, 48, 0.14), 0 30px 60px -20px rgba(43, 35, 48, 0.28); transition: transform 420ms var(--mg-ease); }
.mg-piece img { display: block; width: 100%; height: auto; }
.mg-piece-front { left: 8%; top: 4%; width: 52%; z-index: 2; transform: rotate(-3deg); }
.mg-stack:hover .mg-piece-front { transform: rotate(-4deg) translate(-6px, -6px); }
/* The kraft envelope, drawn in CSS (no photo), and its heather wax seal: our own detail. */
.mg-envelope {
  position: absolute; right: 2%; top: 30%; width: 66%; aspect-ratio: 229 / 162; z-index: 1;
  transform: rotate(5deg); border-radius: 2px;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.03) 2px 5px),
    linear-gradient(160deg, #cfae84, #bf9a6c);
  box-shadow: 0 1px 1px rgba(43, 35, 48, 0.1), 0 10px 20px -8px rgba(43, 35, 48, 0.25), 0 36px 70px -24px rgba(43, 35, 48, 0.4);
  transition: transform 420ms var(--mg-ease);
}
.mg-envelope::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 58%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #c49f72, #b38c5e);
  filter: drop-shadow(0 2px 2px rgba(43, 35, 48, 0.18));
}
.mg-seal {
  position: absolute; left: 84%; top: 62%; width: 62px; height: 62px; transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 38% 34%, #8a7096 0, #6b5577 38%, #4e3c5a 72%, #3d2f47 100%);
  box-shadow: inset 0 0 0 5px rgba(43, 35, 48, 0.18), inset 0 0 0 8px rgba(255, 255, 255, 0.12), 0 3px 6px rgba(43, 35, 48, 0.35);
}
.mg-seal::after {
  content: "&"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mg-script); font-size: 30px; color: rgba(255, 255, 255, 0.55); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.mg-stack:hover .mg-envelope { transform: rotate(6deg) translate(6px, 4px); }
.mg-stack figcaption { position: absolute; left: 8%; bottom: 0; font-size: 0.88rem; color: var(--mg-muted); }

.mg-result-zone { padding: 0 0 56px; }

/* The dark band: four true facts. */
.mg-band { background: var(--mg-ink); color: #f3eef2; }
.mg-band ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; padding-top: 30px; padding-bottom: 30px; }
.mg-band li { display: flex; flex-direction: column; gap: 4px; padding: 4px 24px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.mg-band li:first-child { border-left: 0; padding-left: 0; }
.mg-band strong { font-family: var(--mg-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; color: #ffffff; }
.mg-band span { line-height: 1.4; }
.mg-band span { font-size: 0.95rem; color: #d8cfd8; }

.mg-intro { padding: 120px 0 40px; max-width: 760px; text-align: center; }
.mg-intro h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin: 12px 0 18px; }
.mg-intro p:last-child { color: var(--mg-soft); }

/* One section per product: picture and words, alternating. */
.mg-product { padding: 72px 0; border-top: 1px solid var(--mg-line); }
.mg-product:first-of-type { border-top: 0; }
.mg-product-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.mg-product.alt .mg-product-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mg-product.alt .mg-copy { order: -1; }
.mg-copy { display: flex; flex-direction: column; gap: 18px; }
.mg-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--mg-line); padding-bottom: 14px; }
.mg-copy h3 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); hyphens: manual; }
.mg-copy > p { color: var(--mg-soft); }
.mg-copy .mg-btn { align-self: flex-start; }
.mg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-list li { padding: 9px 0 9px 28px; border-bottom: 1px solid var(--mg-line); position: relative; }
.mg-list li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 1px; background: var(--mg-rose); }

.mg-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.mg-tile-img { display: block; position: relative; background: #fdfbf7; box-shadow: 0 1px 1px rgba(43, 35, 48, 0.08), 0 16px 34px -18px rgba(43, 35, 48, 0.3); transition: transform 420ms var(--mg-ease), box-shadow 420ms var(--mg-ease); }
.mg-tile-img.wide { grid-column: span 2; }
.mg-spec { align-self: stretch; justify-content: space-between; border: 1px solid var(--mg-line); background: var(--mg-sheet); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; }
.mg-spec ul { list-style: none; margin: 0; padding: 0; }
.mg-spec li { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--mg-line); line-height: 1.3; }
.mg-spec li span:last-child { color: var(--mg-muted); font-size: 0.86rem; }
.mg-tile-img img { display: block; width: 100%; height: auto; }
.mg-tile-img > span:not(.mg-zoom-label) { position: absolute; left: 0; bottom: -28px; font-size: 0.82rem; color: var(--mg-muted); letter-spacing: 0.06em; }
/* « Voir en grand » never sits on a piece: it goes under it, outside the paper. */
.mg .mg-zoom-label { right: 0; bottom: -30px; background: none; border: 0; padding: 0; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--mg-heather-deep); text-decoration: underline; text-underline-offset: 3px; }
.mg-paper-frame { margin-bottom: 30px; }
.mg-teaser .teaser-zoom { position: relative; display: block; margin-bottom: 30px; }
.mg-teaser .teaser-zoom-label { position: absolute; left: auto; right: 0; top: auto; bottom: -28px; transform: none; background: none; border: 0; box-shadow: none; padding: 0; font-size: 0.85rem; color: #4e3c5a; text-decoration: underline; }
.mg-tile-img:hover { transform: translateY(-4px); box-shadow: 0 1px 1px rgba(43, 35, 48, 0.08), 0 26px 44px -18px rgba(43, 35, 48, 0.34); }
.mg-mosaic { padding-bottom: 28px; row-gap: 46px; }

.mg-shot { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mg-paper-frame { display: block; position: relative; width: min(100%, 400px); background: #fdfbf7; box-shadow: 0 1px 1px rgba(43, 35, 48, 0.08), 0 8px 16px -6px rgba(43, 35, 48, 0.14), 0 30px 60px -20px rgba(43, 35, 48, 0.28); transition: transform 420ms var(--mg-ease); }
.mg-paper-frame:hover { transform: translateY(-4px) rotate(-0.6deg); }
.mg-paper-frame img { display: block; width: 100%; height: auto; }
.mg-zoom-label { position: absolute; right: 12px; bottom: 12px; background: rgba(255, 253, 249, 0.94); border: 1px solid var(--mg-line); padding: 4px 10px; font-size: 0.8rem; color: var(--mg-ink); }
.mg-typed { width: min(100%, 400px); font-style: italic; color: var(--mg-soft); border-left: 1px solid var(--mg-rose); padding-left: 16px; }
.mg-typed small { display: block; font-style: normal; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mg-muted); margin-bottom: 4px; }

.mg-more { padding: 24px 0 96px; }
.mg-try { border: 1px solid var(--mg-line); padding: 28px 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.mg-try a { font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; }

.mg-how { background: var(--mg-sheet); border-top: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); padding: 112px 0; }
.mg-how h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 48px; }
.mg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.mg-steps li { border-top: 1px solid var(--mg-ink); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.mg-steps h3 { font-size: 1.5rem; }
.mg-steps p { color: var(--mg-soft); }

.mg-trust { padding: 112px 0; }
.mg-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.mg-trust h2 { font-size: 1.8rem; margin-bottom: 14px; }
.mg-trust p { color: var(--mg-soft); }

.mg-guides { padding: 0 0 72px; }
.mg-guides ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mg-guides a { display: inline-block; padding: 8px 16px; border: 1px solid var(--mg-line-strong); color: var(--mg-ink); text-decoration: none; transition: border-color 160ms var(--mg-ease), background-color 160ms var(--mg-ease); }
.mg-guides a:hover { border-color: var(--mg-ink); background: var(--mg-sheet); }

.mg-faq { padding: 0 0 120px; }
.mg-faq .mg-wrap { max-width: 860px; }
.mg-faq h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 28px; }
.mg-faq details { border-top: 1px solid var(--mg-line); }
.mg-faq details:last-child { border-bottom: 1px solid var(--mg-line); }
.mg-faq summary { cursor: pointer; padding: 20px 32px 20px 0; font-size: 1.12rem; list-style: none; position: relative; }
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.4rem; color: var(--mg-muted); transition: transform 160ms var(--mg-ease); }
.mg-faq details[open] summary::after { transform: rotate(45deg); }
.mg-faq details p { padding: 0 0 22px; color: var(--mg-soft); max-width: 70ch; }

/* The free results. */
.mg-res { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; padding-top: 8px; }
.mg-res-main, .mg-res-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mg-card-paper { background: var(--mg-sheet); border: 1px solid var(--mg-line); padding: 32px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 50px -28px rgba(43, 35, 48, 0.25); }
.mg-res-lead { color: var(--mg-soft); }
.mg-res-big { font-family: var(--mg-script) !important; font-size: clamp(3.4rem, 7vw, 5.2rem) !important; line-height: 1.1 !important; color: var(--mg-rose) !important; letter-spacing: 0 !important; }
.mg-res-when { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }
.mg-res-when span { padding: 10px 16px 10px 0; margin-right: 16px; border-right: 1px solid var(--mg-line); font-size: 0.98rem; }
.mg-res-when span:last-child { border-right: 0; color: var(--mg-heather-deep); font-weight: 600; }
.mg-res-sub { font-size: 1.3rem; margin-top: 8px; }
.mg-res-list { list-style: none; margin: 0; padding: 0; }
.mg-res-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--mg-line); font-size: 0.98rem; }
.mg-res-list li span:last-child { color: var(--mg-muted); text-align: right; }
.mg-res-offer h2 { font-size: 1.7rem; }
.mg-pic { display: block; width: min(100%, 300px); align-self: center; box-shadow: 0 16px 34px -18px rgba(43, 35, 48, 0.35); }
.mg-pic img { display: block; width: 100%; height: auto; }
.mg-compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mg-compare th, .mg-compare td { text-align: left; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--mg-line); vertical-align: top; }
.mg-compare th { font-weight: 500; color: var(--mg-muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mg-compare td:last-child { color: var(--mg-ink); font-weight: 500; }
.mg-res-offer .mg-btn { width: 100%; }
.mg-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.84rem; color: var(--mg-muted); }
.mg-res-small { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--mg-sheet); border: 1px solid var(--mg-line); text-decoration: none; color: var(--mg-ink); transition: border-color 160ms var(--mg-ease); }
.mg a.mg-res-small { color: var(--mg-ink); }
.mg-res-small:hover { border-color: var(--mg-ink); }
.mg-res-small .mg-price { font-size: 1.4rem; }

/* The faire-part preview, drawn like the printed piece. */
.mg-preview { background: #fffdf9; border: 1px solid var(--mg-line); outline: 1px solid var(--mg-line); outline-offset: -10px; padding: 38px 28px; text-align: center; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 44px -26px rgba(43, 35, 48, 0.3); }
.mg-pv-top { font-style: italic; color: var(--mg-soft); }
.mg-pv-names { font-family: var(--mg-script); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1.15; color: var(--mg-ink); }
.mg-pv-names span { color: var(--mg-rose); font-size: 0.7em; }
.mg-pv-body { max-width: 34ch; margin: 0 auto !important; }
.mg-pv-date { font-family: var(--mg-display); letter-spacing: 0.2em; font-size: 1.1rem; padding-top: 10px; }
.mg-texts { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: mg; }
.mg-texts li { counter-increment: mg; padding: 16px 0 16px 44px; border-top: 1px solid var(--mg-line); position: relative; display: flex; flex-direction: column; gap: 4px; }
.mg-texts li::before { content: "(0" counter(mg) ")"; position: absolute; left: 0; top: 18px; font-size: 0.82rem; color: var(--mg-muted); }
.mg-texts li.is-on::before { color: var(--mg-rose); }
.mg-text-actions { display: flex; gap: 18px; margin-top: 6px; }

/* The public pages: the tools under the intro. */
.mg-guide-tools { background: var(--mg-sheet); border: 1px solid var(--mg-line); padding: 8px 24px 22px; margin: 8px 0 24px; }
.mg-guide-tools .mg-tabs { margin: 0 -24px 18px; }
.mg-teaser .teaser-thumb { box-shadow: 0 14px 30px -18px rgba(43, 35, 48, 0.35); }
.mg-teaser-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.mg-teaser-row img, .mg-teaser-wide img { width: 100%; height: auto; display: block; }
.mg-teaser-wide { display: block; position: relative; }

/* Motion: short rises with a lifting blur, tied to the scroll, only where the browser can. */
@keyframes mg-rise { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mg-lift { from { transform: translateY(18px); } to { transform: none; } }
.mg-hero .mg-reveal { animation: mg-rise 520ms var(--mg-ease) both; }
.mg-hero .mg-stack { animation-delay: 120ms; }
@supports (animation-timeline: view()) {
  .mg-product .mg-reveal, .mg-intro.mg-reveal, .mg-steps .mg-reveal, .mg-try.mg-reveal { animation: mg-lift linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-reveal { animation: none !important; }
  .mg *, .mg *::before, .mg *::after { transition: none !important; }
}

/* Tablet and phone. */
@media (max-width: 980px) {
  .mg-hero-grid, .mg-product-grid, .mg-product.alt .mg-product-grid, .mg-res { grid-template-columns: 1fr; gap: 40px; }
  .mg-product.alt .mg-copy { order: 0; }
  .mg-stack { min-height: 0; height: 520px; max-width: 560px; width: 100%; margin: 0 auto; }
  .mg-band ul { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .mg-band li:nth-child(3) { border-left: 0; padding-left: 0; }
  .mg-steps, .mg-trust-grid { grid-template-columns: 1fr; gap: 36px; }
  .mg-try { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .mg { font-size: 18px; }
  .mg-wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body:has(.mg-home) .topbar { padding: 12px 16px; }
  .mg-hero { padding: 20px 0 48px; }
  .mg-hero h1 { font-size: 1.75rem; margin: 8px 0 18px; }
  .mg-sheet { padding: 4px 18px 20px; }
  .mg-tabs { margin: 0 -18px 16px; }
  .mg-tabs label { padding: 14px 12px 12px; font-size: 0.95rem; }
  .mg-tabs label .mg-num { display: none; }
  .mg-pair { gap: 10px; }
  .mg-stack { height: 420px; }
  .mg-piece-front { width: 58%; }
  .mg-envelope { width: 74%; top: 34%; }
  .mg-seal { width: 48px; height: 48px; }
  .mg-band ul { grid-template-columns: 1fr; }
  .mg-band li { border-left: 0; padding-left: 0; }
  .mg-intro { padding: 80px 16px 24px; }
  .mg-product { padding: 48px 0; }
  .mg-mosaic { grid-template-columns: 1fr 1fr; gap: 12px; row-gap: 40px; }
  .mg-mosaic .mg-tile-img:nth-child(3) { display: none; }
  .mg-spec { grid-column: 1 / -1; }
  .mg-btn { letter-spacing: 0.07em; font-size: 0.8rem; padding: 14px 16px; }
  .mg-copy .mg-btn { align-self: stretch; }
  .mg-how, .mg-trust { padding: 72px 0; }
  .mg-card-paper { padding: 22px 18px; }
  .mg-guide-tools { padding: 4px 16px 18px; }
  .mg-guide-tools .mg-tabs { margin: 0 -16px 16px; }
  .mg-res-when span { border-right: 0; padding-right: 0; }
}