/* ════════════════════════════════════════════════════════════════
   FEATURES + DESIGNS + PRICING + FOOTER
   ════════════════════════════════════════════════════════════════ */

/* ── section head shared ── */
.section-head{ display:grid; grid-template-columns:5fr 1fr 6fr; gap:40px; align-items:end; margin-bottom:80px; }
.section-head .eyebrow{ display:flex; align-items:center; gap:14px; font-size:11px;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--terra-500); margin-bottom:16px; }
.section-head .eyebrow .rule{ width:24px; height:1px; background:var(--terra-500); }
.section-head h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,4.5vw,4rem);
  line-height:1; letter-spacing:-0.025em; margin:0; text-wrap:balance; font-variation-settings:"opsz" 120; }
.section-head p{ font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:520px; }

/* ════════════════════════════════════════════════════════════════
   FEATURES — editorial bento with one large illustrative tile
   ════════════════════════════════════════════════════════════════ */
section.features{ padding:120px 0; }
.feat-grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows: minmax(220px, auto);
  gap:1px; background:rgba(26,20,18,0.10);
  border:1px solid rgba(26,20,18,0.10); border-radius:24px; overflow:hidden;
}
.feat{ background:var(--canvas); padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
.feat.span2{ grid-column:span 2; }
.feat.span3{ grid-column:span 3; }
.feat.span4{ grid-column:span 4; }
.feat.row2{ grid-row:span 2; }
.feat.dark{ background:var(--ink); color:var(--canvas); position:relative; overflow:hidden; }
.feat-num{ font-family:var(--font-display); font-style:italic; font-weight:300; color:var(--terra-500); font-size:20px; }
.feat.dark .feat-num{ color:var(--terra-300); }
.feat-icon{ width:24px; height:24px; color:var(--ink-muted); }
.feat-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; }
.feat h3{ font-family:var(--font-display); font-weight:500; font-size:1.85rem; line-height:1.1;
  margin:0 0 16px; letter-spacing:-0.02em; }
.feat.span2 h3{ font-size:1.45rem; }
.feat p{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0; }
.feat.dark p{ color:rgba(251,247,241,0.7); }

/* illustrative feature — admin panel mock */
.feat-illus{ background:var(--canvas-soft); padding:40px 0 0 40px; overflow:hidden; }
.feat-illus h3{ padding-right:40px; }
.feat-illus p{ padding-right:40px; margin-bottom:24px; }
.admin-mock{
  background:var(--canvas); border-radius:14px 0 0 0;
  border:1px solid rgba(26,20,18,0.08); border-right:none; border-bottom:none;
  box-shadow: -4px -4px 0 -1px rgba(26,20,18,0.04);
  margin-right:-1px; margin-bottom:-1px;
  padding:18px 22px; display:flex; flex-direction:column; gap:14px;
  flex:1; min-height:200px;
}
.admin-bar{ display:flex; align-items:center; justify-content:space-between; }
.admin-title{ font-family:var(--font-display); font-size:14px; }
.admin-title .acc{ color:var(--terra-500); font-style:italic; font-weight:300; }
.admin-pill{ font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--terra-500); padding:3px 10px;
  border:1px solid rgba(184,69,31,0.25); border-radius:9999px; background:rgba(184,69,31,0.05); }
.admin-rows{ display:flex; flex-direction:column; gap:8px; }
.admin-row{ display:grid; grid-template-columns:24px 1fr 60px 50px; gap:10px; align-items:center;
  padding:8px 10px; background:var(--canvas-soft); border-radius:8px; }
.admin-row .sw{ width:22px; height:22px; border-radius:5px; }
.admin-row .nm{ font-size:11px; color:var(--ink); }
.admin-row .nm small{ color:var(--ink-muted); display:block; font-size:9px; }
.admin-row .pr{ font-family:var(--font-display); font-size:12px; text-align:right; }
.admin-row .st{ font-size:8px; letter-spacing:0.18em; text-transform:uppercase; padding:2px 6px; border-radius:4px;
  text-align:center; }
