/* =====================================================================
   그 시절, 우리가 사랑한 소녀들 — CONCEPT C 「PREMIUM CINEMATIC」
   A film title-sequence: bold brush calligraphy over golden-hour light.
   Big, dramatic, warm, spacious. Vanilla. Mobile-first. Asset-proof.
   ===================================================================== */

/* ---------- fonts ---------- */
/* HS산토끼 — bold handwritten brush-calligraphy (self-hosted single woff2) → big titles.
   Chosen over Gugi because Gugi renders detached ㅏ/ㅓ brush-ticks that read as stray
   middle-dots (·) between syllables; HS산토끼 is bold, warm, legible & artifact-free. */
@font-face{
  font-family:"BrushKR";
  src:url("../fonts/HSSantokki.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
/* MaruBuri serif — the "소녀" lyric voice (self-hosted, CDN-proof) */
@font-face{
  font-family:"MaruBuri";
  src:url("../../_shared/fonts/MaruBuri-Regular.woff2") format("woff2");
  font-weight:400; font-display:swap;
}

/* ---------- design tokens ---------- */
:root{
  /* warm tonal scale (cream → kraft → sepia → cinema dark) */
  --cream-50:#FFFBF2;  --cream-100:#FFF6E1; --cream-200:#FFF0E0; --cream-300:#FFEADB;
  --kraft-400:#F6DEBC; --kraft-500:#ECCB9C; --sepia-600:#D2A772;
  --sepia-700:#9C6B38; --film-800:#3B2A1B; --film-850:#2C1E12; --film-900:#211509;

  /* orange ramp */
  --salmon:#F59051; --secondary:#FA8E49; --primary:#F37321;
  --deep-1:#E45612; --deep-2:#C9450C; --deep-3:#BD4011; --deep-4:#A8380A;

  /* gold ramp (1등 상품권 / cinema accents) */
  --gold-1:#E9C679; --gold-2:#C99A4E; --gold-3:#9C6B38;

  /* ink — AA tuned */
  --ink:#411E00;
  --ink-90:rgba(65,30,0,.90); --ink-85:rgba(65,30,0,.85); --ink-72:rgba(65,30,0,.72);
  --ink-58:rgba(65,30,0,.58); --ink-40:rgba(65,30,0,.40); --ink-20:rgba(65,30,0,.20);
  --on-dark:#FBEBD2; --on-dark-bright:#FFF3DF;
  --on-dark-82:rgba(251,235,210,.86); --on-dark-70:rgba(251,235,210,.78); --on-dark-45:rgba(251,235,210,.5);
  --safelight:#FCC079;

  /* warm kraft disabled (never cold gray) */
  --disabled:#E4D4B8; --disabled-2:#D8C49E; --disabled-ink:#8A6C3E;

  /* warm tinted shadows (never gray) */
  --sh-1:0 2px 10px rgba(96,48,12,.10);
  --sh-2:0 12px 30px rgba(96,48,12,.16);
  --sh-3:0 26px 56px rgba(70,32,8,.26);
  --glow:0 0 0 1px rgba(255,255,255,.5) inset, 0 1px 0 rgba(255,255,255,.7) inset;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --rail:16px;
  --maxw:600px;
  --appbar-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* perforation tiles (rounded sprocket holes) */
  --perf-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27'%3E%3Crect width='16' height='27' fill='%23241810'/%3E%3Crect x='3.2' y='7' width='9.6' height='13' rx='3.4' fill='%23FBEFD6'/%3E%3Crect x='3.2' y='7' width='9.6' height='13' rx='3.4' fill='none' stroke='%23120B05' stroke-width='0.8'/%3E%3C/svg%3E");
  --perf-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='16'%3E%3Crect width='27' height='16' fill='%23241810'/%3E%3Crect x='7' y='3.2' width='13' height='9.6' rx='3.4' fill='%23FBEFD6'/%3E%3C/svg%3E");
  /* film grain */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  /* gold foil sheen */
  --foil:linear-gradient(125deg,rgba(255,247,224,0) 30%,rgba(255,236,196,.85) 46%,rgba(255,255,255,.95) 50%,rgba(255,228,176,.7) 55%,rgba(255,247,224,0) 72%);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
*{word-break:keep-all}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Pretendard Variable",Pretendard,system-ui,sans-serif;
  font-size:16px; line-height:1.64; color:var(--ink);
  background:#E7DAC1;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
em{font-style:normal}
.svg-sprite{position:absolute}
:focus-visible{outline:3px solid var(--deep-1);outline-offset:2px;border-radius:5px}

.serif{font-family:"MaruBuri","Pretendard Variable",serif}
/* the brush-calligraphy display voice */
.brush{font-family:"BrushKR","Pretendard Variable",sans-serif;font-weight:400;line-height:1.16;letter-spacing:.01em}

/* ---------- the reel (centered film column) ---------- */
.reel{
  position:relative;
  max-width:var(--maxw); margin:0 auto;
  padding-top:var(--appbar-h);
  background:
    radial-gradient(130% 70% at 50% -6%, var(--cream-50), transparent 60%),
    linear-gradient(180deg,var(--cream-100),var(--cream-200) 42%,var(--cream-100));
  box-shadow:0 0 70px rgba(70,32,8,.18);
  overflow:hidden;
  isolation:isolate;
}

/* perforation rails framing the reel */
.reel-rail{
  position:fixed; top:0; bottom:0; width:var(--rail); z-index:60;
  background:var(--perf-v); background-size:var(--rail) auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),
             inset -3px 0 6px rgba(0,0,0,.30), inset 3px 0 6px rgba(0,0,0,.30);
  pointer-events:none;
}
.reel-rail--l{left:max(0px,calc(50% - var(--maxw)/2));border-right:1px solid rgba(0,0,0,.3)}
.reel-rail--r{right:max(0px,calc(50% - var(--maxw)/2));border-left:1px solid rgba(0,0,0,.3)}

/* ---------- shared atmospherics ---------- */
.grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:var(--grain); background-size:160px 160px;
  mix-blend-mode:multiply; opacity:.09;
}
.leak{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:screen;filter:blur(24px);border-radius:50%}
.leak--hero{top:-50px;right:-80px;width:280px;height:340px;
  background:radial-gradient(circle at 60% 40%,rgba(255,120,40,.5),rgba(255,160,60,.24) 46%,transparent 72%)}
.leak--theme{bottom:60px;left:-100px;width:280px;height:280px;
  background:radial-gradient(circle,rgba(255,140,70,.26),transparent 72%)}
.leak--prize{top:60px;right:-100px;width:260px;height:300px;
  background:radial-gradient(circle,rgba(255,130,50,.34),transparent 70%)}
.leak--how{bottom:0;left:-100px;width:260px;height:260px;
  background:radial-gradient(circle,rgba(255,120,60,.26),transparent 70%)}

/* ---------- section base ---------- */
section{position:relative;z-index:1;padding:52px var(--gut) 54px;--gut:28px}
.reel>section>*{position:relative;z-index:3}

/* eyebrow — enlarged, confident */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px; font-weight:800; letter-spacing:.12em;
  color:var(--deep-4);
}
.eyebrow__tag{
  font-size:11px;font-weight:900;letter-spacing:.16em;color:#FFF;
  background:linear-gradient(180deg,var(--deep-1),var(--deep-3));
  padding:4px 9px;border-radius:6px;text-shadow:0 1px 1px rgba(74,18,0,.4)}
