/* Tipii' brand kit (brand.tipii.fr) + the live tipii.fr theme: two-tone titles,
   full-width two-block banners, pill uppercase buttons, light footer. */
:root {
  --moss: #D6DAD4;
  --pistachio: #B79858;
  --honey: #E9BC69;
  --rust: #8B2517;
  --peach: #EFAA93;
  --terracotta: #D95940;
  --banner-red: #C9412F;
  --olivewood: #170F0C;
  --feather: #FAF9F6;
  --white: #FFFFFF;
  --ink: #1D1D1F;
  --grey: #6E6E73;
  --line: #E8E6E1;
  --blush: #FBE3DD;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --radius: 12px;
  --pill: 300px;
  --gutter: 20px;
  --shadow-print: 0 2px 6px rgba(23, 15, 12, 0.14);
  --shadow-print-lg: 0 10px 30px rgba(23, 15, 12, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Type ── */

/* "Nos créations. <span>Trouvez celle qui vous ressemble.</span>" */
.title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 820px;
}
.title span { color: var(--grey); }
.title--light { color: var(--white); }
.title--light span { color: var(--blush); }
.banner-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.2;
  text-transform: uppercase;
}
.h3 { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.3; }
.lead { font-size: 16px; color: var(--grey); line-height: 1.55; max-width: 600px; }
.small { font-size: 13px; color: var(--grey); }

/* ── Layout ── */

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; align-items: center; gap: var(--gap, 12px); }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; align-items: center; }
.section { padding: 56px 0; }
.section--feather { background: var(--feather); }

/* ── Announcement + header ── */

.announce { background: var(--honey); text-align: center; font-family: var(--font-heading); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px var(--gutter); }
.header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; }
.header__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.header__logo img { height: 34px; width: auto; }
.header__logo { gap: 14px; }
.header__x { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 20px; line-height: 1; color: var(--pistachio); transform: translateY(1px); }
.header__cse { position: relative; padding-left: 14px; font-family: 'Instrument Serif', serif; font-style: normal; font-size: 27px; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.header__logo .header__cse-logo { height: 30px; max-width: 120px; object-fit: contain; }
.header__left, .header__right { display: flex; gap: 22px; align-items: center; font-family: var(--font-heading); font-size: 13px; }
.header__right { justify-content: flex-end; }
.header a, .header button { text-decoration: none; }
.header .hide-mobile { display: none; }

/* ── Buttons (pill, uppercase, as on tipii.fr) ── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 24px;
  font-family: var(--font-heading); font-weight: 400; font-size: 14px; text-transform: uppercase; letter-spacing: .02em;
  border-radius: var(--pill); border: 1.5px solid transparent;
  text-decoration: none; transition: background .15s, color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--dark { background: var(--olivewood); color: var(--white); }
.btn--dark:hover { background: #2b211d; }
.btn--white { background: var(--white); color: #000; }
.btn--outline { border-color: var(--olivewood); }
.btn--outline:hover { background: var(--olivewood); color: var(--white); }
.btn--outline-light { border-color: var(--white); color: var(--white); }
.btn--honey { background: var(--honey); color: var(--olivewood); }
.btn--block { width: 100%; }
.btn .spinner, .loading .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { font-family: var(--font-heading); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.tag { display: inline-block; padding: 4px 10px; border-radius: var(--pill); background: var(--feather); border: 1px solid var(--line); font-family: var(--font-heading); font-size: 12px; }

/* ── Full-width two-block banners ── */

.banner { display: grid; grid-template-columns: 1fr; }
.banner__media { position: relative; min-height: 260px; background: var(--moss) center/cover no-repeat; overflow: hidden; }
.banner__block { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px var(--gutter); color: var(--white); background: var(--banner-red); }
.banner__block p { font-size: 16px; max-width: 460px; }
.banner--honey .banner__block { background: var(--honey); color: var(--olivewood); }
.banner .btn { align-self: flex-start; }
.sticker { pointer-events: none; }
.banner__media .sticker { position: absolute; }

/* prints scattered on a banner photo block */
.print { position: absolute; background: var(--white); padding: 4% 4% 12%; border-radius: 2px; box-shadow: var(--shadow-print-lg); }
.print img { width: 100%; height: 100%; object-fit: cover; }

/* ── Landing sections ── */

.steps { display: grid; gap: 28px; margin-top: 32px; }
.step { display: flex; gap: 18px; }
.step__num { font-family: var(--font-heading); font-weight: 600; font-size: 34px; line-height: 1; color: var(--honey); }

.prizes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.prize { display: flex; flex-direction: column; gap: 10px; }
.prize img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.prize__secret { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--banner-red); display: grid; place-items: center; }
.prize__secret .sticker { position: static; width: 34%; aspect-ratio: auto; border-radius: 0; }
.prize--secret:nth-child(2) .prize__secret { background: var(--rust); }
.prize--secret:nth-child(3) .prize__secret { background: var(--peach); }
.prize--secret:nth-child(4) .prize__secret { background: var(--moss); }