.admin-row .st.live{ background:rgba(63,94,63,0.12); color:var(--moss-600); }
.admin-row .st.draft{ background:rgba(26,20,18,0.06); color:var(--ink-muted); }

/* dark feature with metric */
.feat.dark.metric{ background:var(--canvas-deep); position:relative; }
.feat.dark.metric::before{
  content:''; position:absolute; top:-30%; right:-20%; width:80%; height:120%;
  background:radial-gradient(ellipse at center,rgba(184,69,31,0.25) 0%,transparent 60%);
  filter:blur(40px); pointer-events:none;
}
.feat.dark.metric > *{ position:relative; z-index:1; }
.feat-metric{ font-family:var(--font-display); font-weight:300; font-size:84px; line-height:0.9;
  letter-spacing:-0.04em; color:var(--canvas); font-variation-settings:"opsz" 144; }
.feat-metric .acc{ font-style:italic; color:var(--terra-300); }
.feat-metric-lbl{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(251,247,241,0.55); margin-top:8px; }

/* ════════════════════════════════════════════════════════════════
   PROCESS — quiet timeline
   ════════════════════════════════════════════════════════════════ */
section.process{ padding:120px 0; background:var(--canvas-soft); position:relative; overflow:hidden; }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative; }
.process-grid::before{
  content:''; position:absolute; top:36px; left:36px; right:36px; height:1px;
  background:linear-gradient(to right,transparent 0%,rgba(26,20,18,0.15) 8%,rgba(26,20,18,0.15) 92%,transparent 100%);
}
.process-step{ position:relative; }
.process-num{ width:72px; height:72px; border-radius:50%; background:var(--canvas);
  border:1px solid rgba(26,20,18,0.15);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:28px; color:var(--terra-500); position:relative; z-index:1; margin-bottom:24px; }
.process-step.featured .process-num{ background:var(--terra-500); color:var(--canvas); border-color:var(--terra-600);
  box-shadow:var(--shadow-warm-md); }
.process-step h3{ font-family:var(--font-display); font-weight:500; font-size:1.4rem; line-height:1.15;
  margin:0 0 12px; letter-spacing:-0.015em; }
.process-step h3 .acc{ font-style:italic; font-weight:300; color:var(--terra-500); }
.process-step p{ font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0; max-width:240px; text-wrap:pretty; }

/* ════════════════════════════════════════════════════════════════
   DESIGNS — template gallery (real images)
   ════════════════════════════════════════════════════════════════ */
section.designs{ padding:120px 0; background:var(--canvas-deep); color:var(--canvas); position:relative; overflow:hidden; }
section.designs .section-head h2,
section.designs .section-head p{ color:var(--canvas); }
section.designs .section-head .eyebrow{ color:var(--terra-300); }
section.designs .section-head .eyebrow .rule{ background:var(--terra-300); }
section.designs .section-head p{ color:rgba(251,247,241,0.7); }

.design-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.design-card{ position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(251,247,241,0.10);
  background:rgba(251,247,241,0.04); transition:transform .4s ease; }
.design-card:hover{ transform:translateY(-4px); }
.design-card img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.16,1,.3,1); }
.design-card:hover img{ transform:scale(1.04); }
.design-card .veil{ position:absolute; inset:0;
  background:linear-gradient(to top,var(--canvas-deep) 5%,rgba(20,16,16,0.3) 35%,transparent 70%); }
.design-card .meta{ position:absolute; left:24px; right:24px; bottom:22px; }
.design-card .cat{ font-size:11px; letter-spacing:0.25em; text-transform:uppercase; color:var(--terra-300); margin-bottom:8px; }
.design-card h3{ font-family:var(--font-display); font-weight:500; font-size:1.5rem;
  line-height:1.1; margin:0; letter-spacing:-0.015em; }
.design-card h3 .acc{ font-style:italic; font-weight:300; color:var(--terra-300); }
.design-card .img-wrap{ position:relative; width:100%; }