.eyebrow--ondark{color:var(--safelight)}

/* section heading (non-brush) */
.sec-h{
  font-size:clamp(27px,8vw,33px); font-weight:800; line-height:1.26;
  letter-spacing:-.01em; color:var(--ink); margin:10px 0 24px;
}
.sec-h em{color:var(--deep-2);position:relative;white-space:nowrap}

/* big brush section title */
.brush-h{
  font-family:"BrushKR","Pretendard Variable",sans-serif;font-weight:400;
  font-size:clamp(33px,10vw,42px);line-height:1.26;color:var(--ink);
  margin:12px 0 22px;letter-spacing:.012em;
}
/* 선물 — deep-orange accent, optical letter-spacing so the brush letters breathe */
.brush-h em{color:var(--deep-2);margin:0 .05em;letter-spacing:.05em}

/* =====================================================================
   APPBAR
   ===================================================================== */
.appbar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--maxw),100%); height:var(--appbar-h); z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--rail) + 12px);
  background:rgba(252,248,239,.88); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid rgba(156,107,56,.18);
}
.appbar__perf{position:absolute;left:0;right:0;bottom:-1px;height:4px;
  background:var(--perf-h);background-size:auto 4px;opacity:.45}
.appbar__logo{display:flex;align-items:center;min-height:44px;padding:5px 4px;margin-left:-4px}
.appbar__logo img{height:30px;width:auto;opacity:.96}
.appbar__title{flex:1;text-align:center;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.01em}
.appbar__close{width:44px;height:44px;display:grid;place-items:center;color:var(--ink-72);
  border-radius:var(--r-pill);transition:background .2s}
.appbar__close:active{background:rgba(156,107,56,.12)}

/* =====================================================================
   HERO — the opening title card
   ===================================================================== */
.hero{padding-top:22px;padding-bottom:30px;overflow:hidden;
  background:
    radial-gradient(140% 80% at 50% 8%, rgba(252,213,160,.55), transparent 58%),
    linear-gradient(180deg,#FFF7E8,var(--cream-200) 60%);
}
.hero__eyebrow{justify-content:flex-start;margin-bottom:14px}

/* the cinematic hero frame — a widescreen "opening shot" */
.filmcard{
  position:relative; margin:2px auto 18px; width:100%;
  padding:13px 13px 0; background:#FFFEFA; border-radius:8px;
  box-shadow:var(--sh-3),var(--glow);
  transform:rotate(-1.4deg);
}
.filmcard__tape{position:absolute;width:74px;height:26px;z-index:4;
  background:linear-gradient(135deg,rgba(255,224,176,.82),rgba(255,200,140,.66));
  box-shadow:0 3px 8px rgba(96,48,12,.18);mix-blend-mode:multiply}
.filmcard__tape::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(255,255,255,.25) 5px 6px)}
.filmcard__tape--tl{top:-12px;left:-15px;transform:rotate(-22deg)}
.filmcard__tape--br{bottom:54px;right:-16px;transform:rotate(-20deg);width:62px}
.filmcard__perf{position:absolute;left:13px;right:13px;top:13px;height:6px;z-index:3;
  background:var(--perf-h);background-size:auto 6px;opacity:.8;border-radius:1px}
.filmcard__win{position:relative;aspect-ratio:320/244;overflow:hidden;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(60,32,10,.16), inset 0 10px 26px rgba(60,30,10,.18)}
.filmcard__win::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--grain);background-size:130px;mix-blend-mode:overlay;opacity:.16}
.scene{position:absolute;inset:0;width:100%;height:100%}
.filmcard__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(118deg,rgba(255,255,255,.4),transparent 36%),
            radial-gradient(120% 80% at 82% 8%,rgba(255,214,150,.32),transparent 54%)}
