/* SaaleMomente premium layer: one shared foundation for Schmiedehafen, SaaleSpa, SaaleMomente and Reisebüro Traeger.
   Loaded last on every page. It unifies type, raises readability and touch comfort, and adds the quiet signature
   effects (waterline, blur-in headings, slow camera, film grain, shine and light-edge buttons).
   All motion stops with "reduce motion". Fonts are self-hosted (SIL Open Font License). */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-display-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfair-display-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/playfair-display-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/dm-sans-latin-600-normal.woff2) format('woff2')}

/* ---------- Tokens: shared base, one accent per house ---------- */
html.sm-p{
  --sm-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sm-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --sm-lake:#0e2a33;        /* Seetiefe */
  --sm-slate:#3a4a50;       /* Schiefer */
  --sm-mist:#f2efe8;        /* Birkenweiß */
  --sm-accent:#b5703f;      /* Kupfer (Schmiedehafen) */
  --sm-accent-glow:#e9b88b;
  --sm-ease:cubic-bezier(.2,.7,.2,1);
}
html.sm-p[data-sm-site=saalespa]{--sm-accent:#b8925a;--sm-accent-glow:#e3c48f}
html.sm-p[data-sm-site=saalemomente]{--sm-accent:#2f5d4f;--sm-accent-glow:#c9ac7e}
html.sm-p[data-sm-site=reisebuero]{--sm-accent:#2f6f8f;--sm-accent-glow:#d5bd99}

/* ---------- Typography: Playfair headings, DM Sans everywhere else ---------- */
html.sm-p body{font-family:var(--sm-sans)!important}
html.sm-p body :is(p,li,a,button,input,select,textarea,label,span,small,figcaption,dd,dt,td,th,summary,strong,em,b,i,address,legend,output,time):not(:is(.brand,.wordmark,.cinema-brand,.logo,[class*=logo],[class*=wordmark],[class*=-brand]),:is(.brand,.wordmark,.cinema-brand,.logo,[class*=logo],[class*=wordmark],[class*=-brand],h1,h2,h3,.sm-serif,.sm-cine-copy,.sm-tod-copy,.sm-letters-end,.sm-flow,.sm-track,.sm-count,.spa-more-grid,.sm-steps) *){
  font-family:var(--sm-sans)!important}
html.sm-p body :is(h1,h2,h3,.sm-serif,main blockquote),
html.sm-p body .sm-privacy h2{
  font-family:var(--sm-serif)!important;font-weight:500!important;font-kerning:normal;
  font-variant-ligatures:common-ligatures;text-wrap:balance}
html.sm-p body :is(h1,h2,h3) :is(span,em,strong,b,i,small,a,br){font-family:inherit!important}
html.sm-p body :is(h1,h2) em,html.sm-p body :is(h1,h2) i{font-style:italic;font-weight:500}
/* Reisebüro keeps its light, modern headline in the opening film (decision 13.10.2026) */
html.sm-p[data-sm-site=reisebuero] body :is(.voyage,.hero-inner,.cinema-hero) h1,
html.sm-p[data-sm-site=reisebuero] body :is(.voyage,.hero-inner,.cinema-hero) h1 *{font-family:var(--sm-sans)!important;font-weight:400!important;letter-spacing:-.025em}

/* Comfortable reading: running text never below 16px on phones, lines stay calm */
html.sm-p main :is(p,li):not([class]){font-size:max(13px, max(16px,1em));line-height:1.62}
html.sm-p main :is(p,li):not([class]) :is(small){font-size:max(13px,.85em)}
html.sm-p body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Touch comfort: every control at least 44px tall ---------- */
html.sm-p .sm-tap{min-height:44px!important;display:inline-flex!important;align-items:center;box-sizing:border-box}
html.sm-p .sm-tap.sm-tap-block{display:flex!important}
html.sm-p .sm-tap-grow{padding-block:max(var(--sm-tap-pad,0px),0px)!important}

/* ---------- Signature 1: the waterline under every opening image ---------- */
.sm-waterline{position:absolute;left:0;right:0;bottom:-1px;height:clamp(28px,6vw,64px);pointer-events:none;z-index:3;display:block;overflow:visible}
.sm-waterline path{fill:var(--sm-wl,#f2efe8)}
.sm-waterline path.sm-wl-ghost{opacity:.42}
.sm-wl-host{position:relative}

/* ---------- Signature 2: headings settle out of the haze ---------- */
.sm-blur-word{display:inline-block!important;opacity:0;filter:blur(12px);transform:translateY(.35em);
  animation:sm-blur-in 1s var(--sm-ease) forwards;animation-delay:calc(var(--i,0)*90ms + 120ms)}
.sm-haze{opacity:0;filter:blur(10px);transform:translateY(14px);transition:opacity 1s var(--sm-ease),filter 1s var(--sm-ease),transform 1s var(--sm-ease)}
.sm-haze.sm-in{opacity:1;filter:none;transform:none}
@keyframes sm-blur-in{to{opacity:1;filter:blur(0);transform:none}}

/* ---------- Signature 3: slow camera on opening photos ---------- */
.sm-kenburns{animation:sm-kb 26s ease-in-out infinite alternate;transform-origin:58% 62%;will-change:transform}
@keyframes sm-kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.sm-kb-clip{overflow:hidden}

/* ---------- Signature 4: fine film grain on opening images ---------- */
.sm-grain{position:absolute;inset:-60%;z-index:2;pointer-events:none;opacity:.11;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:sm-grain 1.2s steps(5) infinite}
@keyframes sm-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}

/* ---------- Signature 5: buttons that catch the light ---------- */
.sm-shine{position:relative!important;overflow:hidden!important;isolation:isolate}
.sm-shine::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-120%);animation:sm-shine 4.2s ease-in-out infinite 1.4s}
@keyframes sm-shine{55%,100%{transform:translateX(120%)}}
@property --sm-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.sm-beam{position:relative!important;isolation:isolate}
.sm-beam::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--sm-a),transparent 0 68%,var(--sm-accent-glow) 84%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:sm-spin 4.5s linear infinite}
@keyframes sm-spin{to{--sm-a:360deg}}