.dc-fashion{ grid-column:span 3; grid-row:span 2; } .dc-fashion .img-wrap{ aspect-ratio:4/5; }
.dc-food   { grid-column:span 3; }                  .dc-food .img-wrap{ aspect-ratio:16/10; }
.dc-elec   { grid-column:span 2; }                  .dc-elec .img-wrap{ aspect-ratio:4/3; }
.dc-beauty { grid-column:span 2; }                  .dc-beauty .img-wrap{ aspect-ratio:4/3; }
.dc-sports { grid-column:span 2; }                  .dc-sports .img-wrap{ aspect-ratio:4/3; }
.dc-luxury { grid-column:span 6; }                  .dc-luxury .img-wrap{ aspect-ratio:21/7; }
.dc-luxury .meta{ left:48px; bottom:40px; max-width:32rem; }
.dc-luxury h3{ font-size:2.4rem; }

.designs-foot{ margin-top:40px; font-size:14px; color:rgba(251,247,241,0.5); }
.designs-foot strong{ color:rgba(251,247,241,0.85); font-weight:400; }

/* ════════════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════════════ */
section.pricing{ padding:120px 0; background:var(--canvas-soft); position:relative; overflow:hidden; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.price-card{ background:var(--canvas); border:1px solid rgba(26,20,18,0.10); border-radius:24px; padding:40px;
  display:flex; flex-direction:column; position:relative; }
.price-card.featured{ background:var(--ink); color:var(--canvas); box-shadow:var(--shadow-warm-xl); }
.price-tag{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); background:var(--terra-500);
  color:var(--canvas); padding:6px 20px; border-radius:9999px; font-size:11px;
  letter-spacing:0.25em; text-transform:uppercase; font-weight:500; box-shadow:var(--shadow-warm-md); }
.price-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; }
.price-eyb{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--terra-500); margin-bottom:4px; }
.price-card.featured .price-eyb{ color:var(--terra-300); }
.price-sub{ font-family:var(--font-display); font-style:italic; font-weight:300; color:var(--ink-muted); font-size:14px; }
.price-card.featured .price-sub{ color:rgba(251,247,241,0.6); }
.price-num{ font-family:var(--font-display); font-size:48px; font-weight:500; letter-spacing:-0.025em; }
.price-billed{ color:var(--ink-muted); font-size:14px; margin-top:4px; margin-bottom:40px; }
.price-card.featured .price-billed{ color:rgba(251,247,241,0.5); }
.price-list{ list-style:none; padding:0; margin:0 0 40px; display:flex; flex-direction:column; gap:14px; flex:1; }
.price-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-soft); }
.price-list li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--terra-500);
  margin-top:9px; flex-shrink:0; }
.price-card.featured .price-list li{ color:rgba(251,247,241,0.85); }
.price-card.featured .price-list li::before{ background:var(--terra-300); }
.price-cta{ display:block; text-align:center; padding:14px; border-radius:9999px;
  font-size:14px; font-weight:500; text-decoration:none;
  border:1px solid rgba(26,20,18,0.20); color:var(--ink); transition:all .2s; }
.price-cta:hover{ background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.price-card.featured .price-cta{ background:var(--terra-500); color:var(--canvas);
  border-color:var(--terra-500); box-shadow:var(--shadow-warm-md); }
.price-card.featured .price-cta:hover{ background:var(--terra-600); border-color:var(--terra-600); }

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
footer{ background:var(--ink); color:var(--canvas); padding:80px 0 32px; position:relative; overflow:hidden; }
.foot-grid{ display:grid; grid-template-columns:5fr 2fr 2fr 3fr; gap:40px; margin-bottom:60px; }
.foot-brand{ font-family:var(--font-display); font-size:30px; font-weight:300; line-height:1.2; font-style:italic; }
.foot-brand .accent{ color:var(--terra-300); }
.foot-meta{ font-size:13px; color:rgba(251,247,241,0.55); margin-top:20px; }
.foot-col h4{ font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--terra-300);
  margin:0 0 20px; font-weight:500; font-family:var(--font-body); }
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.foot-col a{ color:rgba(251,247,241,0.8); text-decoration:none; font-size:14px; }
.foot-col a:hover{ color:var(--terra-300); }
.foot-bottom{ display:flex; justify-content:space-between; font-size:12px; color:rgba(251,247,241,0.4);
  padding-top:24px; border-top:1px solid rgba(255,255,255,0.05); }