.filmcard__cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 5px 14px}
.filmcard__cap .label{font-family:"MaruBuri",serif;font-size:16px;color:var(--ink-85);letter-spacing:.02em}
.datestamp{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--deep-1);
  font-variant-numeric:tabular-nums}
/* drifting motes in the light */
.js-anim .scene .motes{animation:motesdrift 12s ease-in-out infinite}
@keyframes motesdrift{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(-6px);opacity:.55}}

/* hero brush title — the GIANT moment */
.hero__title{text-align:center;margin:6px 0 14px}
.hero__line{
  display:block; font-family:"BrushKR","Pretendard Variable",sans-serif; font-weight:400;
  line-height:1.1; color:var(--ink); letter-spacing:.01em; white-space:nowrap;
}
.hero__line--1{font-size:clamp(34px,10vw,44px);color:var(--ink-85)}
.hero__line--2{font-size:clamp(39px,12.6vw,53px)}
.hero__line--em{font-size:clamp(58px,18.6vw,80px);margin-top:2px;letter-spacing:.022em}
.hero__em-wrap{position:relative;display:inline-block}
/* 소·녀·들 must read as ONE evenly-kerned word (deep-orange accent for AA contrast) */
.hero__line em{color:var(--deep-2);position:relative;letter-spacing:.022em;margin-right:.004em;
  text-shadow:0 3px 0 rgba(201,69,12,.15)}
/* underline hugs the word — centred under 소·녀·들, never trailing past 들 */
.hero__em-wrap .ul{position:absolute;left:0;width:100%;bottom:-2px;height:20px}

.hero__sub{text-align:center;font-size:clamp(18px,5vw,21px);font-weight:600;
  color:var(--ink-85);margin-top:18px;line-height:1.5}
.hero__sub b{color:var(--deep-2);font-weight:800}

/* date — a quiet understated meta line tucked right under the subtitle (one calm unit) */
.hero__meta{
  display:flex;width:max-content;align-items:center;gap:5px;margin:8px auto 0;
  font-size:12.5px;color:var(--ink-58);letter-spacing:.01em;
}
.hero__meta svg{color:var(--deep-1);opacity:.6;flex:0 0 auto}
.hero__meta span{font-weight:700}
.hero__meta b{color:var(--ink-72);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;margin-left:4px}

/* scroll cue — minimal & subordinate, with generous air above so the focal pair breathes */
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:1px;margin:30px auto 2px;
  color:var(--deep-2);width:max-content;opacity:.8}