/* ---------- One calm consent dialog for the whole family ---------- */
html.sm-p .sm-privacy{border-radius:22px!important;padding:24px 22px 18px!important;
  box-shadow:0 30px 80px -24px rgba(6,23,35,.45),0 0 0 1px rgba(6,23,35,.06)!important;
  backdrop-filter:saturate(1.2)}
html.sm-p .sm-privacy h2{font-size:clamp(22px,5.4vw,28px)!important;line-height:1.15!important;margin-bottom:10px!important}
html.sm-p .sm-privacy .sm-privacy-kicker{font-size:13px!important;letter-spacing:.08em!important;color:var(--sm-accent)!important}
html.sm-p .sm-privacy-intro{font-size:15px!important;line-height:1.55!important}
html.sm-p .sm-privacy :is(.sm-privacy-choice,.sm-privacy-save){min-height:48px!important;border-radius:999px!important;font-weight:600!important;font-size:15px!important}
html.sm-p .sm-privacy a,html.sm-p .sm-privacy-links button{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:760px){html.sm-p .sm-privacy{width:min(560px,calc(100% - 48px))!important;left:auto!important;right:28px!important;transform:none!important;bottom:28px!important}}

/* ---------- Focus that is easy to see ---------- */
html.sm-p :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--sm-accent-glow)!important;outline-offset:3px!important;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .sm-blur-word,.sm-haze{opacity:1!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important}
  .sm-kenburns,.sm-grain,.sm-shine::after,.sm-beam::before{animation:none!important}
}

/* =====================================================================
   Signature components (stage 2). Each one is opt-in through markup.
   ===================================================================== */
