/* Ported unchanged from webapp/design_samples/option-final.html */
  :root{
    --bg:#F4F6FB;
    --panel:#FFFFFF;
    --ink:#22273A;
    --ink-soft:#5B6178;
    --line:#E1E4EE;
    --accent:#E3B23C;
    --accent-dark:#C6961F;
    --sky:#3E8FB0;
    --sky-tint:#E7F2F6;
    --gold-tint:#FBF3DF;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
  body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Sora','Inter',sans-serif;margin:0;}
  a{color:inherit;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  img,svg{display:block;max-width:100%;}
  button{font-family:inherit;}

  a:focus-visible,button:focus-visible,.chip:focus-visible,select.field:focus-visible{
    outline:3px solid var(--sky);outline-offset:2px;border-radius:8px;
  }
  textarea:focus-visible,textarea:focus{outline:3px solid var(--sky);outline-offset:1px;}

  /* NAV */
  header.site{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20;}
  nav.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;max-width:1120px;margin:0 auto;}
  .logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;color:var(--ink);text-decoration:none;font-family:'Sora';white-space:nowrap;}
  .nav-links{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0;}
  .nav-links a{text-decoration:none;color:var(--ink-soft);font-size:15px;font-weight:600;}
  .nav-links a:hover{color:var(--ink);}
  .nav-cta{display:flex;gap:10px;align-items:center;flex:none;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:700;font-size:15px;padding:11px 20px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease;}
  .btn-primary{background:var(--accent);color:var(--ink);}
  .btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(198,150,31,.7);}
  .btn-primary:active{transform:translateY(0);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
  .btn-ghost:hover{background:var(--bg);}
  .btn-lg{padding:15px 26px;font-size:16px;}
  .nav-create-mobile{display:none;}

  /* HERO */
  .hero{padding:clamp(22px,3.4vw,36px) 0 24px;text-align:center;}
  .eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--sky-tint);color:var(--sky);font-size:13px;font-weight:700;border-radius:999px;padding:6px 14px;margin-bottom:10px;}
  .hero h1{font-size:clamp(27px,4.4vw,38px);line-height:1.15;letter-spacing:-0.01em;color:var(--ink);margin-bottom:8px;}
  .hero p.sub{font-size:clamp(15px,2vw,17px);color:var(--ink-soft);max-width:560px;margin:0 auto 20px;}

  .creator{
    max-width:700px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
    border-radius:22px;padding:clamp(18px,3vw,24px);
    box-shadow:0 30px 60px -34px rgba(34,39,58,0.32),0 2px 6px rgba(34,39,58,0.05);
    text-align:left;
  }
  .creator label.field-label{font-size:13px;font-weight:700;color:var(--ink);display:block;margin-bottom:10px;}
  .creator textarea{
    width:100%;min-height:110px;resize:vertical;border:1.5px solid var(--line);border-radius:14px;
    padding:16px;font-family:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  }
  .creator textarea::placeholder{color:#8B92A8;}
  .char-hint{font-size:12.5px;color:var(--ink-soft);margin:8px 2px 0;display:flex;gap:6px;align-items:center;}
  .char-hint svg{flex:none;}

  .options-row{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 4px;}
  .option{display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px;}
  .option .label{font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
  .segmented{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;width:100%;}
  .chip{flex:1;border:none;background:transparent;border-radius:999px;padding:8px 12px;font-size:13.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;text-align:center;white-space:nowrap;transition:background .15s ease,color .15s ease;}
  .chip.active{background:var(--accent);color:var(--ink);box-shadow:0 4px 10px -6px rgba(198,150,31,.7);}
  select.field{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink);}

  .create-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;flex-wrap:wrap;}
  .hint{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;}
  .hint svg{flex:none;}

  .trust{margin:18px auto 0;max-width:640px;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);}
  .trust span{display:flex;align-items:center;gap:6px;}
  .trust svg{flex:none;}

  /* SECTIONS */
  section.block{padding:clamp(32px,5vw,48px) 0;}
  .divider{border-top:1px solid var(--line);}
  h2.section-title{font-size:clamp(22px,4vw,28px);text-align:center;margin:0 0 8px;}
  p.section-sub{text-align:center;color:var(--ink-soft);margin:0 0 32px;font-size:15px;}

  .examples{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
  .card .thumb{background:var(--bg);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:10px;}
  .card .body{padding:16px 18px 20px;}
  .card .body h3{font-size:15.5px;margin:0 0 6px;font-family:'Inter';font-weight:700;}
  .card .body p{font-size:13px;color:var(--ink-soft);margin:0 0 8px;}
  .tag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--sky);background:var(--sky-tint);border-radius:999px;padding:4px 10px;margin-bottom:8px;}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .step{text-align:center;}
  .step .icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
  .step h3{font-size:16.5px;margin:0 0 8px;}
  .step p{font-size:13.5px;color:var(--ink-soft);margin:0;}

  .pricing-teaser{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
  .price-card{border:1px solid var(--line);border-radius:16px;padding:24px;width:230px;background:var(--panel);text-align:center;}
  .price-card.featured{border-color:var(--accent);box-shadow:0 14px 30px -18px rgba(227,178,60,0.55);}
  .price-card .amount{font-size:28px;font-weight:800;margin:8px 0;font-family:'Sora';}
  .price-card .amount span{font-size:13px;color:var(--ink-soft);font-weight:600;}
  .price-card ul{list-style:none;padding:0;margin:14px 0;font-size:13px;color:var(--ink-soft);text-align:left;}
  .price-card li{padding:3px 0;}
  .price-cta{text-align:center;margin-top:24px;}

  footer{border-top:1px solid var(--line);padding:36px 0;background:var(--panel);}
  .foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
  .foot-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:0 0 10px;}
  .foot-col a{display:block;font-size:14px;color:var(--ink);text-decoration:none;margin-bottom:8px;}
  .foot-col a:hover{color:var(--sky);}
  .foot-bottom{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:28px;}

  @media (max-width:820px){
    .examples{grid-template-columns:1fr 1fr;}
    .steps{grid-template-columns:1fr;}
  }

  @media (max-width:600px){
    .wrap{padding:0 16px;}
    nav.bar{padding:12px 16px;}
    .nav-links,.nav-cta .btn-ghost,.nav-cta .btn-primary{display:none;}
    .nav-create-mobile{display:inline-flex;}
    .hero{padding-top:28px;}
    .eyebrow{font-size:12px;padding:5px 12px;}
    .creator{padding:18px;border-radius:18px;}
    .options-row{flex-direction:column;}
    .create-row{flex-direction:column-reverse;align-items:stretch;}
    .create-row .btn{width:100%;justify-content:center;padding:15px 18px;font-size:16px;}
    .hint{justify-content:center;}
    .trust{gap:14px 20px;font-size:12.5px;}

    .examples{
      grid-template-columns:none;
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      padding-bottom:6px;
      margin:0 -16px;
      padding-left:16px;
      padding-right:16px;
    }
    .examples .card{flex:0 0 80%;scroll-snap-align:start;}

    .steps{gap:14px;}
    .step{display:flex;align-items:flex-start;gap:14px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;}
    .step .icon{margin:0;flex:none;width:44px;height:44px;}
    .step .icon svg{width:20px;height:20px;}
    .step-text{flex:1;min-width:0;}
    .step h3{font-size:15px;margin:2px 0 5px;}
    .step p{font-size:13px;}

    .pricing-teaser{flex-direction:column;align-items:center;}
    .foot-grid{flex-direction:column;}
  }