.scrollcue__txt{font-size:12.5px;font-weight:700;letter-spacing:.04em}
.scrollcue svg{animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* =====================================================================
   THEME — the luminous cinema title card (one dramatic dark beat)
   ===================================================================== */
.theme{
  background:
    radial-gradient(120% 56% at 50% 24%,rgba(230,148,78,.40),transparent 64%),
    radial-gradient(135% 60% at 50% 93%,rgba(216,122,58,.32),transparent 60%),
    radial-gradient(100% 50% at 50% 2%,rgba(228,86,18,.16),transparent 52%),
    linear-gradient(180deg,#503A22,#41301A 56%,#3A2A14);
  color:var(--on-dark); padding-top:26px; padding-bottom:28px; overflow:hidden;
}
.theme .grain{opacity:.07;mix-blend-mode:overlay}
.filmstrip{position:absolute;left:0;right:0;height:16px;background:var(--perf-h);
  background-size:auto 16px;z-index:4;opacity:.95}
.filmstrip--top{top:0;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.filmstrip--bottom{bottom:0;box-shadow:0 -3px 10px rgba(0,0,0,.3)}
.theme__eyebrow{margin-bottom:11px;color:#FFE2B6;font-size:12px}
.theme__h{
  font-family:"BrushKR","Pretendard Variable",sans-serif;font-weight:400;
  font-size:clamp(34px,10.4vw,44px);line-height:1.22;color:var(--on-dark-bright);
  margin:2px 0 9px;letter-spacing:.012em;
  text-shadow:0 2px 24px rgba(255,150,70,.32);
}
.quote{position:relative;margin:0;padding-left:2px}
.quote__mark{display:block;font-family:"MaruBuri",serif;font-size:50px;line-height:.6;
  color:rgba(252,192,121,.55);margin-bottom:0;height:16px}
.quote__line{font-family:"MaruBuri","Pretendard Variable",serif;
  font-size:clamp(18px,5.4vw,22px);line-height:1.55;color:#FFF7EA;
  letter-spacing:.005em;text-shadow:0 1px 16px rgba(255,178,98,.16)}
.quote__line em{color:#FFCE85;font-weight:700;font-style:normal}
.quote__line .br{display:block}

/* =====================================================================
   PRIZE — compact, premium
   ===================================================================== */
.prize{padding-top:50px;
  background:
    radial-gradient(120% 50% at 50% 0,var(--cream-50),transparent 60%),
    linear-gradient(180deg,var(--cream-200),var(--cream-100))}

.prizes{display:flex;flex-direction:column;gap:16px;margin-top:4px}

/* a prize card: visual (left) + label (right), compact horizontal */
.pcard{position:relative;display:flex;align-items:stretch;gap:14px;
  padding:14px;border-radius:var(--r-lg);background:linear-gradient(180deg,#FFFFFF,#FFF8EE);
  box-shadow:var(--sh-2);border:1px solid rgba(156,107,56,.14);overflow:hidden}
.pcard__rank{position:absolute;top:0;left:0;z-index:5;
  font-size:12px;font-weight:900;letter-spacing:.04em;color:#FFF;
  padding:6px 14px 6px 12px;border-radius:var(--r-lg) 0 var(--r-md) 0;
  text-shadow:0 1px 1px rgba(70,20,0,.5)}
.pcard--gold{border-color:rgba(201,154,78,.5);
  box-shadow:var(--sh-3),0 0 0 1.5px rgba(201,154,78,.4)}
.pcard--gold .pcard__rank{background:linear-gradient(180deg,#9A6A2C,#6E4A1C)}
.pcard--silver .pcard__rank{background:linear-gradient(180deg,var(--deep-2),var(--deep-4))}
.pcard__visual{position:relative;flex:0 0 42%;align-self:center;border-radius:12px;overflow:hidden;
  box-shadow:var(--sh-1)}
.pcard__visual .voucher,.pcard__visual .gift{width:100%;height:auto;display:block}
/* GS25 photo committed fully to the album-polaroid metaphor:
   white border + photo window (grain + warm tint) + bottom caption strip + tilt */
.pcard__visual--photo{padding:7px 7px 0;background:#FFFEFB;border-radius:5px;transform:rotate(-2.6deg);
  overflow:visible;box-shadow:var(--sh-2),inset 0 0 0 1px rgba(156,107,56,.14)}
.pcard__shot{position:relative;display:block;border-radius:2px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(38,55,90,.10)}
.pcard__visual--photo .voucher{display:block;width:100%;height:auto;border-radius:2px;
  filter:saturate(.96) contrast(.98) brightness(1.02)}
/* warm window sheen */
.pcard__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 78% 8%,rgba(255,221,160,.34),transparent 56%);mix-blend-mode:screen}
/* subtle film grain on the photo */
.pcard__grain{position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:var(--grain);background-size:110px 110px;mix-blend-mode:multiply;opacity:.12}
/* handwritten-album caption strip */
.pcard__filmcap{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  padding:6px 3px 7px}
.pcard__filmcap span{font-family:"MaruBuri",serif;font-size:12px;color:var(--ink-72);letter-spacing:.02em}
.pcard__filmcap i{font-size:10.5px;font-weight:800;font-style:normal;color:var(--deep-1);
  letter-spacing:.04em;font-variant-numeric:tabular-nums}
.pcard__tape{position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:46px;height:17px;z-index:6;
  background:linear-gradient(135deg,rgba(255,226,178,.86),rgba(255,202,142,.7));
  box-shadow:0 2px 6px rgba(96,48,12,.2);mix-blend-mode:multiply}
.pcard__tape::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.28) 4px 5px)}
/* graceful fallback when the product photo is missing */
.pcard__visual--photo.is-missing .pcard__shot{min-height:84px;display:grid;place-items:center;
  background:linear-gradient(135deg,#3A5A8E,#22406F)}
.pcard__visual--photo.is-missing .pcard__shot::before{content:"GS25\00a0모바일상품권";
  font-size:12.5px;font-weight:800;color:#EAF0FA;letter-spacing:.02em;text-align:center;padding:0 6px}
.pcard__body{flex:1 1 auto;align-self:center;min-width:0;padding:8px 4px 8px 0}
.pcard__kicker{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--deep-2)}
.pcard__amt{display:flex;align-items:baseline;gap:3px;margin:2px 0 3px;
  color:var(--deep-1);font-variant-numeric:tabular-nums;line-height:1}
.pcard__amt b{font-size:38px;font-weight:900;letter-spacing:-.01em}
.pcard__amt i{font-size:19px;font-weight:800;font-style:normal;color:var(--ink-85)}
.pcard--silver .pcard__amt b{font-size:32px}
.pcard__name{font-size:14.5px;font-weight:700;color:var(--ink-72);line-height:1.4}
.pcard--gold .pcard__amt b{color:var(--gold-2)}
.pcard--gold .pcard__amt i{color:var(--gold-3)}
.pcard--gold .pcard__name{color:var(--ink-85)}
/* gold foil sweep on 1등 */
.pcard--gold .pcard__visual .foil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--foil);background-size:260% 260%;background-position:130% 0;mix-blend-mode:screen}
.js-anim .pcard--gold.in .pcard__visual .foil{animation:foilsweep 5.5s var(--ease) 1.2s infinite}
@keyframes foilsweep{0%,68%{background-position:135% 0}100%{background-position:-50% 0}}

/* concert-screen promise — slim premium band */
.promise{position:relative;margin-top:18px;display:flex;align-items:center;gap:14px;
  padding:18px 18px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--film-800),var(--film-900));box-shadow:var(--sh-2)}
.promise__perf{position:absolute;top:0;left:0;right:0;height:8px;background:var(--perf-h);
  background-size:auto 8px;opacity:.7}
.promise__screen{flex:0 0 auto;width:56px;height:44px;display:grid;place-items:center;
  border-radius:9px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,170,90,.22)}
.promise__screen svg{width:48px;filter:drop-shadow(0 0 8px rgba(243,115,33,.4))}
.promise__txt{font-size:15px;line-height:1.55;color:var(--on-dark)}
.promise__txt b{color:#FFE0B8}
.promise__txt em{color:var(--safelight);font-weight:800;font-style:normal}

/* =====================================================================
   HOW TO JOIN
   ===================================================================== */
.how{padding-top:54px;background:linear-gradient(180deg,var(--cream-100),var(--cream-300))}
.steps{list-style:none;display:flex;flex-direction:column;gap:14px}
.step{position:relative;display:flex;align-items:center;gap:16px;
  padding:20px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFFFFF,#FFF7EC);
  box-shadow:var(--sh-1);border:1px solid rgba(228,86,18,.10);overflow:hidden}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--primary),var(--deep-1))}