.faq { margin-top: 28px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 20px 0; cursor: pointer; font-family: var(--font-heading); font-weight: 500; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 300; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 20px; color: var(--grey); max-width: 680px; }

/* ── Footer (same structure as tipii.fr) ── */

.footer { background: var(--white); border-top: 1px solid var(--line); font-family: var(--font-heading); }
.footer__brand { display: flex; justify-content: center; padding: 56px 0 40px; }
.footer__brand img { width: 230px; height: auto; }
.footer__legal .container { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 28px; font-size: 12px; color: var(--grey); justify-content: center; }
.footer__legal a { text-decoration: none; }

/* ── Forms ── */

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-heading); font-weight: 500; font-size: 13px; }
.input { width: 100%; min-height: 52px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); }
.input:focus { outline: none; border-color: var(--olivewood); }
.input--error { border-color: var(--terracotta); }
.field-error { font-size: 13px; color: var(--rust); }
.fields-2 { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--grey); line-height: 1.4; cursor: pointer; }
.check input { appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid var(--olivewood); border-radius: 5px; cursor: pointer; }
.check input:checked { background: var(--olivewood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23FAF9F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.alert { padding: 16px; border-radius: var(--radius); background: #FCF1EE; }
.alert strong { display: block; font-family: var(--font-heading); font-weight: 600; color: var(--rust); margin-bottom: 4px; }
.alert p { font-size: 14px; color: var(--grey); }
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp input { min-height: 62px; text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: 26px; padding: 0; }

.auth { display: grid; grid-template-columns: 1fr; }
.auth .banner__media { min-height: 180px; }
.auth__body { padding: 40px var(--gutter) 56px; width: 100%; max-width: 560px; margin: 0 auto; }
.auth .title { font-size: clamp(28px, 3vw, 38px); }

/* ── Calendar ── */

.cal-head { padding: 40px 0 28px; }
.stats { display: flex; margin-top: 24px; }
.stats > div { flex: 1; padding-left: 16px; border-left: 1px solid var(--line); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.stats span { font-size: 13px; color: var(--grey); }

.wall { background: var(--moss); padding: 24px 0 32px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* Advent boxes */
.grid { grid-auto-flow: dense; grid-auto-rows: calc((min(100vw, 1200px) - 2 * var(--gutter) - 3 * 12px) / 4 * 1.05); }
.box { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: var(--ink); text-align: center; box-shadow: 0 2px 0 rgba(23,15,12,.08), 0 6px 16px rgba(23,15,12,.12); transition: transform .2s ease, box-shadow .2s ease; }
.box--big { grid-column: span 2; grid-row: span 2; }
.box--tall { grid-row: span 2; }
.box--wide { grid-column: span 2; }
.box--last { grid-column: 3 / span 2; grid-row: 8 / span 2; }

/* wrapping papers, Tipii palette */
.box--p0 { background: radial-gradient(var(--honey) 2.5px, transparent 3px) 0 0 / 18px 18px, var(--banner-red); }
.box--p1 { background: repeating-linear-gradient(45deg, rgba(233,188,105,.85) 0 2px, transparent 2px 12px), var(--rust); }
.box--p2 { background: url('../img/tipii-sticker-sparkle.svg') 0 0 / 28px 28px, var(--moss); }
.box--p3 { background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 6px, transparent 6px 16px), var(--peach); }
.box--p4 { background: radial-gradient(var(--banner-red) 2px, transparent 2.5px) 0 0 / 14px 14px, var(--honey); }

.box__tag { position: relative; z-index: 2; min-width: 46px; padding: 6px 10px 5px; border-radius: 8px; background: var(--white); font-family: var(--font-heading); font-weight: 700; font-size: clamp(18px, 4.6vw, 26px); line-height: 1; letter-spacing: -0.02em; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 3px 8px rgba(23,15,12,.18); }
.box__tag::before { content: ''; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: inherit; box-shadow: inset 0 0 0 2px rgba(23,15,12,.15); }
.box--big .box__tag { font-size: clamp(30px, 8vw, 46px); padding: 10px 16px 8px; }
.box--locked:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 2px 0 rgba(23,15,12,.08), 0 14px 26px rgba(23,15,12,.18); }

/* today: gift with ribbon, bow and a shine sweep */
.box--today { cursor: pointer; outline: 3px solid var(--honey); outline-offset: 2px; animation: glow 2.4s ease-in-out infinite; }
.box--today:hover { transform: translateY(-4px) scale(1.02); }
.box__ribbon-v, .box__ribbon-h { position: absolute; z-index: 1; background: linear-gradient(90deg, #d9a54d, var(--honey) 40%, #f3d394 55%, var(--honey) 70%, #d9a54d); }
.box__ribbon-v { top: 0; bottom: 0; left: 50%; width: 14%; transform: translateX(-50%); }
.box__ribbon-h { left: 0; right: 0; top: 50%; height: 14%; transform: translateY(-50%); background: linear-gradient(180deg, #d9a54d, var(--honey) 40%, #f3d394 55%, var(--honey) 70%, #d9a54d); }
.box__bow { position: absolute; z-index: 3; width: 30%; max-width: 56px; top: 6%; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 3px 4px rgba(23,15,12,.3)); }
.box--today .box__tag { font-size: clamp(16px, 4vw, 24px); }
.box__shine { position: absolute; z-index: 4; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); transform: translateX(-120%); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
.box__cta { position: absolute; z-index: 5; bottom: 6px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: var(--pill); background: var(--white); color: var(--ink); font-family: var(--font-heading); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; box-shadow: 0 2px 6px rgba(23,15,12,.2); }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes glow { 0%, 100% { box-shadow: 0 6px 16px rgba(23,15,12,.15); } 50% { box-shadow: 0 0 0 8px rgba(233,188,105,.35), 0 10px 26px rgba(201,65,47,.35); } }

/* catch-up: still wrapped, a little faded */
.box--catchup { cursor: pointer; outline: 2px dashed var(--banner-red); outline-offset: 2px; filter: saturate(.75); }
.box--catchup:hover { filter: none; transform: translateY(-3px); }

/* opened: the photo print inside */
.box--opened, .box--won { background: var(--white); padding: 6px 6px 14px; }
.box__photo { position: absolute; inset: 6px 6px 14px; border-radius: 4px; background: var(--moss) center / cover no-repeat; }
.box--opened .box__photo { filter: saturate(.85); }
.box__day { position: absolute; z-index: 2; left: 10px; top: 10px; padding: 2px 7px; border-radius: var(--pill); background: rgba(255,255,255,.9); font-family: var(--font-heading); font-weight: 700; font-size: 12px; }
.box--won { background: var(--honey); box-shadow: 0 0 0 2px var(--honey), 0 8px 20px rgba(233,188,105,.45); }
.box__won { position: absolute; z-index: 3; top: 12px; right: -30px; width: 110px; padding: 3px 0; transform: rotate(38deg); background: var(--banner-red); color: var(--white); font-family: var(--font-heading); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.box__bow--small { width: 30%; max-width: 40px; top: auto; left: auto; right: 6px; bottom: 8px; transform: none; }

/* closed doors: still a wrapped box, just switched off */
.box--missed, .box--past { filter: grayscale(1); box-shadow: 0 2px 0 rgba(23,15,12,.06); }
.box--missed::after, .box--past::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(250, 249, 246, .55); }
.box--past::after { background: rgba(250, 249, 246, .65); }
.box--missed .box__tag, .box--past .box__tag { color: var(--grey); box-shadow: none; }
.box__stamp { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%) rotate(-6deg); padding: 2px 8px; border: 1.5px solid var(--ink); border-radius: 4px; background: rgba(255,255,255,.85); font-family: var(--font-heading); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); white-space: nowrap; }

@keyframes pulse { 0%, 100% { box-shadow: var(--shadow-print); } 50% { box-shadow: 0 0 0 6px rgba(233, 188, 105, .35), var(--shadow-print); } }

.gain { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.gain:first-of-type { border-top: 0; padding-top: 4px; }
.gain img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.gain code { font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--rust); }
.copy { font-family: var(--font-heading); font-size: 12px; text-decoration: underline; }
.countdown { font-family: var(--font-heading); font-weight: 600; font-size: 28px; font-variant-numeric: tabular-nums; }
.countdown-boxes { display: flex; gap: 10px; }
.countdown-boxes > div { flex: 1; background: var(--banner-red); color: var(--white); border-radius: var(--radius); padding: 14px; text-align: center; }
.countdown-boxes strong { display: block; font-family: var(--font-heading); font-size: 28px; font-variant-numeric: tabular-nums; }
.countdown-boxes span { font-size: 12px; color: var(--blush); }

/* ── Reveal modal ── */

.modal { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--banner-red); color: var(--white); overflow-y: auto; animation: fade .25s ease-out; }
.modal--light { background: var(--feather); color: var(--ink); }
.modal__inner { width: 100%; max-width: 520px; margin: auto; padding: 24px var(--gutter) 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.modal__inner .title { text-align: center; font-size: clamp(26px, 3vw, 36px); }
.modal__inner form { width: 100%; text-align: left; }
.modal__stage { position: relative; width: 100%; height: 300px; }
.modal__stage .print { width: 200px; height: 248px; left: calc(50% - 100px); top: 24px; transform: rotate(-4deg); }
.modal__stage .print--back .face { width: 100%; height: 100%; display: grid; place-items: center; background: var(--banner-red); font-family: var(--font-heading); font-weight: 700; font-size: 72px; color: var(--white); }
.modal__stage .print--developing img { animation: develop 1.4s ease-out both; }
@keyframes develop { from { filter: blur(14px) brightness(1.8) sepia(.6); opacity: .2; } to { filter: none; opacity: 1; } }
.modal__stage .print--shake { animation: shake .9s ease-in-out infinite; }
@keyframes shake { 0%,100% { transform: rotate(-4deg); } 25% { transform: rotate(-1deg) translateY(-4px); } 75% { transform: rotate(-7deg) translateY(-2px); } }
.modal__stage .sticker { position: absolute; }
.modal__stage .sticker--flower { width: 70px; left: calc(50% + 48px); top: 200px; }
.modal__stage .sticker--sparkle { width: 40px; left: calc(50% - 140px); top: 30px; }
.modal__stage .sticker--sparkle2 { width: 32px; left: calc(50% + 110px); top: 26px; }
.code-box { width: 100%; padding: 14px; border: 1.5px dashed var(--honey); border-radius: var(--radius); font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: .08em; color: var(--honey); }
.notice { width: 100%; padding: 16px; border-radius: var(--radius); background: rgba(255,255,255,.14); text-align: left; font-size: 15px; }
.modal--light .notice { background: var(--feather); }
.consolation { display: flex; gap: 14px; align-items: center; padding: 16px; background: var(--white); border-radius: var(--radius); text-align: left; font-size: 14px; }
.consolation .tag { background: var(--honey); border-color: var(--honey); font-weight: 600; white-space: nowrap; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes fade { from { opacity: 0; } }

.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 20px; border-radius: var(--pill); background: var(--honey); color: var(--ink); font-family: var(--font-heading); font-size: 14px; box-shadow: var(--shadow-print-lg); animation: fade .2s; }
.loading { min-height: 60vh; display: grid; place-items: center; color: var(--grey); }

/* ── Demo panel (mock only) ── */

.demo-fab { position: fixed; z-index: 80; left: 12px; bottom: 12px; padding: 8px 14px; border-radius: var(--pill); background: var(--honey); color: var(--olivewood); font-family: var(--font-heading); font-weight: 600; font-size: 12px; box-shadow: var(--shadow-print-lg); }
.demo { position: fixed; z-index: 81; left: 12px; bottom: 56px; width: min(360px, calc(100% - 24px)); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 16px; border-radius: var(--radius); background: var(--white); border: 1.5px solid var(--olivewood); box-shadow: var(--shadow-print-lg); font-size: 13px; }
.demo h4 { font-family: var(--font-heading); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 8px; }
.demo h4:first-child { margin-top: 0; }
.demo .row { flex-wrap: wrap; --gap: 6px; }
.demo button.chip { padding: 6px 10px; border: 1px solid var(--olivewood); border-radius: var(--pill); font-size: 12px; font-family: var(--font-heading); }
.demo button.chip--on { background: var(--olivewood); color: var(--white); }
.demo input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.demo .mail { padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.demo .mail strong { font-family: var(--font-heading); }
.demo .moments { display: flex; flex-wrap: wrap; gap: 3px; }
.demo .moments span { width: 12px; height: 12px; border-radius: 2px; background: var(--moss); }
.demo .moments .user { background: var(--honey); }
.demo .moments .colleague { background: var(--grey); }
.demo .moments .due { background: var(--rust); }
.mail-toast { position: fixed; z-index: 75; top: 12px; right: 12px; left: 12px; max-width: 360px; margin-left: auto; padding: 14px 16px; border-radius: var(--radius); background: var(--white); border-left: 4px solid var(--honey); box-shadow: var(--shadow-print-lg); font-size: 14px; text-align: left; animation: fade .2s; }
.mail-toast strong { font-family: var(--font-heading); }

/* ── Responsive ── */

@media (min-width: 560px) and (max-width: 899px) {
  .grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: calc((100vw - 2 * var(--gutter) - 5 * 12px) / 6 * 1.1); }
  .box--last { grid-column: 5 / span 2; grid-row: 5 / span 2; }
  .prizes { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  :root { --gutter: 48px; }
  .header .container { height: 76px; }
  .header__logo img { height: 40px; }
  .header__cse { font-size: 32px; max-width: 320px; }
  .header .hide-mobile { display: inline; }
  .section { padding: 88px 0; }
  .lead { font-size: 18px; }

  .banner { grid-template-columns: 1fr 1fr; min-height: 460px; }
  .banner--reverse .banner__media { order: 2; }
  .banner__media { min-height: 460px; }
  .banner__block { padding: 56px 72px; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .step { flex-direction: column; gap: 12px; }
  .step__num { font-size: 48px; }
  .prizes { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .faq-layout { display: grid; grid-template-columns: 400px 1fr; gap: 80px; align-items: start; }
  .faq-layout .faq { margin-top: 0; }

  .auth { grid-template-columns: 1fr 1fr; min-height: calc(100dvh - 113px); }
  .auth .banner__media { order: 2; min-height: 100%; }
  .auth__body { align-self: center; }

  .cal-head .container { display: flex; align-items: flex-end; gap: 40px; }
  .cal-head .stats { margin-top: 0; flex: 0 0 auto; }
  .stats > div { padding: 0 28px; flex: 0 0 auto; }
  .stats strong { font-size: 32px; }
  .wall { padding: 56px 0; }
  .grid { grid-template-columns: repeat(6, 1fr); gap: 18px; grid-auto-rows: 150px; }
  .box--last { grid-column: 5 / span 2; grid-row: 5 / span 2; }

  .modal { background: rgba(201, 65, 47, .96); }
  .modal--light { background: rgba(250, 249, 246, .97); }
}

@media (max-width: 899px) {
  .hide-on-mobile { display: none !important; }
  .header .container { grid-template-columns: 1fr auto; gap: 12px; }
  .header__left { display: none; }
  .header__right { white-space: nowrap; }
  .header__logo img { height: 28px; }
  .header__cse { font-size: 22px; }
}

@media (max-height: 820px) {
  .modal__stage { height: 240px; }
  .modal__stage .print { width: 160px; height: 200px; left: calc(50% - 80px); top: 14px; }
  .modal__stage .sticker--flower { width: 56px; top: 160px; left: calc(50% + 40px); }
  .modal__inner { gap: 10px; padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ── Landing v3: hero with calendar preview, marquee, vertical timeline ── */

.hero2 { display: grid; grid-template-columns: 1fr; background: var(--banner-red); color: var(--white); }
.hero2__block { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 44px var(--gutter) 40px; }
.hero2__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: .98; letter-spacing: -0.035em; text-transform: uppercase; }
.hero2__title em { font-style: normal; color: var(--honey); }
.hero2__block p { font-size: 17px; max-width: 460px; color: var(--blush); }
.hero2__media { position: relative; min-height: 420px; background: center/cover no-repeat; overflow: hidden; }
.hero2__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,15,12,0) 40%, rgba(23,15,12,.35)); }
.hero2__flower { position: absolute; width: 76px; left: 7%; top: 8%; z-index: 2; animation: float 6s ease-in-out infinite; }
.mini-cal { position: absolute; z-index: 2; right: 6%; bottom: 7%; width: min(300px, 78%); padding: 14px; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 20px 50px rgba(23,15,12,.35); transform: rotate(-3deg); animation: float 7s ease-in-out infinite; }
.mini-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: var(--font-heading); font-size: 11px; color: var(--grey); }
.mini-cal__head img { height: 18px; width: auto; }
.mini-cal__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mini-cal__tile { aspect-ratio: 4 / 5; border-radius: 3px; background: var(--feather) center/cover; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 10px; box-shadow: 0 1px 2px rgba(23,15,12,.15); border: 2px solid var(--white); }
.mini-cal__tile--won { background: var(--honey) url('../img/photobook.jpg') center/cover; border-color: var(--honey); }
.mini-cal__tile--today { background: var(--banner-red); color: var(--white); border-color: var(--honey); animation: pulse 2.4s ease-in-out infinite; }
.mini-cal__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--font-heading); font-size: 12px; font-weight: 500; }
.mini-cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--banner-red); box-shadow: 0 0 0 4px rgba(201,65,47,.2); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.marquee { background: var(--honey); overflow: hidden; border-block: 1px solid rgba(23,15,12,.08); }
.marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; padding: 14px 0; animation: marquee 32s linear infinite; }
.marquee__track span { font-family: var(--font-heading); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.marquee__track img { width: 18px; height: 18px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.how { display: grid; gap: 36px; }
.timeline { list-style: none; position: relative; display: flex; flex-direction: column; gap: 36px; }
.timeline::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--honey), var(--banner-red)); border-radius: 2px; }
.timeline__step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
.timeline__dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--honey); font-family: var(--font-heading); font-weight: 700; font-size: 18px; box-shadow: 0 0 0 6px var(--white); }
.timeline__dot--last { background: var(--banner-red); color: var(--white); }
.timeline__body { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.timeline__body .h3 { font-size: 20px; }
.timeline__body .small { font-size: 15px; max-width: 460px; }
.timeline__visual { margin-top: 10px; }
.fake-input { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--grey); font-size: 15px; box-shadow: 0 6px 18px rgba(23,15,12,.06); }
.fake-otp { display: flex; gap: 6px; }
.fake-otp span { width: 38px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); font-family: var(--font-heading); font-weight: 600; font-size: 18px; box-shadow: 0 6px 18px rgba(23,15,12,.06); }
.fake-tiles { display: flex; gap: 10px; }
.fake-tile { position: relative; width: 56px; aspect-ratio: 4 / 5; border: 4px solid var(--white); border-bottom-width: 10px; border-radius: 3px; background: var(--feather) center/cover; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 18px; box-shadow: var(--shadow-print); }
.fake-tile:nth-child(1) { transform: rotate(-4deg); }
.fake-tile:nth-child(2) { transform: rotate(3deg); }
.fake-tile--won { border-color: var(--honey); }
.fake-tile--won img { position: absolute; width: 26px; right: -8px; bottom: -8px; }
.fake-tile--today { background: var(--banner-red); color: var(--white); outline: 2px solid var(--honey); }

