/* ---------- design tokens (1:1 with the real app's tailwind.config.ts) --- */
  :root{
    --ink:#10091c; --panel:rgba(30,22,44,.84); --panel2:rgba(255,244,214,.08);
    --edge:rgba(255,244,214,.18); --accent:#ff5fb7; --accent2:#2de2d1;
    --sunset:#ff9b71; --cream:#fff4d6; --muted:#c7b9cb;
    --font-kr:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink); color:var(--cream); font-family:var(--font-kr);
    line-height:1.72; overflow-x:hidden;
    /* word-break:keep-all is the critical Korean-typography fix — it stops
       the browser from splitting a Korean phrase mid-syllable at the edge of
       a line; breaks only fall on real spaces. */
    word-break:keep-all; overflow-wrap:break-word;
  }
  /* !important here is deliberate: these fight an unknown host-page reset
     (the artifact viewer applies its own base styles we don't control),
     not our own cascade — screenshots must never be cropped/stretched. */
  img{
    max-width:100% !important; width:100% !important; height:auto !important;
    display:block !important; object-fit:contain !important; aspect-ratio:auto !important;
  }
  ::selection{background:rgba(255,155,113,.4); color:var(--cream)}
  a{color:inherit}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px}
  section{position:relative}
  .eyebrow{
    font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--accent2); font-weight:600;
  }
  h1,h2,h3{text-wrap:balance; letter-spacing:-.01em}
  p{text-wrap:pretty}

  /* ---------- shared photographic backdrop (exact recipe from globals.css) */
  .citybg{
    background:
      linear-gradient(180deg, rgba(16,9,28,.20), rgba(16,9,28,.86) 62%, var(--ink) 100%),
      radial-gradient(900px 520px at 12% 4%, rgba(255,155,113,.30), transparent 62%),
      radial-gradient(740px 420px at 88% 12%, rgba(45,226,209,.24), transparent 65%),
      url("/images/citypop-bg.webp");
    background-position:center top; background-size:cover; background-repeat:no-repeat;
  }
  .gridlines{
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 55%);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 55%);
  }

  /* ---------- nav ---------- */
  nav{
    position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
    background:rgba(16,9,28,.55); border-bottom:1px solid var(--edge);
  }
  nav .row{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 24px}
  .word{font-weight:800; font-size:1.3rem; letter-spacing:-.02em}
  .nav-links{display:flex; gap:22px; margin-left:auto; margin-right:6px; font-size:.88rem}
  .nav-links a{color:var(--muted); text-decoration:none}
  .nav-links a:hover{color:var(--cream)}
  .lang-switch{display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:800}
  .lang-switch a{color:var(--muted); text-decoration:none}
  .lang-switch a:hover{color:var(--cream)}
  .lang-switch a.on{color:var(--cream)}
  .lang-switch span{color:var(--edge)}
  @media (max-width:720px){ .nav-links{display:none} }
  /* Anchor targets land below the sticky nav instead of underneath it. */
  section[id]{scroll-margin-top:76px}
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:60; padding:10px 18px;
    background:var(--cream); color:var(--ink); font-weight:800; border-radius:0 0 12px 0;
  }
  .skip-link:focus{left:0}
  a:focus-visible, summary:focus-visible, button:focus-visible{
    outline:2px solid var(--accent2); outline-offset:3px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px; border-radius:999px;
    font-weight:800; text-decoration:none; white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .btn:focus-visible{outline:2px solid var(--accent2); outline-offset:3px}
  .btn-sm{padding:9px 20px; font-size:.85rem}
  .btn-lg{padding:15px 30px; font-size:1rem}
  .btn-main{
    color:var(--ink); background:linear-gradient(90deg,var(--sunset),var(--accent),var(--accent2));
    box-shadow:0 10px 30px rgba(255,95,183,.28);
  }
  .btn-main:hover{transform:translateY(-1px); box-shadow:0 14px 36px rgba(255,95,183,.36)}
  .btn-ghost{color:var(--cream); border:1px solid var(--edge); background:rgba(19,20,48,.35)}
  .btn-ghost:hover{border-color:var(--cream)}

  /* ---------- hero: copy left, live A/B demo right — a music product has
     to be heard, so the demo player takes the seat a screenshot used to. */
  /* Bottom padding is light on purpose: the next section's own top padding
     (.band) does the separating, same as every other section boundary. */
  .hero{padding:76px 0 48px}
  .hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center}
  .hero-pill{
    display:inline-block; border:1px solid rgba(255,244,214,.32); border-radius:999px;
    padding:6px 14px; margin-bottom:22px;
  }
  .hero h1{
    font-size:clamp(2rem,4.6vw,3.15rem); font-weight:900; line-height:1.16;
  }
  .hero h1 .shine{
    background:linear-gradient(90deg,var(--sunset),var(--accent) 55%,var(--accent2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero .sub{margin-top:26px; max-width:48em; color:var(--muted); font-size:1.04rem}
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:40px}
  .hero-note{margin-top:22px; font-size:.82rem; color:var(--muted)}
  @media (max-width:880px){
    .hero{padding:52px 0 32px; text-align:center}
    .hero-grid{grid-template-columns:1fr; gap:36px}
    .hero .sub{margin-inline:auto}
    .cta-row{justify-content:center}
  }
  @media (max-width:600px){
    .cta-row .btn-lg{width:100%; justify-content:center}
  }
  @media (max-width:480px){
    .hero-pill{font-size:.6rem; letter-spacing:.12em; padding:6px 12px}
  }

  /* ---------- hero A/B demo player ---------- */
  .demo-card{
    position:relative; border:1px solid var(--edge); border-radius:24px;
    background:var(--panel); padding:26px 26px 22px; text-align:left;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
  }
  .demo-card::before{
    content:""; position:absolute; inset:-6%; z-index:-1; border-radius:36px; filter:blur(30px);
    background:radial-gradient(closest-side, rgba(255,95,183,.20), transparent 70%),
               radial-gradient(closest-side at 70% 85%, rgba(45,226,209,.16), transparent 70%);
  }
  .demo-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .demo-head .eyebrow{color:var(--sunset)}
  .demo-phones{font-size:.74rem; color:var(--muted); white-space:nowrap}
  .demo-controls{display:flex; align-items:center; gap:14px; margin-top:20px}
  .demo-play{
    flex:none; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
    background:linear-gradient(135deg,var(--sunset),var(--accent)); color:var(--ink);
    font-size:1.15rem; font-weight:900; display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease;
  }
  .demo-play:hover{transform:scale(1.06)}
  .demo-ab{
    display:flex; flex:1; overflow:hidden; border-radius:999px;
    border:1px solid var(--edge); background:var(--panel2);
  }
  .demo-ab button{
    flex:1; padding:12px 0; border:0; cursor:pointer; background:transparent;
    color:var(--muted); font-family:var(--font-kr); font-weight:800; font-size:.92rem;
    transition:background .15s ease, color .15s ease;
  }
  .demo-ab button[aria-pressed="true"]{background:var(--cream); color:var(--ink)}
  .demo-track{
    margin-top:18px; height:6px; border-radius:999px; background:rgba(255,244,214,.12);
    overflow:hidden;
  }
  .demo-track i{
    display:block; height:100%; width:0%;
    background:linear-gradient(90deg,var(--sunset),var(--accent),var(--accent2));
  }
  .demo-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
  .demo-note{margin-top:14px; font-size:.76rem; line-height:1.55; color:var(--muted)}

  /* ---------- band chrome ---------- */
  .band{padding:96px 0}
  .band h2{font-size:clamp(1.55rem,3.6vw,2.15rem); font-weight:900}
  .band .lead{color:var(--muted)}
  @media (max-width:820px){
    .band{padding:64px 0}
    .local{padding:72px 0}
  }

  /* ---------- problem (editorial two-column, no cards) ---------- */
  .problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
  .problem-list{display:grid; gap:22px}
  .problem-item{border-left:2px solid var(--edge); padding-left:20px}
  .problem-item b{
    display:block; font-size:1.02rem; margin-bottom:4px; color:var(--cream);
  }
  .problem-item p{color:var(--muted); font-size:.94rem}
  .problem-punch{
    margin-top:30px; font-size:1.2rem; font-weight:800; color:var(--sunset);
    border-left:2px solid var(--sunset); padding-left:20px;
  }
  @media (max-width:820px){ .problem-grid{grid-template-columns:1fr; gap:34px} }

  /* ---------- feature showcase (stacked: short copy, then a big real
     screenshot — the shot does the convincing, so it needs room to breathe
     instead of being squeezed into a 50/50 column) ---------- */
  .feature-block{padding:52px 0; border-top:1px solid var(--edge)}
  .feature-block:first-child{border-top:none}
  /* These are one-line taglines, not reading paragraphs, so they get the
     full column width instead of a book-measure max-width — capping them
     narrower just forces an awkward wrap partway through a short sentence. */
  .f-head h3{font-size:clamp(1.25rem,2.6vw,1.6rem); font-weight:800; margin:10px 0 8px; max-width:44em}
  .f-head p{color:var(--muted); font-size:1rem}
  .f-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
  .f-tag{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em;
    padding:6px 13px; border-radius:999px; border:1px solid var(--edge);
    color:var(--muted); background:rgba(255,244,214,.04);
  }
  .f-shot{position:relative; margin-top:28px}
  .f-shot::before{
    content:""; position:absolute; inset:-4% -3%; z-index:0; border-radius:32px; filter:blur(32px);
  }
  .glow-a::before{background:radial-gradient(closest-side, rgba(45,226,209,.20), transparent 72%)}
  .glow-b::before{background:radial-gradient(closest-side, rgba(255,155,113,.22), transparent 72%)}
  .f-shot img{
    position:relative; z-index:1; border-radius:18px; border:1px solid var(--edge);
    box-shadow:0 22px 50px rgba(0,0,0,.5);
  }
  @media (max-width:820px){
    .feature-block{padding:36px 0}
    .f-shot{margin-top:22px}
  }

  /* ---------- legal docs (privacy / terms) ---------- */
  .legal{padding:64px 0 96px}
  .legal .back{
    display:inline-flex; align-items:center; gap:6px; font-size:.85rem;
    color:var(--muted); text-decoration:none;
  }
  .legal .back:hover{color:var(--cream)}
  .legal h1{
    margin-top:18px; font-size:clamp(1.7rem,3.6vw,2.3rem); font-weight:900;
  }
  .legal .updated{margin-top:10px; font-size:.82rem; color:var(--muted)}
  .legal article{margin-top:36px; max-width:52em}
  .legal article h2{
    margin-top:36px; font-size:1.15rem; font-weight:800; color:var(--cream);
  }
  .legal article h2:first-child{margin-top:0}
  .legal article p{margin-top:12px; color:var(--muted)}
  .legal article ul{margin-top:12px; padding-left:1.3em; color:var(--muted); display:grid; gap:6px}
  .legal article li{padding-left:.2em}
  .legal article a{color:var(--accent2); text-decoration:underline; text-underline-offset:3px}
  .legal article strong{color:var(--cream)}

  /* ---------- local/privacy ---------- */
  .local{text-align:center; padding:120px 0}
  .local .statement{
    font-size:clamp(1.4rem,3.4vw,2rem); font-weight:900; margin:0 auto;
  }
  .local .lead{margin:18px auto 0; text-align:center}

  /* ---------- pricing: one split panel, not two floating cards ---------- */
  .split{
    margin-top:44px; display:grid; grid-template-columns:1fr 1fr; border-radius:26px;
    overflow:hidden; border:1px solid var(--edge);
  }
  .plan{padding:36px 32px; background:rgba(19,20,48,.55)}
  .plan.pro{
    background:
      linear-gradient(155deg, rgba(255,95,183,.14), rgba(45,226,209,.10)),
      rgba(19,20,48,.68);
    position:relative;
  }
  .plan.pro::before{
    content:""; position:absolute; inset:0 0 0 0; border-left:1px solid var(--edge);
  }
  .plan-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
  .plan-name{font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
  .plan.pro .plan-name{color:var(--accent2)}
  .plan-amount{font-size:2.1rem; font-weight:900; font-variant-numeric:tabular-nums; margin-top:6px}
  .plan-amount .per{font-size:.8rem; font-weight:500; color:var(--muted)}
  .plan ul{list-style:none; margin-top:22px; display:grid; gap:11px}
  .plan li{padding-left:24px; position:relative; font-size:.92rem; color:var(--muted)}
  .plan li::before{content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700}
  .plan li.no{color:rgba(199,185,203,.55)}
  .plan li.no::before{content:"–"; color:rgba(199,185,203,.4)}
  .plan .btn{margin-top:26px; width:100%; justify-content:center}
  .lead-points{list-style:none; margin-top:18px; display:grid; gap:8px}
  .lead-points li{padding-left:24px; position:relative; color:var(--muted)}
  .lead-points li::before{content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700}
  .plan-fine{margin-top:18px; font-size:.8rem; line-height:1.7; color:var(--muted)}
  @media (max-width:720px){
    .split{grid-template-columns:1fr}
    .plan.pro::before{border-left:none; border-top:1px solid var(--edge)}
  }

  /* ---------- faq ---------- */
  .faq details{
    border-top:1px solid var(--edge); padding:20px 0;
  }
  .faq details:first-of-type{border-top:none}
  .faq summary{
    cursor:pointer; list-style:none; font-weight:700; position:relative; padding-right:30px;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+"; position:absolute; right:0; top:-2px; color:var(--sunset); font-size:1.3rem; font-weight:400;
  }
  .faq details[open] summary::after{content:"–"}
  .faq .a{margin-top:12px; color:var(--muted); font-size:.95rem}

  /* ---------- footer ---------- */
  footer{padding:64px 0 40px; border-top:1px solid var(--edge); text-align:center}
  footer .word{font-size:1.35rem}
  footer p{color:var(--muted); font-size:.82rem; margin-top:10px}
  footer .links{margin-top:18px; display:flex; gap:18px; justify-content:center; font-size:.85rem}
  footer .links a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
  footer .links a:hover{color:var(--cream)}