.step__no{position:absolute;right:16px;top:12px;font-size:34px;font-weight:900;
  color:rgba(228,86,18,.10);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.step__ic{flex:0 0 auto;width:58px;height:58px;display:grid;place-items:center;
  border-radius:16px;background:#FFF3E4;box-shadow:var(--sh-1),inset 0 0 0 1px rgba(228,86,18,.12)}
.step__ic svg{width:44px;height:44px}
.step__txt h3{font-size:18px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.step__opt{font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#FFF;
  text-shadow:0 1px 1px rgba(74,18,0,.4);
  background:#7A5226;padding:3px 10px;border-radius:var(--r-pill)}
.step__txt p{font-size:15px;color:var(--ink-72);margin-top:4px;line-height:1.55}

/* =====================================================================
   NOTICE — 참여 전 확인 (info card + 유의사항 list)
   ===================================================================== */
.notice{padding-top:54px;padding-bottom:42px;
  background:linear-gradient(180deg,var(--cream-300),var(--cream-100))}
.info{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0 0 22px;
  border-radius:var(--r-lg);overflow:hidden;background:#FFFDF7;box-shadow:var(--sh-1);
  border:1px solid rgba(156,107,56,.14)}
.info__row{display:contents}
.info dt{padding:14px 16px;font-size:14px;font-weight:800;color:#FFF;
  background:linear-gradient(180deg,var(--deep-2),var(--deep-3));
  display:flex;align-items:center;letter-spacing:.02em}
.info dd{padding:14px 16px;font-size:15px;color:var(--ink-85);line-height:1.55;
  border-bottom:1px solid rgba(156,107,56,.12);align-self:center}
.info dt{border-bottom:1px solid rgba(255,255,255,.14)}
.info>div:last-child dd,.info>div:last-child dt{border-bottom:none}
.info b{font-weight:800;color:var(--deep-1)}

.notes{list-style:none;counter-reset:n;display:flex;flex-direction:column;
  padding:8px 20px;border-radius:var(--r-lg);background:#FFFDF7;box-shadow:var(--sh-1);
  border:1px solid rgba(156,107,56,.14)}
.notes>li{position:relative;counter-increment:n;padding:15px 0 15px 36px;
  font-size:14.5px;line-height:1.62;color:var(--ink-72);
  border-bottom:1px solid rgba(156,107,56,.14)}
.notes>li:last-child{border-bottom:none}
.notes>li::before{content:counter(n);position:absolute;left:0;top:15px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#FFF;
  background:linear-gradient(180deg,var(--secondary),var(--deep-2));
  box-shadow:0 2px 5px rgba(228,86,18,.28);
  font-variant-numeric:tabular-nums}

/* =====================================================================
   FOOTER + CTA
   ===================================================================== */
.foot{display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:34px 24px 30px;background:var(--film-900);text-align:center}
.foot__cam{color:rgba(245,144,81,.6)}
.foot p{font-size:12px;color:var(--on-dark-70);letter-spacing:.02em}
.cta-spacer{height:92px}

.cta-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:65;
  width:min(var(--maxw),100%);
  padding:11px calc(var(--rail) + 14px) calc(11px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(252,248,239,0),rgba(252,248,239,.97) 32%);
}
.cta-bar__perf{position:absolute;left:0;right:0;top:0;height:5px;background:var(--perf-h);
  background-size:auto 5px;opacity:.4}
.cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  height:58px;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));
  color:#FFF;font-size:19px;font-weight:800;letter-spacing:.01em;
  text-shadow:0 1px 1px rgba(74,18,0,.4);
  box-shadow:0 12px 26px rgba(168,56,10,.42),inset 0 1px 0 rgba(255,255,255,.22)}
.cta:active{transform:translateY(1px)}
.cta__ic{color:#FFF}
.cta__shine{position:absolute;top:0;bottom:0;left:-40%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:shine 4.6s ease-in-out infinite}
@keyframes shine{0%,72%{left:-45%}88%,100%{left:120%}}

/* =====================================================================
   REVEAL / DEVELOP  (JS-gated; content visible without JS)
   ===================================================================== */
.js-anim .reveal{opacity:0;translate:0 24px;
  transition:opacity .75s var(--ease),translate .75s var(--ease);
  transition-delay:var(--d,0s)}
.js-anim .reveal.in{opacity:1;translate:0 0}
.js-anim .develop{filter:blur(11px) sepia(.7) saturate(.5) contrast(.86) brightness(1.04);
  transition:filter 1.05s var(--ease)}
.js-anim .develop.in{filter:none}
.js-anim .hero__line--em .ul path{stroke-dasharray:360;stroke-dashoffset:360}
.js-anim .hero__line--em.in .ul path{animation:uldraw 1s var(--ease) .5s forwards}
@keyframes uldraw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-anim .reveal{opacity:1;translate:0 0}
  .js-anim .develop{filter:none}
  .js-anim .hero__line--em .ul path{stroke-dashoffset:0}
  .scrollcue svg,.cta__shine{display:none}
}

/* =====================================================================
   APPLY PAGE
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-apply .appbar__logo img{height:26px}

.reel--apply{padding-bottom:0;
  background:
    radial-gradient(130% 46% at 50% 0,var(--cream-50),transparent 56%),
    linear-gradient(180deg,var(--cream-200),var(--cream-100) 30%,var(--cream-200))}
.reel--apply>.grain{opacity:.08}

/* intro — warm, big brush title sings (lightened, no dark band) */
.a-intro{position:relative;z-index:3;padding:34px var(--gut) 14px;--gut:28px;text-align:center;overflow:hidden;
  background:radial-gradient(130% 80% at 50% 0,rgba(252,213,160,.5),transparent 60%)}
