/* Site styles for Learning Tail (Scandi-inspired) */
:root {
  /* Option A — Nordic Minimal */
  --bg: #FAF7F2;         /* bone */
  --bg-2: #FFFFFF;       /* white */
  --ink: #1B1F23;        /* charcoal */
  --text: #23272D;       /* body */
  --muted: #6B7280;      /* secondary */
  --line: #E7E4DE;       /* hairline */
  --accent: #6D8B74;     /* sage */
  --accent-rose: #D8BFC9;/* muted rose */
  --accent-blue: #BFD6E6;/* powder */
  --accent-sage: #D5E1D6;/* pale sage */
  --accent-clay: #E8DED3;/* pale clay */
  --radius-l: 18px;
  --radius: 12px;
  --radius-s: 8px;
  --shadow-s: 0 2px 8px rgba(27,31,35,0.05);
  --shadow-m: 0 12px 38px rgba(27,31,35,0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text); text-decoration: none; }
a:hover { opacity: 0.8; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.container-wide { max-width: 1360px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { font-weight: 700; letter-spacing: .2px; color: var(--ink); font-size: 18px; }
.brand .dot { color: var(--accent); }
.nav { display: flex; gap: 28px; align-items: center; }
.nav { border-top:1px solid #f1e7ed; justify-content:center; gap:26px; padding:10px 0; }
.nav a { color: #a46893; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; opacity: .95; text-decoration:none; }
.nav a:hover { opacity: 1; }
.nav a.active{ color:#f196bd; border-bottom:2px solid #f196bd; }
.cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--ink); color: #fff; border-radius: 999px; font-weight: 700; border: 1px solid var(--ink); transition: transform .15s ease; letter-spacing: .02em; }
.cta:hover { transform: translateY(-1px); }

/* Announcement + header inner (Scandi inspiration) */
.announce{background:#ef9acc; color:#fff; text-align:center; padding:8px 16px; font-weight:700; letter-spacing:.5px; font-family:"Baloo 2", cursive}
.announce .arrow{opacity:.85}
.header-inner{max-width:1200px; margin:0 auto; padding:10px 20px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.left-icons,.right-icons{display:flex; align-items:center; gap:14px}
.icon{width:20px; height:20px; border:2px solid var(--ink); border-radius:999px; display:inline-block; position:relative}
.icon:after{content:''; position:absolute; right:-3px; top:-3px; width:7px; height:7px; background:var(--accent-rose); border-radius:50%;}
.logo{display:flex; flex-direction:column; align-items:center; gap:2px}
.logo-sprinkles{display:flex; gap:6px}
.logo-sprinkles .sprinkle{width:8px; height:4px; border-radius:3px; background:#ffd36a}
.logo-sprinkles .sprinkle:nth-child(2){background:#97d8ff}
.logo-sprinkles .sprinkle:nth-child(3){background:#8ee3a6}
.logo-mark{font-family:"Baloo 2", cursive; font-weight:700; letter-spacing:2px; font-size:20px; color:var(--ink)}
.logo-sub{font-size:11px; color:#a17a9d; margin-top:-6px; font-weight:700; letter-spacing:.1em}

/* Hero */
.hero { position: relative; padding: 112px 0 64px; background: var(--bg); }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: center; }
.eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #eef1f4; color: #495462; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.title { font-size: clamp(48px, 7.2vw, 96px); line-height: 1.02; margin: 14px 0 18px; letter-spacing: -0.015em; color: var(--ink); }
.subtitle { color: var(--muted); font-size: 18px; line-height: 1.6; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 600; transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.accent { background: var(--accent-rose); color: #222; border-color: var(--accent-rose); }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-s); font-size: 12px; }
.hero-media { border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); overflow: hidden; background: var(--bg-2); }
.hero-media img, .hero-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-chips { margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-full { min-height: 86vh; display: grid; place-items: center; text-align: center; padding: 140px 0 120px; position: relative; }
.hero-full .title { font-size: clamp(48px, 8vw, 88px); }
.bg-blob { position: absolute; border-radius: 999px; filter: blur(16px); opacity: .35; pointer-events: none; }
.bg-blob.rose { background: radial-gradient(closest-side, var(--accent-rose), transparent 70%); width: 520px; height: 520px; right: -160px; top: -120px; }
.bg-blob.sage { background: radial-gradient(closest-side, var(--accent-sage), transparent 70%); width: 460px; height: 460px; left: -140px; bottom: -120px; }
.bg-blob.blue { background: radial-gradient(closest-side, var(--accent-blue), transparent 70%); width: 360px; height: 360px; right: 10%; bottom: -100px; }
.swatches { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.swatch { width: 14px; height: 14px; border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.swatch.sand { background: var(--accent-clay); }
.swatch.sage { background: var(--accent-sage); }
.swatch.rose { background: var(--accent-rose); }
.swatch.blue { background: var(--accent-blue); }

/* Scandi hero grid with CTA pill */
.hero-scandi{max-width:1200px; margin:20px auto 28px; padding:0 20px}
.hero-scandi .hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.hero-tile{position:relative; border-radius:18px; overflow:hidden}
.hero-tile img, .hero-tile video{width:100%; height:420px; object-fit:cover; display:block}
.cta-pill{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#f4a8c8; color:#fff; padding:14px 26px; border-radius:999px; font-weight:700; letter-spacing:.3px; box-shadow:var(--shadow-m)}

/* Scandinavian 3-panel workspace hero */
.ws-page{display:grid; grid-template-columns:38% 42% 20%; min-height:86vh}
.ws-left{padding:36px 56px 48px 56px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line)}
.ws-topbar{display:flex; align-items:center; justify-content:space-between; letter-spacing:.2px; font-weight:600}
.ws-hamburger{width:20px; height:14px; display:inline-grid; grid-template-rows:repeat(3,2px); gap:4px}
.ws-hamburger span{display:block; background:var(--ink); border-radius:2px}
.ws-count{margin:56px 0 18px; color:#9a9aa1; font-weight:600; letter-spacing:3px; font-size:12px}
.ws-title{font-family:Montserrat, Inter, sans-serif; font-weight:800; font-size:44px; line-height:1.1; letter-spacing:.2px; margin:0 0 18px}
.ws-intro{max-width:360px; color:#6e6e75; font-size:14px}
.ws-pagers{display:flex; gap:14px; margin-top:28px}
.ws-pager-btn{width:38px; height:38px; border-radius:999px; border:1px solid #dedee3; background:#fff; display:grid; place-items:center; cursor:pointer; transition:all .2s ease}
.ws-pager-btn:hover{box-shadow:0 6px 16px rgba(16,16,24,.08); transform:translateY(-1px)}
.ws-mid{position:relative; overflow:hidden}
.ws-photo{width:100%; height:100%; object-fit:cover; display:block}
.ws-right{display:grid; grid-template-rows:1fr 1fr; border-left:1px solid var(--line)}
.ws-explore{padding:38px 34px; background:linear-gradient(180deg, #f9e7de, #f2c9b3); display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start}
.ws-kicker{letter-spacing:.2em; font-size:11px; font-weight:700; color:#6f6f74; margin-bottom:40px}
.ws-cta{font-family:Montserrat, Inter, sans-serif; font-weight:800; font-size:28px; line-height:1.2}
.ws-cta a{color:inherit; text-decoration:none}
.ws-arrow{font-size:28px; margin-left:6px}
.ws-product{padding:28px 34px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ws-label{font-size:11px; letter-spacing:.3em; color:#9a9aa1; font-weight:700; margin:8px 0 18px}
.ws-chair-wrap{display:flex; align-items:center; justify-content:center; width:100%; height:70%}
.ws-chair{max-height:70%; max-width:80%; object-fit:contain}
.ws-name{font-family:Montserrat, Inter, sans-serif; font-weight:800; margin-top:12px; font-size:18px}

@media (max-width:1100px){
  .ws-page{grid-template-columns:44% 56%}
  .ws-right{display:none}
}
@media (max-width:720px){
  .ws-left{padding:28px 24px}
  .ws-title{font-size:34px}
}

/* Minimal hero A */
.hero-A { padding: 140px 0 110px; background: var(--bg); text-align: center; }
.hero-A .title { position: relative; display: inline-block; }
.hero-A .title::after { content:""; display:block; height:2px; width: 120px; background: var(--ink); margin: 16px auto 0; opacity: .85; }
.hero-A .accent { color: var(--accent); }

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.marquee__track { display: inline-block; padding: 10px 0; animation: marq 30s linear infinite; opacity: .8; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #6b7280; }
.marquee__track span { margin: 0 24px; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Strict grid tiles */
.tiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.tile { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-m); min-height: 300px; background: #fff; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(100%) contrast(1.05) saturate(0.25); }
.tile__label { position:absolute; left: 16px; bottom: 14px; color:#fff; font-weight: 800; letter-spacing: .02em; font-size: 22px; z-index: 2; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }

/* Pattern band */
.pattern-band { height: 6px; background: repeating-linear-gradient(90deg, rgba(27,31,35,0.08) 0 28px, transparent 28px 56px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* Sections */
.section { padding: 96px 0; }
.section .section-title { font-size: 28px; margin: 0 0 10px; }
.section .section-subtitle { color: var(--muted); margin-bottom: 28px; }
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-s); }
.card.media { padding: 0; overflow: hidden; }
.card.media img { width: 100%; height: 180px; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.card.media .inner { padding: 16px 18px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); }

/* Big tiles */
.tiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tile { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-m); min-height: 280px; background: #fff; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(17,18,20,0.0) 30%, rgba(17,18,20,0.5) 100%); }
.tile__label { position:absolute; left: 18px; bottom: 16px; color:#fff; font-weight: 800; letter-spacing: .02em; font-size: 24px; z-index: 2; }

/* Alt section backgrounds (Scandi pastels) */
.alt-sand { background: var(--accent-clay); }
.alt-sage { background: var(--accent-sage); }
.alt-sky  { background: var(--accent-blue); }
.alt-sand, .alt-sage, .alt-sky { background-clip: padding-box; }
.alt-sand .card, .alt-sage .card, .alt-sky .card { background: #fff; }

/* Feature row */
.feature-row { display:grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.feature-media { position:relative; }
.frame { border-radius: 28px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-m); }
.frame img { display:block; width:100%; height:auto; }
.sticker { position:absolute; left:-12px; bottom:-12px; background:#fff; border:1px solid var(--line); border-radius: 999px; padding:10px 14px; box-shadow: var(--shadow-s); font-weight:700; }

.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-s); display: grid; gap: 10px; }
.plan.highlight { border-color: var(--accent-rose); box-shadow: var(--shadow-m); }
.plan.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan.dark .subtitle { color: rgba(255,255,255,0.8); }
.plan .actions { display:flex; gap:10px; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.invert { background:#fff; color: var(--ink); border-color:#fff; }
.price { font-size: 24px; font-weight: 800; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.site-footer .inner { padding: 32px 0; display: grid; gap: 10px; }
.small { color: #9aa3af; font-size: 12px; }

/* Product grid inspired by scandi */
.product-grid{max-width:1200px; margin:0 auto 48px; padding:0 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.product-card{background:#fff; border-radius:18px; padding:14px; box-shadow:0 1px 0 #f2e6ed; border:1px solid var(--line); position:relative}
.product-card .thumb{background:#faeef4; border-radius:14px; height:260px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.product-card .thumb img{width:100%; height:100%; object-fit:cover}
.ribbon{position:absolute; right:14px; bottom:14px; background:#f06aac; color:#fff; font-weight:800; padding:12px 18px; border-radius:999px; box-shadow:var(--shadow-m)}

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .tiles-grid { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
}

@media (max-width:1100px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .hero-tile img, .hero-tile video{height:360px}
}
@media (max-width:680px){
  .header-inner{grid-template-columns: auto 1fr auto}
  .hero-scandi .hero-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
}