.footer__brands { border-top: 1px solid var(--line); }
.footer__brands .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; padding-top: 18px; padding-bottom: 18px; }
.footer__brand-link { font-family: var(--font-heading); font-weight: 600; font-size: 15px; text-decoration: none; }
.footer__brand-link:hover { color: var(--banner-red); }

@media (min-width: 900px) {
  .hero2 { grid-template-columns: 1.05fr 1fr; min-height: calc(100dvh - 113px); max-height: 820px; }
  .hero2__block { padding: 72px 72px 72px max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); }
  .hero2__media { min-height: 100%; }
  .how { grid-template-columns: 400px 1fr; gap: 80px; align-items: start; }
  .how__intro { position: sticky; top: 120px; }
  .timeline { gap: 56px; }
}

/* ── Calendar page: today strip, reminder switch, gain cards ── */

.strip { background: var(--banner-red); color: var(--white); }
.strip--honey { background: var(--honey); color: var(--ink); }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 26px; padding-bottom: 26px; }
.strip__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; }
.strip p { color: var(--blush); font-size: 15px; }
.strip--honey p { color: var(--ink); opacity: .75; }
.strip__countdown { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-family: var(--font-heading); }
.strip__countdown span { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.strip__countdown strong { font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--banner-red); font-variant-numeric: tabular-nums; line-height: 1; }