.a-intro__h{font-family:"BrushKR","Pretendard Variable",sans-serif;font-weight:400;
  font-size:clamp(34px,10.6vw,46px);color:var(--ink);line-height:1.2;letter-spacing:.006em}
/* 사연 — deep-orange accent + optical letter-spacing so the accent breathes */
.a-intro__h em{color:var(--deep-2);position:relative;letter-spacing:.045em;margin-right:.02em}
.a-intro__ul{display:block;margin:8px auto 0;width:min(220px,62%);height:18px}
.a-intro__ul path{fill:none;stroke:var(--primary);stroke-width:6;stroke-linecap:round}

/* form blocks */
.form{position:relative;z-index:3;padding:10px var(--gut) 14px;--gut:28px;
  display:flex;flex-direction:column;gap:16px}
.block{border:none;padding:22px 20px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFFFFF,#FFFAF1);
  box-shadow:var(--sh-1);border:1px solid rgba(156,107,56,.12)}
.block__lg{font-size:18px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px;padding:0}
.req{font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#FFF;
  text-shadow:0 1px 1px rgba(74,18,0,.45);
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));padding:3px 9px;border-radius:var(--r-pill)}
.opt{font-size:11.5px;font-weight:800;color:#FFF;
  text-shadow:0 1px 1px rgba(74,18,0,.4);
  background:#7A5226;padding:3px 10px;border-radius:var(--r-pill)}
.req-inline{color:var(--deep-2);font-weight:800}
.block__desc{font-size:14.5px;color:var(--ink-72);margin:8px 0 0;line-height:1.55}

/* text fields */
.field{margin-top:18px}
.field:first-of-type{margin-top:18px}
.field__lbl{display:block;font-size:15px;font-weight:800;color:var(--ink-85);margin-bottom:8px}
.input{width:100%;height:56px;padding:0 18px;font-size:17px;color:var(--ink);
  background:var(--cream-50);border:1.5px solid rgba(156,107,56,.22);border-radius:var(--r-md);
  transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none}
.input::placeholder{color:var(--ink-40)}
.input:hover{border-color:rgba(228,86,18,.35)}
.input:focus{outline:none;background:#FFF;border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(243,115,33,.16)}
.input.is-filled{background:#FFF;border-color:rgba(228,86,18,.4)}
.input.is-error{border-color:var(--deep-3);background:#FFF4EE;box-shadow:0 0 0 4px rgba(189,64,17,.12)}
.field__err{margin-top:8px;font-size:13.5px;font-weight:700;color:var(--deep-3);
  display:flex;align-items:center;gap:6px}
.field__err::before{content:"!";flex:0 0 auto;display:grid;place-items:center;
  width:16px;height:16px;border-radius:50%;background:var(--deep-3);color:#FFF;
  font-size:11px;font-weight:800;line-height:1}
.field__err--block{margin-top:14px}

/* pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 20px;border-radius:var(--r-pill);font-size:16px;font-weight:700;color:var(--ink-72);
  background:var(--cream-50);border:1.5px solid rgba(156,107,56,.24);
  transition:all .2s var(--ease)}
.pill span::before{content:"";width:0;height:0;margin-right:0;border-radius:50%;
  background:#FFF;transition:all .2s var(--ease)}
.pill:hover span{border-color:rgba(228,86,18,.45)}
.pill input:checked+span{color:#FFF;border-color:transparent;text-shadow:0 1px 1px rgba(74,18,0,.4);
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));
  box-shadow:0 6px 14px rgba(168,56,10,.32);transform:translateY(-1px)}
.pill input:checked+span::before{width:8px;height:8px;margin-right:8px}
.pill input:focus-visible+span{outline:3px solid var(--deep-1);outline-offset:2px}

/* 사연 paper */
.paper{position:relative;margin-top:18px;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,#FBEFD9,#F6E6C9);
  box-shadow:var(--sh-1),inset 0 0 0 1.5px rgba(156,107,56,.22);
  transition:filter .55s var(--ease),box-shadow .25s,background .35s}
.paper.is-soft{filter:sepia(.32) contrast(.95) brightness(1.02)}
.paper.is-focus{background:#FFFFFF;box-shadow:0 0 0 4px rgba(243,115,33,.16),var(--sh-1);filter:none}
.paper.is-error{box-shadow:0 0 0 4px rgba(189,64,17,.12),inset 0 0 0 1.5px var(--deep-3)}
.paper__perf{position:absolute;top:0;left:0;right:0;height:7px;background:var(--perf-h);
  background-size:auto 7px;opacity:.5;z-index:2}
.paper__stamp{position:absolute;top:13px;right:15px;z-index:2;opacity:.6;
  font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--deep-1);font-variant-numeric:tabular-nums}
/* faint paper texture only — pushed well below the baseline so it never crowds
   the ruled lines, placeholder, hint, counter or resize handle */
.paper__lyric{position:absolute;right:16px;bottom:-66px;z-index:0;pointer-events:none;user-select:none;
  font-size:84px;line-height:1;letter-spacing:.04em;color:rgba(65,30,0,.011)}
.paper__ta{position:relative;z-index:1;display:block;width:100%;min-height:188px;resize:vertical;border:none;background:transparent;
  padding:26px 18px 8px;font-family:"MaruBuri","Pretendard Variable",serif;
  font-size:17px;line-height:1.85;color:var(--ink);
  background-image:repeating-linear-gradient(transparent 0 33px,rgba(156,107,56,.14) 33px 34px);
  background-attachment:local}
.paper__ta:focus{outline:none}
.paper__ta::placeholder{color:rgba(65,30,0,.32)}
.paper__foot{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 14px}
.paper__hint{font-size:13px;color:var(--ink-72);font-weight:600}
.paper__hint.is-ok{color:var(--deep-2);font-weight:800}
.counter{font-size:13px;font-weight:800;color:var(--ink-72);font-variant-numeric:tabular-nums}
.counter.is-over{color:var(--deep-3)}

/* photos */
.photos{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.photo-add,.photo{width:90px;height:112px;flex:0 0 auto}
.photo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;border-radius:12px;color:var(--deep-2);
  background:var(--cream-50);border:2px dashed rgba(228,86,18,.4);
  font-size:12.5px;font-weight:800;transition:all .2s;padding-bottom:2px}
.photo-add svg{width:26px;height:26px}
.photo-add:hover{background:#FFF3E4;border-color:var(--deep-1)}
.photo-add__n{font-size:11.5px;color:var(--ink-72);font-weight:800}
.photo-add__n b{color:var(--deep-2)}
.photo-add.is-full{opacity:.45;pointer-events:none}
.photo{position:relative;background:#FFFEFB;padding:6px 6px 22px;border-radius:3px;
  box-shadow:var(--sh-1);transform:rotate(var(--rot,-3deg));overflow:visible}
.photo:nth-child(odd){--rot:2.6deg}
.photo__img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;
  filter:sepia(.3) contrast(.97) saturate(.94)}
.photo__flash{position:absolute;inset:0;background:#FFF;border-radius:3px;pointer-events:none;
  animation:devflash 1s var(--ease) forwards}
@keyframes devflash{0%{opacity:.95}100%{opacity:0}}
.photo__cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-family:"MaruBuri",serif;font-size:12.5px;color:var(--ink-72)}
.photo__rm{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;border:none;cursor:pointer;color:#FFF;
  background:linear-gradient(180deg,var(--deep-2),var(--deep-4));box-shadow:var(--sh-1)}
.photo__rm::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.photos__hint{display:flex;align-items:center;gap:7px;margin-top:15px;font-size:14px;
  font-weight:800;color:var(--deep-2)}
.photos__hint svg{color:var(--primary);flex:0 0 auto}

/* consent */
.block--consent{background:linear-gradient(180deg,#FFF7EC,#FFF1E0);border-color:rgba(228,86,18,.18)}
.check{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:48px}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:transparent;background:#FFF;border:1.5px solid rgba(156,107,56,.4);transition:all .2s}
.check input:checked+.check__box{background:linear-gradient(180deg,var(--primary),var(--deep-2));
  border-color:transparent;color:#FFF}
.check input:focus-visible+.check__box{outline:3px solid var(--deep-1);outline-offset:2px}
.check__txt{font-size:16px;font-weight:800;color:var(--ink);line-height:1.4}
.consent__sum{margin:14px 0 0;padding:14px 15px;border-radius:12px;
  background:rgba(255,255,255,.6);font-size:13.5px;color:var(--ink-72);line-height:1.6}
.consent__more{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:12px 2px;
  min-height:44px;background:none;border:none;cursor:pointer;font-size:14px;font-weight:800;color:var(--deep-2)}
.consent__more .chev{transition:transform .3s var(--ease)}
.consent__more[aria-expanded="true"] .chev{transform:rotate(180deg)}
.consent__detail{margin-top:12px;padding:18px 16px;border-radius:14px;
  background:#FFFDF7;box-shadow:inset 0 0 0 1px rgba(156,107,56,.16);
  font-size:13.5px;line-height:1.72;color:var(--ink-72)}
.consent__detail h4{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 8px}
.consent__detail .lead{margin:0 0 16px;color:var(--ink-85);line-height:1.74}
.consent__detail dl{margin:0}
.consent__detail dt{font-size:14.5px;font-weight:800;color:var(--ink-85);margin:14px 0 5px}
.consent__detail dt:first-child{margin-top:0}
.consent__detail dd{margin:0 0 2px;padding-left:14px;position:relative}
.consent__detail dd::before{content:"–";position:absolute;left:0;color:var(--deep-2)}
.consent__detail .foot-note{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(156,107,56,.3);
  font-size:13px;color:var(--ink-72);line-height:1.7}

.form__guard{min-height:20px;padding:4px var(--gut);text-align:center;font-size:14px;
  font-weight:800;color:var(--deep-3);--gut:28px}
.form__guard.is-ready{color:var(--deep-1)}

/* submit */
.cta--submit{width:100%;border:none;cursor:pointer;font-family:inherit}
.cta--submit:disabled{background:linear-gradient(180deg,var(--disabled),var(--disabled-2));
  color:var(--disabled-ink);text-shadow:none;
  box-shadow:inset 0 0 0 1px rgba(154,124,78,.25);cursor:not-allowed;transform:none}
.cta--submit:disabled .cta__ic{color:var(--disabled-ink)}
.cta--submit:disabled .cta__shine{display:none}

/* =====================================================================
   SUCCESS — 사연 현상 signature
   ===================================================================== */
.dev{position:fixed;inset:0;z-index:120;overflow-y:auto;
  background:radial-gradient(120% 70% at 50% 0,rgba(228,86,18,.2),transparent 55%),
            linear-gradient(180deg,var(--film-850),var(--film-900));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(40px,9vh,84px) 24px clamp(40px,8vh,72px)}
.dev[hidden]{display:none}
/* filmic letterbox edges — frame the climax so it reads as a composed cinema still */
.dev::before,.dev::after{content:"";position:fixed;left:0;right:0;height:15px;z-index:3;
  background:var(--perf-h);background-size:auto 15px;opacity:.42;pointer-events:none}
.dev::before{top:0;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.dev::after{bottom:0;box-shadow:0 -4px 14px rgba(0,0,0,.4)}
.dev__grain{position:absolute;inset:0;background-image:var(--grain);background-size:160px 160px;
  mix-blend-mode:overlay;opacity:.18;pointer-events:none}
.dev__leak{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:340px;height:300px;
  background:radial-gradient(circle,rgba(255,110,50,.5),transparent 70%);
  filter:blur(30px);mix-blend-mode:screen;pointer-events:none}
.dev__inner{position:relative;z-index:2;width:100%;max-width:350px;text-align:center}
.dev__kicker{font-size:11px;font-weight:800;letter-spacing:.28em;color:var(--safelight);margin-bottom:20px}
.dev__frame{position:relative;width:min(286px,86%);margin:0 auto 30px;
  padding:13px 13px 0;background:#FFFEFA;border-radius:6px;
  box-shadow:var(--sh-3),var(--glow),0 0 64px rgba(255,158,76,.34);transform:rotate(-1.6deg)}
.dev__perf{position:absolute;top:13px;left:13px;right:13px;height:5px;background:var(--perf-h);
  background-size:auto 5px;opacity:.85;border-radius:1px;z-index:3}
.dev__win{position:relative;aspect-ratio:320/244;overflow:hidden;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(60,32,10,.16)}
.dev__win .scene{position:absolute;inset:0;width:100%;height:100%}
.dev__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,rgba(255,255,255,.42),transparent 38%),
            radial-gradient(120% 80% at 80% 6%,rgba(255,222,158,.36),transparent 54%)}
.dev__tape{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:108px;height:26px;z-index:4;
  background:linear-gradient(135deg,rgba(255,224,176,.82),rgba(255,200,140,.64));
  box-shadow:0 3px 8px rgba(0,0,0,.3);mix-blend-mode:screen;opacity:.92}
.dev__cap{position:relative;padding:16px 6px 24px}
.dev__cap-ink{display:inline-block;position:relative;z-index:1;
  font-family:"MaruBuri",serif;font-size:18px;color:var(--ink);letter-spacing:.01em}
.dev__cap-ul{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  width:min(210px,80%);height:12px}
.dev__cap-ul path{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round}
.dev__title{font-family:"BrushKR","Pretendard Variable",sans-serif;font-weight:400;
  font-size:34px;color:var(--on-dark-bright);line-height:1.3;letter-spacing:.022em}
.dev__title em{color:var(--safelight);margin:0 .01em}
.dev__msg{margin-top:15px;font-size:15.5px;line-height:1.74;color:var(--on-dark-70)}
.dev__receipt{margin:26px auto 0;max-width:310px;display:flex;flex-direction:column;gap:1px;
  border-radius:var(--r-md);overflow:hidden;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(245,144,81,.22)}
.dev__receipt>div{display:flex;justify-content:space-between;gap:12px;padding:14px 17px}
.dev__receipt dt{font-size:13.5px;color:var(--on-dark-70)}
.dev__receipt dd{font-size:13.5px;font-weight:800;color:var(--on-dark);text-align:right}
.dev__btn{display:flex;align-items:center;justify-content:center;height:58px;margin-top:28px;
  border-radius:var(--r-md);font-size:18px;font-weight:800;color:#FFF;
  background:linear-gradient(180deg,var(--deep-1),var(--deep-2));
  box-shadow:0 12px 26px rgba(201,69,12,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.dev__btn:active{transform:translateY(1px)}

@keyframes develop{0%{filter:blur(14px) sepia(.85) saturate(.4) contrast(.82) brightness(1.12)}100%{filter:none}}
@keyframes writeon{from{clip-path:inset(0 102% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes tapeSnap{0%{transform:translateX(-50%) rotate(-3deg) scale(.4);opacity:0}
  62%{transform:translateX(-50%) rotate(-3deg) scale(1.12);opacity:1}
  100%{transform:translateX(-50%) rotate(-3deg) scale(1);opacity:.92}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
.dev__cap-ul path{stroke-dasharray:300;stroke-dashoffset:300}
.dev.go .dev__win .scene{animation:develop 1.9s var(--ease) .15s both}
.dev.go .dev__tape{animation:tapeSnap .55s var(--ease) 1.5s both}
.dev.go .dev__cap-ink{animation:writeon 1s var(--ease) 1.15s both}
.dev.go .dev__cap-ul path{animation:draw .8s var(--ease) 1.75s forwards}
.dev.go .dev__title{animation:fadeUp .6s var(--ease) 1.85s both}
.dev.go .dev__msg{animation:fadeUp .6s var(--ease) 2s both}
.dev.go .dev__receipt{animation:fadeUp .6s var(--ease) 2.15s both}
.dev.go .dev__btn{animation:fadeUp .6s var(--ease) 2.3s both}
@media (prefers-reduced-motion:reduce){
  .dev__cap-ul path{stroke-dashoffset:0}
  .dev.go .dev__win .scene,.dev.go .dev__tape,.dev.go .dev__cap-ink,.dev.go .dev__cap-ul path,
  .dev.go .dev__title,.dev.go .dev__msg,.dev.go .dev__receipt,.dev.go .dev__btn{animation-duration:.001ms!important}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:360px){
  section{--gut:21px}
  .a-intro,.form,.form__guard{--gut:21px}
  .hero__line--em{font-size:clamp(54px,18vw,72px)}
  .photo-add,.photo{width:82px;height:102px}
  .pcard__amt b{font-size:32px}
}
@media (min-width:480px){
  .pcard__visual{flex-basis:38%}
}