:root{
    --teal-900:#0F6E56;
    --teal-700:#1D9E75;
    --teal-400:#5DCAA5;
    --teal-50:#E6F3EE;
    --amber:#EF9F27;
    --amber-ink:#2A1A00;
    --amber-soft:#F7C36B;
    --bg:#F1EFE8;
    --bg-2:#E9E6DC;
    --ink:#2C2C2A;
    --ink-2:#4A4A47;
    --ink-3:#7A7A74;
    --line:rgba(44,44,42,.12);
    --line-dk:rgba(255,255,255,.10);
    --charcoal:#2C2C2A;
    --charcoal-2:#222220;

    --f-head:"Fraunces", "Plus Jakarta Sans", Georgia, serif;
    --f-body:"Inter", ui-sans-serif, system-ui, sans-serif;
    --f-label:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    --f-mono:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

    --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
    --shadow-lg: 0 30px 60px -20px rgba(15,110,86,.25), 0 10px 25px -15px rgba(0,0,0,.20);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--f-body);
    font-weight:400;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  h1,h2,h3,h4{font-family:var(--f-head); font-weight:400; letter-spacing:-0.02em; margin:0; color:var(--ink); text-wrap:balance; font-variation-settings:"opsz" 120}
  h1{font-size:clamp(44px, 6.2vw, 84px); line-height:1.02; letter-spacing:-0.025em; font-weight:400}
  h2{font-size:clamp(32px, 4vw, 52px); line-height:1.05; letter-spacing:-0.02em}
  h3{font-size:22px; line-height:1.25}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  button{font:inherit}
  ::selection{background:var(--amber); color:var(--amber-ink)}

  .container{width:100%; max-width:1240px; margin:0 auto; padding:0 28px}
  @media (max-width:640px){ .container{padding:0 20px} }

  /* ---------------- Buttons ---------------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 24px; border-radius:999px; border:none; cursor:pointer;
    font-family:var(--f-label); font-weight:600; font-size:15px; letter-spacing:.005em;
    background:var(--amber); color:var(--amber-ink);
    box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.10), 0 10px 24px -10px rgba(239,159,39,.55);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-1px); background:#F3AD43; box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.10), 0 16px 30px -10px rgba(239,159,39,.65) }
  .btn:active{ transform:translateY(0) }
  .btn .arrow{transition:transform .2s ease}
  .btn:hover .arrow{transform:translateX(3px)}
  .btn--lg{padding:20px 28px; font-size:17px}
  .btn--ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
  .btn--ghost:hover{background:rgba(255,255,255,.06)}

  /* ---------------- Top strip ---------------- */
  .topstrip{
    background:var(--teal-900);
    color:rgba(255,255,255,.88);
    font-family:var(--f-body);
    font-size:13px;
    letter-spacing:0.01em;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .topstrip .inner{display:flex; justify-content:space-between; align-items:center; padding:11px 28px; max-width:1240px; margin:0 auto}
  .topstrip .italic{font-family:var(--f-head); font-style:italic; font-weight:400; color:#fff}
  .topstrip .right{display:flex; gap:22px; opacity:.85}
  @media (max-width:720px){ .topstrip .right{display:none} }

  /* ---------------- Hero ---------------- */
  .hero{
    background:var(--teal-900);
    color:#F5F2E7;
    position:relative;
    overflow:hidden;
    padding:28px 0 120px;
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(900px 500px at 85% 10%, rgba(93,202,165,.18), transparent 60%),
      radial-gradient(700px 500px at 10% 110%, rgba(239,159,39,.06), transparent 60%);
    pointer-events:none;
  }
  .hero .grid-bg{ display:none }
  .nav{
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 0 0;
    position:relative; z-index:3;
  }
  .logo{display:flex; align-items:center; gap:10px; font-family:var(--f-head); font-style:italic; font-weight:500; font-size:22px; letter-spacing:-0.01em}
  .logo .mark{
    width:30px; height:30px; border-radius:50%;
    background:var(--amber);
    display:grid; place-items:center;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  }
  .logo .mark svg{width:16px; height:16px; color:var(--teal-900)}
  .logo em{font-style:italic; color:var(--teal-400); font-weight:500}
  .nav .meta{font-family:var(--f-body); font-size:13px; color:rgba(255,255,255,.7); font-style:italic}
  @media (max-width:760px){ .nav .meta{display:none} }

  .hero > .container{ max-width:1480px }
  .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns: 1.45fr .85fr; gap:72px; align-items:center;
    padding-top:80px;
  }
  .hero h1{ max-width:none }
  .hero .sub{ max-width:680px }
  @media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:64px; padding-top:56px} }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    padding:7px 16px; border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#EFECE2;
    font-family:var(--f-label); font-size:12px; letter-spacing:.02em; font-weight:500;
    border:1px solid rgba(255,255,255,.18);
  }
  .eyebrow .dot{width:6px; height:6px; border-radius:999px; background:var(--teal-400)}

  .hero h1{ color:#F5F2E7; margin-top:22px }
  .hero h1 .hl{
    font-family:var(--f-head);
    font-style:italic; font-weight:400;
    color:#9AE3C4;
  }
  .hero .sub{
    margin-top:22px; max-width:520px;
    color:rgba(245,242,231,.92); font-size:18px; line-height:1.6;
  }
  .hero-cta{
    margin-top:36px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  }
  .hero-cta .tag{
    display:flex; align-items:center; gap:10px; color:rgba(245,242,231,.7);
    font-family:var(--f-body); font-size:13px; font-style:italic;
  }
  .hero-cta .tag svg{width:14px; height:14px; color:var(--teal-400)}

  .hero-meta{
    margin-top:56px; display:grid; grid-template-columns:repeat(3, auto); gap:40px;
    padding-top:32px; border-top:1px solid rgba(255,255,255,.14); max-width:520px;
  }
  .hero-meta .n{font-family:var(--f-head); font-size:32px; font-weight:400; color:#F5F2E7; letter-spacing:-0.02em; font-style:italic}
  .hero-meta .l{font-family:var(--f-body); font-size:12px; color:rgba(245,242,231,.82); margin-top:4px; font-style:italic}
  @media (max-width:520px){ .hero-meta{grid-template-columns:repeat(3,auto); gap:22px} .hero-meta .n{font-size:22px} }

  /* ---------------- Hero Visual (3D bookshelf) ---------------- */
  .hero-visual{
    position:relative; min-height:520px;
    perspective: 1400px;
  }
  .shelf{
    position:relative; width:100%; height:520px;
    display:flex; justify-content:center; align-items:center;
  }
  .book{
    position:absolute;
    width:240px; height:330px;
    transform-style:preserve-3d;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
  }
  .book .face{
    position:absolute; inset:0;
    border-radius:4px 10px 10px 4px;
    overflow:hidden;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.06), inset 1px 0 0 rgba(0,0,0,.25);
  }
  /* page edges on right */
  .book .pages{
    position:absolute; right:-14px; top:6px; bottom:6px; width:14px;
    transform: rotateY(90deg) translateX(7px);
    transform-origin: left center;
    background: repeating-linear-gradient(to bottom, #F6F3E9 0 1px, #E7E3D3 1px 2px);
    border-radius:2px;
  }
  /* spine */
  .book .spine{
    position:absolute; left:-12px; top:0; bottom:0; width:14px;
    transform: rotateY(-90deg) translateX(-7px);
    transform-origin:right center;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25));
    border-radius:2px 0 0 2px;
  }
  .book .gloss{
    position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(110deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 75%, rgba(255,255,255,.08) 100%);
    mix-blend-mode: screen;
  }

  /* Cover layouts */
  .cover{position:absolute; inset:0; padding:22px 20px; display:flex; flex-direction:column; justify-content:space-between; color:#fff}
  .cover .cat{font-family:var(--f-head); font-size:12px; font-style:italic; font-weight:400; opacity:.8; letter-spacing:0}
  .cover .ct{font-family:var(--f-head); font-weight:500; line-height:1.05; letter-spacing:-0.02em; font-size:28px; text-wrap:balance}
  .cover .author{font-family:var(--f-head); font-size:11px; font-style:italic; opacity:.8}
  .cover .shape{position:absolute; inset:0; opacity:.9}

  /* Book 1 - hero center */
  .book-1{
    transform: rotateY(-22deg) rotateX(6deg) translateZ(60px);
    z-index:3;
  }
  .book-1 .face.front{
    background: linear-gradient(155deg, #0F6E56 0%, #0a4f3e 100%);
  }
  .book-1 .cover .ct .ital{font-style:italic; color:var(--teal-400)}
  .book-1 .cover .stripes{
    position:absolute; right:-10px; top:40px; bottom:40px; width:120px;
    background-image: repeating-linear-gradient(135deg, rgba(93,202,165,.18) 0 6px, transparent 6px 14px);
    border-radius:3px;
  }
  .book-1 .cover .amber-dot{position:absolute; top:26px; right:24px; width:10px; height:10px; border-radius:999px; background:var(--amber)}

  /* Book 2 - behind left */
  .book-2{
    transform: rotateY(-28deg) rotateX(4deg) translate3d(-170px, 30px, 0);
    width:210px; height:290px; z-index:2; opacity:.98;
  }
  .book-2 .face.front{ background: linear-gradient(160deg, #1D9E75, #0F6E56) }
  .book-2 .cover .grid{
    position:absolute; inset:20px; border:1px solid rgba(255,255,255,.18); border-radius:3px;
    background-image:
      linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size:22px 22px;
  }

  /* Book 3 - behind right */
  .book-3{
    transform: rotateY(-16deg) rotateX(4deg) translate3d(160px, 60px, -20px);
    width:200px; height:275px; z-index:1; opacity:.95;
  }
  .book-3 .face.front{ background: linear-gradient(160deg, #F1EFE8, #D9D5C7); color:#2C2C2A }
  .book-3 .cover .ct{color:#2C2C2A}
  .book-3 .cover .cat{color:#0F6E56; opacity:.9}
  .book-3 .cover .author{color:#4A4A47}
  .book-3 .cover .bar{position:absolute; left:20px; right:20px; bottom:70px; height:4px; background:var(--amber); border-radius:2px}
  .book-3 .cover .bar::after{content:""; position:absolute; left:0; top:-8px; width:60%; height:4px; background:var(--teal-900); border-radius:2px}

  /* floating price sticker */
  .price-chip{
    position:absolute; top:40px; right:20px; z-index:5;
    background:var(--amber); color:var(--amber-ink);
    font-family:var(--f-head); font-weight:500; font-style:italic; font-size:22px;
    padding:14px 18px; border-radius:999px;
    box-shadow: 0 12px 24px -8px rgba(239,159,39,.6);
    transform: rotate(8deg);
    letter-spacing:-0.01em;
  }
  .price-chip small{font-family:var(--f-body); font-weight:500; font-size:10px; display:block; font-style:normal; opacity:.75; letter-spacing:.04em}

  /* category tag floating */
  .tag-float{
    position:absolute; z-index:5;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border-radius:999px;
    padding:8px 16px 8px 12px;
    display:flex; align-items:center; gap:10px;
    color:#F5F2E7;
    font-family:var(--f-body); font-size:12px; font-style:italic;
  }
  .tag-float .d{width:6px; height:6px; border-radius:999px; background:var(--teal-400)}
  .tag-float.t1{bottom:60px; left:0}
  .tag-float.t2{top:90px; left:-20px}

  @media (max-width:980px){
    .hero-visual{min-height:440px}
    .shelf{height:440px}
    .book-1{transform: rotateY(-18deg) rotateX(4deg) translateZ(40px); width:210px; height:290px}
    .book-2{transform: rotateY(-24deg) translate3d(-140px, 28px, 0); width:180px; height:250px}
    .book-3{transform: rotateY(-14deg) translate3d(140px, 50px, -20px); width:170px; height:235px}
    .tag-float.t2{left:0}
  }
  @media (max-width:560px){
    .hero-visual{min-height:380px}
    .shelf{height:380px}
    .book-1{width:180px; height:250px; transform: rotateY(-18deg) translateZ(30px)}
    .book-2{width:150px; height:210px; transform: rotateY(-22deg) translate3d(-110px, 24px, 0)}
    .book-3{width:150px; height:200px; transform: rotateY(-14deg) translate3d(110px, 46px, -10px)}
    .price-chip{top:20px; right:6px; font-size:15px; padding:12px 14px}
    .tag-float{font-size:10px}
    .tag-float.t1{bottom:20px; left:-6px}
    .tag-float.t2{top:40px; left:-6px}
  }

  /* ---------------- Trust bar ---------------- */
  .trust{
    background:#0B5D48;
    color:rgba(255,255,255,.9);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .trust .row{
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 0; gap:24px; flex-wrap:wrap;
    font-family:var(--f-body); font-size:14px;
  }
  .trust .row .item-text{font-style:italic}
  .trust .item{display:flex; align-items:center; gap:10px}
  .trust svg{width:16px; height:16px; color:var(--teal-400)}
  .trust .sep{width:4px; height:4px; border-radius:999px; background:rgba(255,255,255,.25)}
  @media (max-width:760px){
    .trust .row{justify-content:flex-start; gap:14px}
    .trust .sep{display:none}
  }

  /* ---------------- Section ---------------- */
  section{padding:120px 0}
  @media (max-width:760px){ section{padding:80px 0} }
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px}
  .section-head .eyebrow-l{
    font-family:var(--f-head); font-size:14px; font-style:italic; font-weight:500;
    color:var(--teal-900); margin-bottom:18px;
    display:flex; align-items:center; gap:12px;
  }
  .section-head .eyebrow-l::before{content:""; width:28px; height:1px; background:var(--teal-900)}
  .section-head p{color:var(--ink-3); max-width:420px; font-size:16px}
  @media (max-width:760px){ .section-head{flex-direction:column; align-items:flex-start; gap:18px} }

  /* ---------------- Categories ---------------- */
  .cat-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
    border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--line);
  }
  @media (max-width:860px){ .cat-grid{grid-template-columns:repeat(2, 1fr)} }
  @media (max-width:520px){ .cat-grid{grid-template-columns:1fr} }

  .cat-card{
    background:var(--bg); padding:36px 30px;
    display:flex; flex-direction:column; gap:28px; justify-content:space-between;
    min-height:220px; position:relative; cursor:pointer;
    transition: background .25s ease;
  }
  .cat-card:hover{background:#FAF8F1}
  .cat-card .top{display:flex; align-items:center; justify-content:space-between}
  .cat-card .icon{
    width:48px; height:48px; border-radius:12px;
    background:var(--teal-50); color:var(--teal-900);
    display:grid; place-items:center;
    transition: transform .25s ease, background .25s ease;
  }
  .cat-card:hover .icon{background:var(--teal-900); color:#fff; transform:rotate(-4deg) scale(1.04)}
  .cat-card .icon svg{width:22px; height:22px}
  .cat-card .num{font-family:var(--f-head); font-size:14px; font-style:italic; color:var(--ink-3)}
  .cat-card h3{font-family:var(--f-head); font-weight:500; letter-spacing:-0.02em; font-size:28px}
  .cat-card .desc{color:var(--ink-3); font-size:14px; line-height:1.55}
  .cat-card .cta{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--f-body); font-size:13px; font-style:italic;
    color:var(--teal-900); margin-top:8px;
  }
  .cat-card .cta .arrow{transition:transform .2s ease}
  .cat-card:hover .cta .arrow{transform:translateX(4px)}

  /* ---------------- How it works ---------------- */
  .how{background:var(--teal-900); color:#F5F2E7; position:relative; overflow:hidden}
  .how::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(700px 400px at 90% 10%, rgba(93,202,165,.18), transparent 60%);
    pointer-events:none;
  }
  .how .section-head .eyebrow-l{color:var(--teal-400)}
  .how .section-head .eyebrow-l::before{background:var(--teal-400)}
  .how h2{color:#F5F2E7}
  .how .section-head p{color:rgba(245,242,231,.72)}

  .steps{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:40px;
    position:relative; z-index:2;
  }
  @media (max-width:860px){ .steps{grid-template-columns:1fr; gap:24px} }
  .step{
    padding:44px 36px 40px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    position:relative;
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .step:hover{border-color:rgba(93,202,165,.45); transform:translateY(-4px); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0))}
  .step .n{
    font-family:var(--f-head); font-size:14px; color:var(--teal-400); font-style:italic; font-weight:500;
    display:flex; align-items:center; gap:12px; margin-bottom:28px;
  }
  .step .n::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(93,202,165,.5), transparent)}
  .step h3{color:#F5F2E7; font-family:var(--f-head); font-size:28px; font-weight:400; letter-spacing:-0.02em; margin-bottom:14px}
  .step p{color:rgba(245,242,231,.72); font-size:15px; line-height:1.6}
  .step .ico{
    width:48px; height:48px; border-radius:50%;
    background: rgba(93,202,165,.14);
    color:var(--teal-400);
    display:grid; place-items:center;
    margin-bottom:22px;
    border:1px solid rgba(93,202,165,.28);
  }
  .step .ico svg{width:20px; height:20px}

  /* ---------------- Featured ---------------- */
  .feat-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  }
  @media (max-width:980px){ .feat-grid{grid-template-columns:repeat(2, 1fr)} }
  @media (max-width:620px){ .feat-grid{grid-template-columns:1fr} }

  .feat{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:32px 28px;
    display:flex; flex-direction:column; gap:22px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .feat:hover{transform:translateY(-6px); box-shadow: 0 30px 50px -30px rgba(15,110,86,.25); border-color:rgba(15,110,86,.18)}

  .feat .cover-wrap{
    position:relative; height:280px;
    display:flex; justify-content:center; align-items:center;
    perspective:1000px;
    background: radial-gradient(closest-side, var(--teal-50), transparent 75%);
    border-radius:var(--r-md);
    overflow:hidden;
  }
  .feat .cover-wrap::before{
    content:""; position:absolute; bottom:20px; left:10%; right:10%; height:20px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.3), transparent 70%);
    filter: blur(6px);
  }
  .mini-book{
    position:relative;
    width:170px; height:240px;
    transform: rotateY(-18deg) rotateX(4deg);
    transform-style:preserve-3d;
    transition:transform .4s ease;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,.2));
  }
  .feat:hover .mini-book{ transform: rotateY(-10deg) rotateX(2deg) translateY(-4px) }
  .mini-book .face{
    position:absolute; inset:0; border-radius:3px 8px 8px 3px; overflow:hidden;
    box-shadow: inset 1px 0 0 rgba(0,0,0,.25), inset -1px 0 0 rgba(255,255,255,.06);
  }
  .mini-book .spine{
    position:absolute; left:-9px; top:0; bottom:0; width:10px;
    background:linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,.15));
    transform: rotateY(-90deg) translateX(-5px); transform-origin:right center;
    border-radius:2px 0 0 2px;
  }
  .mini-book .pages{
    position:absolute; right:-10px; top:4px; bottom:4px; width:10px;
    transform: rotateY(90deg) translateX(5px); transform-origin:left center;
    background: repeating-linear-gradient(to bottom, #F6F3E9 0 1px, #E7E3D3 1px 2px);
    border-radius:2px;
  }
  .mini-book .gloss{
    position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(110deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.06) 100%);
  }
  .mini-book .cover{padding:18px 16px; color:#fff}
  .mini-book .cat{font-size:9px}
  .mini-book .ct{font-size:19px; line-height:1.1}
  .mini-book .author{font-size:9px}

  .mb-1 .face.front{ background: linear-gradient(155deg, #0F6E56, #0a4f3e) }
  .mb-1 .accent{position:absolute; left:14px; right:14px; bottom:52px; height:3px; background:var(--amber); border-radius:2px}

  .mb-2 .face.front{ background: linear-gradient(155deg, #F1EFE8, #D9D5C7); color:#2C2C2A }
  .mb-2 .cover{color:#2C2C2A}
  .mb-2 .cover .cat{color:#0F6E56}
  .mb-2 .circ{position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:999px; background:var(--teal-400); opacity:.7}
  .mb-2 .circ2{position:absolute; bottom:40px; left:14px; width:40px; height:40px; border-radius:999px; background:var(--amber)}

  .mb-3 .face.front{ background: linear-gradient(155deg, #1D9E75, #5DCAA5) }
  .mb-3 .grid-p{
    position:absolute; inset:16px;
    background-image:
      linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size:18px 18px;
    opacity:.5;
  }
  .mb-3 .slash{position:absolute; left:0; right:0; top:55%; height:1px; background:rgba(255,255,255,.4); transform:rotate(-8deg)}

  .feat .meta{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
  .feat .cat-pill{
    font-family:var(--f-head); font-size:12px; font-style:italic; font-weight:500;
    color:var(--teal-900); background:var(--teal-50); padding:5px 12px; border-radius:999px;
  }
  .feat .price{
    font-family:var(--f-head); font-weight:500; font-size:24px; color:var(--ink);
    letter-spacing:-0.01em; font-style:italic;
  }
  .feat h3{font-family:var(--f-head); font-size:24px; font-weight:500; letter-spacing:-0.02em; line-height:1.2}
  .feat .desc{color:var(--ink-3); font-size:14px; line-height:1.6}
  .feat .pages-meta{
    display:flex; gap:18px; font-family:var(--f-body); font-size:12px; color:var(--ink-3);
    font-style:italic;
    padding-top:18px; border-top:1px dashed var(--line); margin-top:4px;
  }
  .feat .btn{width:100%; justify-content:center; margin-top:6px}

  /* ---------------- Closing CTA ---------------- */
  .closer{
    background:var(--bg);
    border-top:1px solid var(--line);
  }
  .closer .wrap{
    background: var(--teal-900);
    border-radius:var(--r-xl);
    padding: 72px 56px;
    color:#fff;
    position:relative; overflow:hidden;
    display:grid; grid-template-columns: 1.3fr .7fr; gap:40px; align-items:center;
  }
  .closer .wrap::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(600px 380px at 80% 20%, rgba(93,202,165,.22), transparent 60%);
  }
  .closer h2{color:#fff; font-size:clamp(32px, 4vw, 52px); position:relative}
  .closer h2 em{font-style:italic; color:var(--teal-400); font-weight:400}
  .closer p{color:rgba(255,255,255,.78); margin-top:18px; max-width:480px; position:relative; font-size:17px; line-height:1.6}
  .closer .btn-wrap{display:flex; justify-content:flex-end; position:relative}
  @media (max-width:860px){ .closer .wrap{grid-template-columns:1fr; padding:48px 32px} .closer .btn-wrap{justify-content:flex-start} }

  /* ---------------- Footer ---------------- */
  footer{
    background:var(--teal-900); color:rgba(255,255,255,.72);
    padding:72px 0 44px;
  }
  footer .grid{
    display:grid; grid-template-columns: 1.4fr 1fr; gap:48px;
    padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12);
  }
  @media (max-width:760px){ footer .grid{grid-template-columns:1fr 1fr; gap:32px} }
  @media (max-width:480px){ footer .grid{grid-template-columns:1fr 1fr} }
  footer h3,footer h4{color:#fff; font-family:var(--f-head); font-size:15px; font-style:italic; font-weight:500; margin:0 0 28px}
  footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
  footer .lib-list{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(3, auto);
    grid-auto-columns:max-content;
    column-gap:48px; row-gap:10px;
  }
  @media (max-width:480px){ footer .lib-list{grid-auto-flow:row; grid-template-rows:none} }
  footer a{color:rgba(255,255,255,.72); font-size:14px; transition:color .2s ease}
  footer a:hover{color:var(--teal-400)}
  footer .brand p{margin-top:14px; color:rgba(255,255,255,.68); font-size:14px; max-width:340px; line-height:1.6; font-style:italic}
  footer .bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:28px; font-family:var(--f-body); font-size:12px;
    color:rgba(255,255,255,.55); flex-wrap:wrap; gap:16px; font-style:italic;
  }

  /* ---------------- Tweaks panel ---------------- */
  .tweaks{
    position:fixed; right:20px; bottom:20px;
    background:#1A1A18; color:#E7E4DA; border-radius:16px;
    padding:16px 18px; z-index:100;
    border:1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
    font-family:var(--f-body); font-size:13px;
    width:280px;
    display:none;
  }
  .tweaks.on{display:block}
  .tweaks h5{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#A8A79F; margin:0 0 14px; font-weight:500}
  .tweaks .row{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:14px}
  .tweaks label{color:#A8A79F; font-size:12px}
  .tweaks select, .tweaks input[type=range]{
    background:#0F0F0E; color:#E7E4DA; border:1px solid rgba(255,255,255,.1);
    border-radius:8px; padding:6px 10px; font:inherit; font-size:12px;
  }
  .tweaks input[type=checkbox]{accent-color: var(--teal-400)}

  /* animations */
  .fade-up{opacity:0; transform:translateY(18px); transition: opacity .7s ease, transform .7s ease}
  .fade-up.in{opacity:1; transform:none}

/* ================================================================
   Internal pages
   ================================================================ */

/* ---- Shared inner header (smaller than landing hero) ---- */
.inner-head{
  background:var(--teal-900);
  color:#F5F2E7;
  position:relative; overflow:hidden;
  padding-bottom:72px;
}
.inner-head::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(93,202,165,.18), transparent 60%),
    radial-gradient(700px 500px at 5% 110%, rgba(239,159,39,.06), transparent 60%);
  pointer-events:none;
}
.inner-head .nav{position:relative; z-index:3}

.crumbs{
  position:relative; z-index:2;
  margin-top:64px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:13px; color:rgba(245,242,231,.7); font-style:italic;
}
.crumbs a{color:rgba(245,242,231,.7); transition:color .2s}
.crumbs a:hover{color:var(--teal-400)}
.crumbs .sep{opacity:.5}
.crumbs .current{color:#F5F2E7; font-style:italic}

.page-title{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.2fr .8fr; gap:56px;
  align-items:end; margin-top:28px;
}
.page-title h1{
  font-size:clamp(40px, 5.5vw, 72px);
  color:#F5F2E7;
}
.page-title h1 em{font-style:italic; color:#9AE3C4; font-weight:400}
.page-title .sub{
  color:rgba(245,242,231,.92);
  font-size:17px; line-height:1.6; max-width:460px;
}
.page-title .meta-row{
  margin-top:22px; display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--f-body); font-size:13px; color:rgba(245,242,231,.82); font-style:italic;
}
.page-title .meta-row .dot{opacity:.5}
@media (max-width:860px){ .page-title{grid-template-columns:1fr; gap:24px} }

/* ---- Filter / sort bar ---- */
.filter-bar{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  position:sticky; top:0; z-index:20;
  backdrop-filter: saturate(1.1) blur(8px);
}
.filter-bar .row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-family:var(--f-body); font-size:13px; color:var(--ink-2);
  cursor:pointer; transition:all .2s ease;
}
.chip.on{background:var(--teal-900); color:#fff; border-color:var(--teal-900)}
.chip:hover:not(.on){border-color:var(--teal-900); color:var(--teal-900)}
.filter-bar .sort{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:13px; color:var(--ink-3); font-style:italic;
}
.filter-bar select{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; font:inherit; font-size:13px; color:var(--ink); font-style:normal;
  cursor:pointer;
}

/* ---- Ebook list grid ---- */
.ebook-section{padding:72px 0 120px}
@media (max-width:760px){ .ebook-section{padding:48px 0 80px} }

.ebook-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;
}
@media (max-width:980px){ .ebook-grid{grid-template-columns:repeat(2,1fr); gap:28px} }
@media (max-width:560px){ .ebook-grid{grid-template-columns:1fr} }

.ebook{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:30px 26px 28px;
  display:flex; flex-direction:column; gap:20px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ebook:hover{transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(15,110,86,.25); border-color:rgba(15,110,86,.18)}
.ebook .cover-wrap{
  position:relative; height:260px;
  display:flex; justify-content:center; align-items:center;
  perspective:1000px;
  background: radial-gradient(closest-side, var(--teal-50), transparent 75%);
  border-radius:var(--r-md);
  overflow:hidden;
}
.ebook .cover-wrap::before{
  content:""; position:absolute; bottom:18px; left:14%; right:14%; height:18px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.3), transparent 70%);
  filter: blur(6px);
}
.ebook .meta{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.ebook .cat-pill{
  font-family:var(--f-head); font-size:12px; font-style:italic; font-weight:500;
  color:var(--teal-900); background:var(--teal-50); padding:5px 12px; border-radius:999px;
}
.ebook .price{
  font-family:var(--f-head); font-weight:500; font-size:22px; color:var(--ink);
  letter-spacing:-0.01em; font-style:italic;
}
.ebook h3{font-family:var(--f-head); font-size:22px; font-weight:500; letter-spacing:-0.02em; line-height:1.2}
.ebook .desc{color:var(--ink-3); font-size:14px; line-height:1.6}
.ebook .pages-meta{
  display:flex; gap:16px; font-family:var(--f-body); font-size:12px; color:var(--ink-3);
  font-style:italic;
  padding-top:16px; border-top:1px dashed var(--line); margin-top:2px;
}
.ebook .actions{display:flex; gap:10px; align-items:center}
.ebook .btn{flex:1; justify-content:center}
.ebook .btn-secondary{
  padding:14px 16px; border-radius:999px; border:1px solid var(--line);
  background:#fff; cursor:pointer; color:var(--ink-2);
  font-family:var(--f-body); font-size:13px; font-style:italic;
  transition:all .2s;
}
.ebook .btn-secondary:hover{border-color:var(--teal-900); color:var(--teal-900)}

/* Extra cover variants for diversity */
.mb-4 .face.front{ background: linear-gradient(155deg, #2C2C2A, #1a1a18); color:#fff }
.mb-4 .mark-l{position:absolute; top:16px; left:16px; right:16px; height:1px; background:var(--amber); opacity:.7}
.mb-4 .mark-b{position:absolute; bottom:16px; left:16px; right:16px; height:1px; background:var(--amber); opacity:.7}

.mb-5 .face.front{ background: linear-gradient(180deg, #EF9F27, #d98a15) }
.mb-5 .circ3{position:absolute; bottom:-50px; left:-30px; width:150px; height:150px; border-radius:999px; background:rgba(255,255,255,.15)}
.mb-5 .cover{color:#2A1A00}

.mb-6 .face.front{ background: linear-gradient(155deg, #5DCAA5, #1D9E75) }
.mb-6 .frame{position:absolute; inset:14px; border:1px solid rgba(255,255,255,.35); border-radius:3px}

.mb-7 .face.front{ background: linear-gradient(155deg, #0F6E56, #093F32) }
.mb-7 .stripes-v{
  position:absolute; top:40px; right:-10px; bottom:40px; width:80px;
  background-image: repeating-linear-gradient(90deg, rgba(93,202,165,.2) 0 3px, transparent 3px 10px);
}

.mb-8 .face.front{ background: linear-gradient(155deg, #F1EFE8, #D9D5C7); color:#2C2C2A }
.mb-8 .cover{color:#2C2C2A}
.mb-8 .cover .cat{color:var(--teal-900)}
.mb-8 .dot-a{position:absolute; top:-30px; right:-30px; width:100px; height:100px; border-radius:999px; background:var(--amber)}
.mb-8 .dot-b{position:absolute; top:32px; right:32px; width:18px; height:18px; border-radius:999px; background:var(--teal-900)}

.mb-9 .face.front{ background: linear-gradient(155deg, #1D9E75, #0F6E56) }
.mb-9 .rule{position:absolute; left:18px; right:18px; top:50%; height:2px; background:var(--amber); transform:translateY(-50%)}

/* ---- Empty state ---- */
.empty{
  padding:120px 0 140px;
  background:var(--bg);
}
.empty .wrap{
  max-width:640px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:28px;
}
.empty-illustration{
  position:relative;
  width:280px; height:220px;
  display:flex; justify-content:center; align-items:flex-end;
  perspective:1100px;
  margin-bottom:12px;
}
.empty-illustration .shelf-line{
  position:absolute; bottom:12px; left:0; right:0; height:2px; background:var(--teal-900); opacity:.5;
  border-radius:2px;
}
.empty-illustration .shelf-line::after{
  content:""; position:absolute; bottom:-6px; left:8px; right:8px; height:6px;
  background: linear-gradient(180deg, rgba(15,110,86,.22), transparent);
  filter:blur(3px);
}
.empty-book{
  position:absolute; bottom:14px;
  width:60px; height:130px;
  transform-style:preserve-3d;
  filter: drop-shadow(0 14px 18px rgba(15,110,86,.25));
}
.empty-book .face{position:absolute; inset:0; border-radius:2px 5px 5px 2px; overflow:hidden;
  box-shadow: inset 1px 0 0 rgba(0,0,0,.2)}
.empty-book .spine-sm{position:absolute; left:-3px; top:0; bottom:0; width:4px; background:rgba(0,0,0,.35); transform: rotateY(-90deg) translateX(-2px); transform-origin:right}
.empty-book .pages-sm{position:absolute; right:-3px; top:2px; bottom:2px; width:4px; background:#E7E3D3; transform: rotateY(90deg) translateX(2px); transform-origin:left}

.empty-book.e1{left:calc(50% - 110px); transform:rotateY(-14deg) rotate(-6deg)}
.empty-book.e1 .face.front{background:linear-gradient(160deg, #0F6E56, #093f32)}
.empty-book.e2{left:calc(50% - 60px); transform:rotateY(-8deg); height:150px}
.empty-book.e2 .face.front{background:linear-gradient(160deg, #F1EFE8, #D9D5C7)}
.empty-book.e3{left:calc(50% - 10px); transform:rotateY(-4deg) rotate(3deg); height:140px}
.empty-book.e3 .face.front{background:linear-gradient(160deg, #EF9F27, #d98a15)}
.empty-book.e4{left:calc(50% + 50px); transform:rotateY(6deg) rotate(-2deg); height:120px; opacity:.9}
.empty-book.e4 .face.front{background:linear-gradient(160deg, #5DCAA5, #1D9E75)}

/* Missing book = slot */
.empty-slot{
  position:absolute; bottom:14px; left:calc(50% + 110px);
  width:60px; height:135px;
  border:2px dashed rgba(15,110,86,.35);
  border-radius:2px 5px 5px 2px;
  display:grid; place-items:center;
  color:var(--teal-900);
  animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{opacity:.5; transform:translateY(0)}
  50%{opacity:1; transform:translateY(-4px)}
}
.empty-slot svg{width:24px; height:24px}

.empty h1{
  font-size:clamp(36px, 4.6vw, 58px);
  color:var(--ink);
}
.empty h1 em{font-style:italic; color:var(--teal-900); font-weight:400}
.empty .eb-sub{
  color:var(--ink-3); font-size:17px; line-height:1.65; max-width:520px;
}
.empty .eb-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.empty .btn-ghost{
  padding:16px 24px; border-radius:999px;
  border:1px solid var(--line); background:transparent; cursor:pointer;
  font-family:var(--f-label); font-weight:500; font-size:15px;
  color:var(--ink); transition:all .2s;
}
.empty .btn-ghost:hover{border-color:var(--teal-900); color:var(--teal-900)}

.empty .notify{
  margin-top:32px; padding:24px 28px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  display:flex; gap:14px; align-items:center; max-width:600px; width:100%; margin-left:auto; margin-right:auto;
  text-align:left;
}
.empty .notify .label{
  font-family:var(--f-head); font-style:italic; font-size:15px; color:var(--ink); font-weight:500;
}
.empty .notify .hint{
  font-family:var(--f-body); font-size:13px; color:var(--ink-3); margin-top:2px;
}
.empty .notify form{display:flex; gap:10px; flex:1; margin-left:auto}
.empty .notify input{
  flex:1; min-width:0;
  padding:12px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg);
  font:inherit; font-size:14px; color:var(--ink);
}
.empty .notify input:focus{outline:none; border-color:var(--teal-900)}
.empty .notify button{
  padding:12px 18px; border-radius:999px;
  background:var(--teal-900); color:#fff; border:none; cursor:pointer;
  font-family:var(--f-label); font-weight:600; font-size:14px;
  transition:background .2s;
}
.empty .notify button:hover{background:#0a4f3e}
@media (max-width:560px){
  .empty .notify{flex-direction:column; align-items:stretch}
  .empty .notify form{margin-left:0; width:100%}
}

/* Browse other categories */
.other-cats{
  padding:80px 0 120px;
  background:var(--bg-2);
  border-top:1px solid var(--line);
}

/* ---- 404 ---- */
.fourohfour{
  min-height:100vh;
  background:var(--teal-900);
  color:#F5F2E7;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.fourohfour::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(93,202,165,.2), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(239,159,39,.08), transparent 60%);
  pointer-events:none;
}
.fourohfour .nav{position:relative; z-index:3; padding:22px 0}
.fourohfour .nav .logo{font-size:22px}
.fourohfour .main{
  flex:1; display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center; padding:60px 0;
  position:relative; z-index:2;
}
@media (max-width:860px){ .fourohfour .main{grid-template-columns:1fr; gap:40px; padding:40px 0} }
.fourohfour .big{
  font-family:var(--f-head); font-weight:400; font-style:italic;
  font-size:clamp(120px, 22vw, 280px);
  line-height:.95; letter-spacing:-0.04em;
  color:transparent;
  -webkit-text-stroke: 1.5px rgba(245,242,231,.85);
  position:relative;
}
.fourohfour .big .fill{
  position:absolute; inset:0;
  color:#F5F2E7; -webkit-text-stroke:0;
  clip-path: inset(50% 0 0 0);
}
.fourohfour h1{
  color:#F5F2E7; font-size:clamp(36px, 4.5vw, 56px); line-height:1.12; margin-bottom:26px; padding-bottom:4px;
}
.fourohfour h1 em{font-style:italic; color:#9AE3C4; font-weight:400}
.fourohfour .sub{
  color:rgba(245,242,231,.92); font-size:17px; line-height:1.65; max-width:480px;
}
.fourohfour .actions{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap}
.fourohfour .btn-ghost{
  padding:16px 24px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25); background:transparent; cursor:pointer;
  font-family:var(--f-label); font-weight:500; font-size:15px;
  color:#F5F2E7; transition:all .2s;
}
.fourohfour .btn-ghost:hover{border-color:var(--teal-400); color:var(--teal-400)}
.fourohfour .popular{
  margin-top:44px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.14);
  max-width:480px;
}
.fourohfour .popular .label{
  font-family:var(--f-head); font-size:13px; font-style:italic; color:rgba(245,242,231,.82);
  margin-bottom:14px;
}
.fourohfour .popular .links{display:flex; gap:10px; flex-wrap:wrap}
.fourohfour .popular a{
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  font-family:var(--f-body); font-size:13px; color:#F5F2E7;
  transition:all .2s;
}
.fourohfour .popular a:hover{background:rgba(93,202,165,.14); border-color:var(--teal-400)}

/* Floating lost book visual */
.lost-book-wrap{
  position:relative; min-height:420px;
  display:flex; justify-content:center; align-items:center;
  perspective:1200px;
}
.lost-book{
  position:relative; width:220px; height:310px;
  transform-style:preserve-3d;
  animation: drift 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.4));
}
@keyframes drift{
  0%,100%{transform: rotateY(-20deg) rotate(-4deg) translateY(0)}
  50%{transform: rotateY(-15deg) rotate(2deg) translateY(-14px)}
}
.lost-book .face{
  position:absolute; inset:0; border-radius:4px 10px 10px 4px; overflow:hidden;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06), inset 1px 0 0 rgba(0,0,0,.25);
}
.lost-book .face.front{background:linear-gradient(155deg, #F1EFE8, #D9D5C7); color:var(--ink)}
.lost-book .cover-l{padding:24px 22px; color:var(--ink); height:100%; display:flex; flex-direction:column; justify-content:space-between}
.lost-book .cat-l{font-family:var(--f-head); font-style:italic; font-size:13px; color:var(--teal-900)}
.lost-book .ct-l{font-family:var(--f-head); font-weight:500; font-size:38px; line-height:1; letter-spacing:-0.03em; color:var(--ink)}
.lost-book .ct-l em{font-style:italic; color:var(--teal-900)}
.lost-book .author-l{font-family:var(--f-head); font-style:italic; font-size:12px; color:var(--ink-3)}
.lost-book .spine{
  position:absolute; left:-12px; top:0; bottom:0; width:14px;
  transform: rotateY(-90deg) translateX(-7px); transform-origin:right center;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.15));
  border-radius:2px 0 0 2px;
}
.lost-book .pages{
  position:absolute; right:-14px; top:6px; bottom:6px; width:14px;
  transform: rotateY(90deg) translateX(7px); transform-origin:left center;
  background: repeating-linear-gradient(to bottom, #F6F3E9 0 1px, #E7E3D3 1px 2px);
  border-radius:2px;
}
.lost-book .stamp{
  position:absolute; top:28px; right:-30px;
  background:var(--amber); color:var(--amber-ink);
  font-family:var(--f-head); font-style:italic; font-size:13px; font-weight:500;
  padding:8px 16px; border-radius:999px; transform:rotate(10deg);
  box-shadow: 0 10px 20px -8px rgba(239,159,39,.55);
}

.floating-qm{
  position:absolute; font-family:var(--f-head); font-style:italic; font-weight:400;
  color:rgba(93,202,165,.35); pointer-events:none;
}
.floating-qm.q1{top:10%; left:8%; font-size:60px; animation: float 5s ease-in-out infinite}
.floating-qm.q2{bottom:14%; right:6%; font-size:44px; animation: float 6s ease-in-out infinite reverse}
.floating-qm.q3{top:40%; right:14%; font-size:28px; opacity:.6; animation: float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-12px) rotate(4deg)}}

/* ---------------- Language switcher (theme addition) ---------------- */
/* Hide ebook-count related UI while the library is empty */
.eb-hide-empty{display:none !important}

.lang-switcher,
.lang-switcher ul{
  list-style:none !important; padding:0 !important; margin:0;
  display:flex; gap:6px; align-items:center;
  font-family:var(--f-label); font-size:12px;
}
.lang-switcher{margin-left:24px}
.lang-switcher li{list-style:none !important; padding:0; margin:0; display:inline-block}
.lang-switcher li::marker{content:"" !important}
.lang-switcher a{
  padding:8px 12px; border-radius:999px;
  color:rgba(245,242,231,.92);
  border:1px solid rgba(255,255,255,.18);
  text-transform:uppercase; letter-spacing:.06em; font-weight:500;
  transition:all .2s ease;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:48px; min-height:44px;
  box-sizing:border-box;
}
.lang-switcher a:hover{color:#fff; border-color:var(--teal-400)}
.lang-switcher .current-lang a, .lang-switcher li.current-lang a{
  background:var(--teal-400); color:var(--teal-900); border-color:var(--teal-400);
}
.nav{gap:18px}

/* ---- Legal pages (Privacy, Cookies, Refund) ---- */
.legal-head{ background:var(--teal-900); color:#F5F2E7; position:relative; overflow:hidden; padding-bottom:72px; }
.legal-head::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(93,202,165,.18), transparent 60%),
    radial-gradient(700px 500px at 5% 110%, rgba(239,159,39,.06), transparent 60%);
  pointer-events:none;
}
.legal-head .nav{position:relative; z-index:3}
.legal-head .inner-wrap{position:relative; z-index:2; margin-top:64px; max-width:780px}
.legal-head .crumbs{
  font-family:var(--f-body); font-size:13px; color:rgba(245,242,231,.82);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.legal-head .crumbs a{color:rgba(245,242,231,.85); border-bottom:1px solid rgba(245,242,231,.25)}
.legal-head .crumbs a:hover{color:#fff}
.legal-head .crumbs .sep{opacity:.5}
.legal-head .crumbs .current{color:#F5F2E7; font-style:italic}
.legal-head h1{ color:#F5F2E7; font-size:clamp(40px, 5.8vw, 72px); line-height:1.05; margin-top:22px; }
.legal-head h1 em{font-style:italic; color:#9AE3C4; font-weight:400}
.legal-head .sub{ color:rgba(245,242,231,.92); font-size:17px; line-height:1.65; margin-top:22px; max-width:620px; }
.legal-head .meta-row{
  margin-top:30px; display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--f-body); font-size:13px; color:rgba(245,242,231,.82); font-style:italic;
}
.legal-head .meta-row .dot{opacity:.5}

.legal-body{ padding:80px 0 120px; background:var(--bg); }
.legal-layout{ display:grid; grid-template-columns: 240px 1fr; gap:80px; align-items:flex-start; }
@media (max-width:960px){ .legal-layout{grid-template-columns:1fr; gap:40px} }

.toc{ position:sticky; top:24px; padding:26px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); }
.toc .label{
  font-family:var(--f-head); font-size:13px; font-style:italic; color:var(--teal-900);
  font-weight:500; display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.toc .label::before{content:""; width:24px; height:1px; background:var(--teal-900)}
.toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; display:flex; flex-direction:column; gap:10px; }
.toc li{counter-increment:toc; display:flex; gap:10px; align-items:baseline}
.toc li::before{
  content: counter(toc, decimal-leading-zero);
  font-family:var(--f-head); font-style:italic; font-size:11px; color:var(--ink-3); min-width:20px;
}
.toc a{ color:var(--ink-2); font-size:14px; line-height:1.4; transition:color .2s; }
.toc a:hover{color:var(--teal-900)}
@media (max-width:960px){ .toc{position:static} }

.article{ max-width:680px; font-size:16px; line-height:1.75; color:var(--ink-2); font-family:var(--f-body); }
.article p{margin:0 0 18px}
.article h2{
  font-family:var(--f-head); font-weight:500; font-size:32px; color:var(--ink);
  letter-spacing:-0.02em; line-height:1.2;
  margin:56px 0 18px; scroll-margin-top:40px;
  display:flex; align-items:baseline; gap:16px;
}
.article h2 .sec-n{
  font-family:var(--f-head); font-style:italic; font-weight:400;
  font-size:16px; color:var(--teal-900);
  border-bottom:1px solid var(--line); padding-bottom:2px; min-width:32px;
}
.article h2:first-of-type{margin-top:0}
.article h3{ font-family:var(--f-head); font-weight:500; font-size:20px; color:var(--ink); letter-spacing:-0.01em; margin:30px 0 10px; }
.article a{color:var(--teal-900); border-bottom:1px solid rgba(15,110,86,.3); transition:border-color .2s}
.article a:hover{border-color:var(--teal-900)}
.article ul, .article ol{padding-left:22px; margin:0 0 18px}
.article li{margin-bottom:8px}
.article strong{color:var(--ink); font-weight:500}
.article em{font-style:italic}

.article .callout{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--teal-900);
  border-radius:10px; padding:22px 24px; margin:28px 0;
}
.article .callout .k{
  font-family:var(--f-head); font-style:italic; font-weight:500; color:var(--teal-900);
  font-size:14px; margin-bottom:6px;
}
.article .callout p{margin:0; color:var(--ink-2); font-size:15px; line-height:1.65}

.article dl{margin:0 0 18px}
.article dl .row{ display:grid; grid-template-columns: 170px 1fr; gap:20px; padding:14px 0; border-bottom:1px dashed var(--line); }
.article dl .row:first-child{border-top:1px dashed var(--line)}
.article dl dt{ font-family:var(--f-head); font-style:italic; font-weight:500; color:var(--ink); font-size:15px; }
.article dl dd{margin:0; color:var(--ink-2); font-size:15px; line-height:1.6}
@media (max-width:560px){ .article dl .row{grid-template-columns:1fr; gap:4px} }

.article .end-note{
  margin-top:64px; padding:28px 0 0; border-top:1px solid var(--line);
  font-family:var(--f-head); font-style:italic; font-size:15px; color:var(--ink-3);
}

.article .contact-card{
  margin-top:32px; padding:28px 30px;
  background:var(--teal-900); color:#F5F2E7; border-radius:var(--r-lg);
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.article .contact-card h3{color:#F5F2E7; margin:0 0 6px; font-style:italic; font-weight:400}
.article .contact-card p{color:rgba(245,242,231,.92); margin:0; font-size:14px}
.article .contact-card a{ color:#9AE3C4; border-color:rgba(154,227,196,.4); }
.article .contact-card .mail{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:999px;
  background:var(--amber); color:var(--amber-ink) !important;
  font-family:var(--f-label); font-weight:600; font-size:14px; border:none;
  box-shadow: 0 10px 24px -10px rgba(239,159,39,.55);
}
.article .contact-card .mail:hover{border:none}
@media (max-width:560px){ .article .contact-card{grid-template-columns:1fr} }