.sm-sec{max-width:1180px;margin:clamp(48px,9vw,110px) auto;padding-inline:16px;display:flex;flex-direction:column;gap:22px}
.sm-sec-head{display:flex;flex-direction:column;gap:10px;max-width:62ch}
.sm-sec-head h2{font-size:clamp(28px,6.4vw,46px);line-height:1.08;margin:0;color:inherit}
.sm-sec-head p{margin:0;font-size:max(13px, max(16px,1rem));line-height:1.6;opacity:.82}
.sm-dark{background:var(--sm-lake);color:#f3efe7}

/* 3D gallery to swipe */
.sm-flow{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.sm-flow .sm-slide{flex:0 0 min(78vw,340px);scroll-snap-align:center;margin:0;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:#ddd5c8}
.sm-flow .sm-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.sm-flow .sm-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(6,20,28,.72));pointer-events:none}
.sm-flow figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#f6f2ea;font-family:var(--sm-serif)!important;font-size:20px;line-height:1.2}
.sm-flow.sm-3d{display:block;overflow:hidden;height:min(122vw,520px);perspective:1100px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;padding:0}
.sm-flow.sm-3d:active{cursor:grabbing}
.sm-flow.sm-3d .sm-slide{position:absolute;top:8px;left:50%;width:min(72vw,330px);margin-left:calc(min(72vw,330px) / -2);transform-style:preserve-3d;will-change:transform;box-shadow:0 34px 60px -32px rgba(6,20,28,.6)}
.sm-flow-nav{display:flex;align-items:center;justify-content:center;gap:16px}
.sm-flow-nav button{width:48px;height:48px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;font-size:18px;cursor:pointer;opacity:.85}
.sm-dots{display:flex;gap:7px}
.sm-dots span{width:7px;height:7px;border-radius:99px;background:currentColor;opacity:.25;transition:width .35s,opacity .35s}
.sm-dots span.on{width:22px;opacity:1;background:var(--sm-accent)}
.sm-flow-nav{display:none}
.sm-flow.sm-3d+.sm-flow-nav{display:flex}

/* Marquee */
.sm-marquee{overflow:hidden;padding-block:18px;border-block:1px solid color-mix(in srgb,currentColor 14%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.sm-track{display:flex;gap:42px;width:max-content;animation:sm-mq 44s linear infinite}
.sm-marquee:hover .sm-track,.sm-marquee:focus-within .sm-track{animation-play-state:paused}
.sm-track span{font-family:var(--sm-serif)!important;font-style:italic;font-size:clamp(24px,5.4vw,36px);white-space:nowrap;display:flex;align-items:center;gap:42px}
.sm-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sm-accent)}
.sm-marquee.sm-quiet .sm-track span{font-family:var(--sm-sans)!important;font-style:normal;font-size:15px;letter-spacing:.06em}
@keyframes sm-mq{to{transform:translateX(-50%)}}

/* Spotlight cards */
[data-sm-spotlight] > *{--x:50%;--y:50%}
.sm-spot{position:relative;isolation:isolate}
.sm-spot::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--x) var(--y),color-mix(in srgb,var(--sm-accent-glow) 38%,transparent),transparent 62%)}
.sm-spot:hover::before,.sm-spot.sm-touch::before{opacity:1}

/* Cinema reveal */
.sm-cine{position:relative;height:175vh;margin-block:clamp(24px,6vw,64px)}
.sm-cine-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sm-cine-frame{position:relative;width:100%;height:84vh;height:84svh;overflow:hidden;clip-path:inset(var(--ci,14%) var(--ci,14%) round 22px);background:var(--sm-lake)}
.sm-cine-frame img{width:100%;height:100%;object-fit:cover;transform:scale(var(--cs,1.18));display:block}
.sm-cine-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,20,28,.74));pointer-events:none}
.sm-cine-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px clamp(20px,5vw,64px);color:#f6f2ea;opacity:var(--co,1);transform:translateY(var(--cy,0px));display:flex;flex-direction:column;gap:8px;max-width:900px}
.sm-cine-copy p{margin:0;font-size:max(13px, max(16px,1rem));opacity:.88}
.sm-cine-copy strong{font-family:var(--sm-serif)!important;font-weight:500;font-size:clamp(30px,7vw,58px);line-height:1.06}