/* ══════════════════════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVE LAYER
   Added 2026-04-28 — original design was desktop-only.
   Breakpoints: 1024px (tablet), 768px (large phone), 480px (small phone)
   ══════════════════════════════════════════════════════════════ */

/* Tablet — collapse 6-col grids to 2-col, soften paddings */
@media (max-width: 1024px) {
  .wrap { padding: 0 28px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .feat.span2, .feat.span3, .feat.span4 { grid-column: span 2; }
  .feat.row2 { grid-row: auto; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .design-grid { grid-template-columns: repeat(2, 1fr); }
  .dc-fashion, .dc-food, .dc-elec, .dc-beauty, .dc-sports { grid-column: span 1; grid-row: auto; }
  .dc-luxury { grid-column: span 2; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid .price-card:nth-child(3) { grid-column: span 2; max-width: 50%; margin: 0 auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Phone — single column everywhere */
@media (max-width: 768px) {
  .wrap { padding: 0 20px; }

  /* Top announcement strip */
  .announce { font-size: 11px; padding: 10px 16px; line-height: 1.4; }
  .announce .sep { margin: 0 6px; }

  /* Nav */
  .top { padding: 16px 0; }
  .top .row { flex-wrap: wrap; gap: 12px; justify-content: space-between; }
  .nav-links { display: none; }
  .brand .name { font-size: 1.4rem; }
  .nav-actions { gap: 12px; }
  .nav-actions .signin { font-size: 13px; }
  .nav-actions .btn-dark { padding: 10px 16px; font-size: 13px; }

  /* Hero — stack copy above visual, shrink visual */
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-rule-row { font-size: 10px; gap: 10px; flex-wrap: wrap; }
  .hero-copy h1 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .hero-copy p { font-size: 16px; margin-bottom: 28px; }
  .hero-copy .cta { flex-wrap: wrap; gap: 16px; }
  .btn-primary { padding: 14px 22px; font-size: 14px; }
  .meta-row { flex-wrap: wrap; gap: 12px; font-size: 12px; }
  .hero-corner.tl, .hero-corner.tr { display: none; }
  .hero-visual { transform: scale(0.95); transform-origin: top center; }

  /* All grid sections collapse to single column */
  .feat-grid { grid-template-columns: 1fr; gap: 12px; }
  .feat, .feat.span2, .feat.span3, .feat.span4 { grid-column: span 1; padding: 32px 24px; }
  .feat h3 { font-size: 1.5rem; }
  .feat.span2 h3 { font-size: 1.35rem; }
  .feat-illus { padding: 32px 0 0 24px; }
  .feat-illus h3, .feat-illus p { padding-right: 24px; }

  .process-grid { grid-template-columns: 1fr; gap: 24px; }

  .design-grid { grid-template-columns: 1fr; gap: 14px; }
  .dc-luxury { grid-column: span 1; }
  .dc-luxury .meta { left: 24px; bottom: 24px; }
  .dc-luxury h3 { font-size: 1.6rem; }

  /* Mobile pricing — horizontal swipe with snap */
  .pricing-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 16px;
    gap: 14px;
    padding: 4px 16px 20px;
    margin: 0 -24px;
    scrollbar-width: none;
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .pricing-grid .price-card {
    flex: 0 0 86%;
    scroll-snap-align: center;
    max-width: none;
    padding: 28px 24px;
  }
  .pricing-grid .price-card:nth-child(3) { grid-column: auto; max-width: none; }

  .foot-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .foot-brand { font-size: 22px; }
  .foot-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* Small phone — last-mile tightening */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .hero-copy h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .feat { padding: 28px 20px; }
  .price-card { padding: 24px 20px; }
  .nav-actions .btn-dark span,
  .nav-actions .btn-dark { font-size: 12px; padding: 9px 14px; }
}