.switch { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; width: 42px; height: 24px; border-radius: var(--pill); background: var(--line); transition: background .2s; }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(23,15,12,.3); transition: transform .2s; }
.switch input:checked + .switch__track { background: var(--banner-red); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--rust); outline-offset: 2px; }

.gain-card { gap: 8px; }
.gain-card__media { position: relative; }
.gain-card__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.gain-card__day { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: var(--pill); background: var(--honey); font-family: var(--font-heading); font-weight: 600; font-size: 12px; }
.gain-card__code { display: block; padding: 8px 12px; border: 1.5px dashed var(--banner-red); border-radius: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: .06em; color: var(--rust); }
.gain-card .btn { align-self: flex-start; }

/* premium header touches */
.header__cse::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: var(--line); }
.header__x + .header__cse { padding-left: 0; }
.header__x + .header__cse::before { display: none; }
.account { display: inline-flex; align-items: center; gap: 10px; }
.account__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--honey); font-family: 'Instrument Serif', serif; font-size: 20px; line-height: 1; }
.account__name { font-family: var(--font-heading); font-size: 13px; }
.account__out { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--grey); transition: color .15s, border-color .15s; }
.account__out:hover { color: var(--banner-red); border-color: var(--banner-red); }
@media (min-width: 900px) {
  .header .container { height: 84px; }
}
@media (max-width: 899px) {
  .account__name { display: none; }
}