/* Countdown */
.sm-count{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;padding:clamp(24px,5vw,40px);border-radius:24px;background:var(--sm-lake);color:#f3efe7}
@media (min-width:700px){.sm-count{grid-template-columns:auto 1fr;gap:40px}}
.sm-count-num{font-family:var(--sm-serif)!important;font-size:clamp(92px,22vw,168px);line-height:.88;color:var(--sm-accent-glow);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sm-count h2{font-size:clamp(24px,5vw,34px);margin:0;color:inherit}
.sm-count p{margin:0;opacity:.84;font-size:max(13px, max(16px,1rem))}
.sm-count .sm-count-copy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sm-count a{color:#0e2a33;background:var(--sm-accent-glow);border-radius:999px;padding:12px 22px;min-height:48px;display:inline-flex;align-items:center;font-weight:600;text-decoration:none}

/* Light paths between the houses */
.sm-beams{border-radius:24px;padding:12px;background:color-mix(in srgb,currentColor 4%,transparent)}
.sm-beams svg{display:block;width:100%;max-width:680px;height:auto;margin:0 auto}
.sm-beams .b-base{stroke:color-mix(in srgb,currentColor 16%,transparent);stroke-width:1.4;fill:none}
.sm-beams .b-flow{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:30 270;animation:sm-flow 3.8s linear infinite}
@keyframes sm-flow{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
.sm-beams .b-node{fill:var(--sm-node-bg,#fbf9f4);stroke:color-mix(in srgb,currentColor 20%,transparent)}
.sm-beams .b-hub{fill:var(--sm-lake);stroke:var(--sm-accent-glow);stroke-width:1.5}
.sm-beams text{font-family:var(--sm-sans);font-size:13px;fill:currentColor;text-anchor:middle}
.sm-beams .b-hubt{font-family:var(--sm-serif);font-size:14px;fill:#f6f2ea}
.sm-beams a{cursor:pointer}

/* Mood by time of day */
.sm-tod{position:relative;border-radius:24px;overflow:hidden;min-height:min(640px,84svh);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;background:var(--sm-lake);color:#f3efe7}
.sm-tod img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:0;transform:scale(1.07);transition:opacity 1.4s ease,transform 9s ease}
.sm-tod img.on{opacity:1;transform:scale(1)}
.sm-tod::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(6,20,28,.4),transparent 32%,transparent 45%,rgba(6,20,28,.86))}
.sm-tod-top{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:14px}
.sm-tod-clock{display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.sm-tod-clock i{width:8px;height:8px;border-radius:50%;background:var(--sm-accent-glow);box-shadow:0 0 12px var(--sm-accent-glow);animation:sm-pulse 2s ease-in-out infinite}
@keyframes sm-pulse{50%{opacity:.35}}
.sm-tod-copy{padding:22px 20px 20px;display:flex;flex-direction:column;gap:12px}
.sm-tod-copy strong{font-family:var(--sm-serif)!important;font-weight:500;font-size:clamp(34px,9vw,60px);line-height:1.05}
.sm-tod-copy p{margin:0;opacity:.86;max-width:56ch}
.sm-tod-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;border-radius:99px;background:rgba(6,20,28,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(243,239,231,.16);max-width:520px}
.sm-tod-chips button{border:0;background:transparent;color:rgba(243,239,231,.84);padding:10px 4px;border-radius:99px;font-size:14px;cursor:pointer;min-height:44px}
.sm-tod-chips button[aria-pressed=true]{background:#f3efe7;color:#0e2a33;font-weight:600}

/* Water to touch and sauna steam */
.sm-ripple{position:relative;touch-action:pan-y}
.sm-ripple canvas.sm-gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.sm-ripple .sm-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;font-size:13px;padding:8px 14px;border-radius:99px;background:rgba(6,20,28,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#f3efe7;white-space:nowrap;pointer-events:none;transition:opacity .5s}
.sm-steam{position:relative}
.sm-steam canvas.sm-steam-cv{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* Film through letters */
.sm-letters{position:relative;height:260vh}
.sm-letters-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sm-letters canvas{width:100%;height:100%;display:block}
.sm-letters-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-size:14px;opacity:.7;transition:opacity .4s}
.sm-letters-end{position:absolute;left:16px;right:16px;bottom:34px;color:#f6f2ea;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s;max-width:760px;margin:0 auto}
.sm-letters-end strong{font-family:var(--sm-serif)!important;font-weight:500;font-size:clamp(30px,8vw,52px);line-height:1.06}
.sm-letters-end.show{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .sm-track,.sm-beams .b-flow,.sm-tod-clock i{animation:none!important}
  .sm-cine{height:auto}.sm-cine-stick{position:relative;height:auto}.sm-cine-frame{clip-path:none;height:70vh}
  .sm-letters{height:auto}.sm-letters-stick{position:relative;height:70vh}
}

/* Cinematic opening of a hero photo */
.sm-open{animation:sm-open 1.9s var(--sm-ease) .15s both}
@keyframes sm-open{from{clip-path:inset(8% 7% round 28px);transform:scale(1.06)}to{clip-path:inset(0 0 round 0);transform:none}}
@media (prefers-reduced-motion:reduce){.sm-open{animation:none}}

/* SaaleSpa sub pages: calm opening and the "more" cards on the start page */
.spa-subhero{background:var(--sm-lake);color:#f3efe7;padding:clamp(120px,22vw,190px) 16px clamp(56px,10vw,96px);position:relative;overflow:hidden}
.spa-subhero::after{content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--sm-accent-glow) 22%,transparent),transparent 70%);pointer-events:none}
.spa-subhero-inner{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.spa-subhero-eyebrow{margin:0;color:var(--sm-accent-glow);font-size:14px;letter-spacing:.08em}
.spa-subhero h1{margin:0;font-size:clamp(40px,10vw,84px);line-height:1.02;color:#f6f2ea;max-width:14ch}
.spa-subhero-lead{margin:0;max-width:52ch;font-size:max(13px, max(17px,1.05rem));line-height:1.6;opacity:.86}
.spa-subhero-cta{align-self:flex-start;margin-top:8px;display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:999px;background:var(--sm-accent-glow);color:#0e2a33;font-weight:600;text-decoration:none}
.spa-more-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:760px){.spa-more-grid{grid-template-columns:repeat(3,1fr)}}
.spa-more-grid a{position:relative;display:flex;flex-direction:column;gap:8px;min-height:170px;padding:24px 22px;border-radius:22px;background:linear-gradient(160deg,#16404c,#0e2a33 70%);border:1px solid rgba(243,239,231,.14);color:#f3efe7;text-decoration:none;overflow:hidden;justify-content:flex-end}
.spa-more-grid strong{font-family:var(--sm-serif)!important;font-weight:500;font-size:clamp(26px,6vw,32px);line-height:1.1}
.spa-more-grid span{opacity:.82;font-size:16px;line-height:1.5;max-width:30ch}
.spa-more-grid i{position:absolute;top:20px;right:22px;font-style:normal;color:var(--sm-accent-glow);font-size:20px}

/* Celebration pages: the day as a calm sequence, then the practical facts */
.sm-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:smstep;border-left:1px solid color-mix(in srgb,var(--sm-accent) 45%,transparent);margin-left:12px}
.sm-steps li{counter-increment:smstep;position:relative;padding:0 0 28px 30px}
.sm-steps li:last-child{padding-bottom:4px}
.sm-steps li::before{content:counter(smstep);position:absolute;left:-15px;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sm-accent);color:#fff;font:600 14px/1 var(--sm-sans)}
.sm-steps strong{display:block;font-family:var(--sm-serif)!important;font-weight:500;font-size:clamp(21px,4.6vw,26px);line-height:1.2;margin-bottom:6px}
.sm-steps p{margin:0;max-width:60ch;font-size:max(13px, max(16px,1rem));line-height:1.62}
@media (min-width:900px){.sm-steps{grid-template-columns:repeat(3,1fr);border-left:0;border-top:1px solid color-mix(in srgb,var(--sm-accent) 45%,transparent);margin:14px 0 0}.sm-steps li{padding:34px 26px 0 0}.sm-steps li::before{left:0;top:-15px}}
.sm-arrive{margin-top:clamp(28px,6vw,52px);padding:clamp(22px,5vw,36px);border-radius:24px;background:color-mix(in srgb,var(--sm-accent) 8%,transparent);display:flex;flex-direction:column;gap:18px}
.sm-arrive-title{font-size:clamp(24px,5vw,32px)!important;margin:0}
.sm-arrive-grid{display:grid;gap:18px}
@media (min-width:760px){.sm-arrive-grid{grid-template-columns:repeat(3,1fr)}}
.sm-arrive-grid h3{margin:0 0 6px;font-size:20px}
.sm-arrive-grid p{margin:0;font-size:max(13px, max(16px,1rem));line-height:1.6}
.sm-arrive-link{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;color:inherit;text-decoration:underline;text-underline-offset:4px}
