/* ═════════════════════════════════════════════════════════════════════════
   FEATURE PAGES (/features/*) — the landing page's own section styles.

   Copied VERBATIM from resources/views/landing.blade.php's @section('styles')
   (2026-10-19) so feature pages look exactly like the homepage without a new
   design system. The landing page still carries its inline copy; if you
   change a rule there, change it here too (or move the landing page onto
   this file — that is the intended follow-up once more feature pages ship).

   Included ranges, in landing order: colour tokens; the hero's .hero-micro,
   .btn-hero-primary and URL-entry form (the final CTA reuses them); and the
   below-the-hero block minus the Problem, Feature grid and Pricing sections.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --coral:    #D97557;
  --coral-d:  #C2613E;
  --coral-l:  #FCEEE8;
  --warm:     #1C1917;
  --muted:    #6B6560;
  --faint:    #9E9890;
  --bg:       #FAF9F6;
  --surface:  #FFFFFF;
  --border:   #E3DDD6;
  --green:    #5CB897;
  --red:      #D64545;
  /* Hero halftone dot texture — coral-tinted since our background is light
     (a dark hero would use a light/white-tinted dot instead; same idea, the
     color just has to suit which side of the contrast it's drawn on).
     Stronger than a hairline grid needs to be, since a small filled circle
     reads lighter per-pixel than a 1px line at the same alpha. */
  --grid-line: rgba(217, 117, 87, 0.16);
}

.hero-micro { font-size: .78rem; color: var(--faint); }

.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--coral); color: #fff; font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 10px; text-decoration: none;
  box-shadow: 0 4px 18px rgba(217,117,87,0.32); transition: background .15s, transform .12s, box-shadow .15s;
}
.btn-hero-primary:hover { background: var(--coral-d); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 26px rgba(217,117,87,0.38); }

/* Hero URL entry — one search bar: website icon, field and button inside a single
   bordered control, so it reads as "type your site, press go" rather than a form.
   The focus ring wraps the whole bar. On phones the bar comes apart: the field
   keeps its own border and the button drops full-width beneath it, so the CTA is
   never cramped beside the input. Font is 16px on purpose — anything smaller and
   iOS zooms the page when the field is focused. */
.hero-url-form { max-width: 570px; margin: 4px auto 0; }
.hero-url-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px;
  background: #fff; border: 1.5px solid var(--border, #E3DDD6); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 12px 30px -14px rgba(28,25,23,.10);
  transition: border-color .15s, box-shadow .15s;
}
.hero-url-bar:hover { border-color: #D3CBC1; }
.hero-url-bar:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(217,117,87,.14), 0 12px 30px -14px rgba(28,25,23,.18);
}
.hero-url-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.hero-url-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 1.15rem; line-height: 1; color: var(--faint); pointer-events: none; transition: color .15s;
}
.hero-url-bar:focus-within .hero-url-icon { color: var(--coral); }
.hero-url-input {
  width: 100%; min-width: 0; height: 48px; border: 0; background: transparent; border-radius: 10px;
  padding: 0 12px 0 42px; font-size: 16px; color: var(--warm); text-align: left;
}
.hero-url-input::placeholder { color: var(--faint); }
.hero-url-input:focus { outline: none; }
.hero-url-btn { flex: 0 0 auto; border: none; cursor: pointer; white-space: nowrap; font-size: 15px; padding: 0 22px; height: 48px; border-radius: 11px; }
.hero-url-btn.is-loading { pointer-events: none; opacity: .85; }
.hero-url-btn.is-loading svg { display: none; }
.hero-url-btn.is-loading::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: hero-spin .7s linear infinite;
}
@keyframes hero-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-url-btn.is-loading::after { animation-duration: 2s; } }
.hero-manual-link { color: var(--muted); text-decoration: underline; }
.hero-manual-link:hover { color: var(--coral); }
@media (max-width: 560px) {
  .hero-url-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; }
  .hero-url-bar:hover, .hero-url-bar:focus-within { border: 0; box-shadow: none; }
  .hero-url-field {
    background: #fff; border: 1.5px solid var(--border, #E3DDD6); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 10px 24px -14px rgba(28,25,23,.18);
    transition: border-color .15s, box-shadow .15s;
  }
  .hero-url-field:focus-within { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(217,117,87,.14); }
  .hero-url-input { height: 52px; }
  .hero-url-btn { justify-content: center; height: 52px; }
}

:root {
  /* Small secondary text. --faint (#9E9890) is only 2.9:1 on white, under the
     4.5:1 WCAG AA needs for body-size type; this is ~5:1 on white and cream.
     --faint is left alone because the hero still uses it. */
  --ink-quiet: #736D66;
  /* Coral for SMALL text (eyebrows, links, step labels). --coral itself is
     3.2:1 on white — fine for large headings, not for 12px labels. */
  --coral-ink: #B4532F;
  --yes-ink: #17704A; --yes-bg: #E8F6EF;
  --no-ink:  #B3372F; --no-bg:  #FBECEA;
  --rival-ink: #6B4AA8; --rival-bg: #F1ECF8;
  --line: #EDE8E1;
  --tint: #FCFBF9;
}

/* ── SECTION COMMON ── */
.lp-section { padding: 96px 0; }
@media (max-width: 768px) { .lp-section { padding: 64px 0; } }
.lp-white { background: var(--surface); }
.lp-cream { background: var(--bg); }
.lp-wide  { max-width: 1160px; }
.lp-head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.lp-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); margin-bottom: 12px; }
.lp-title { font-family: 'DM Sans', sans-serif; font-size: clamp(1.85rem, 3.3vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--warm); text-wrap: balance; margin: 0 0 14px; }
.lp-title .accent { color: var(--coral); }
/* Smaller section titles on the short page members get (pricing, FAQ). */
.lp-title.is-small { font-size: clamp(1.4rem, 2.1vw, 1.75rem); letter-spacing: -.02em; }
.lp-sub { font-size: 1.06rem; color: var(--muted); line-height: 1.65; margin: 0 auto; max-width: 610px; text-wrap: pretty; }
.lp-link { color: var(--coral-ink); font-weight: 700; text-decoration: none; }
.lp-link:hover { color: var(--coral-d); text-decoration: underline; text-underline-offset: 3px; }
.lp-section a:focus-visible, .lp-section button:focus-visible, .lp-section summary:focus-visible,
.cta-section a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.plan-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--yes-ink); background: var(--yes-bg); border-radius: 100px; padding: 2px 8px; vertical-align: 2px; white-space: nowrap; }

/* ── PRODUCT SCREENS ─────────────────────────────────────────────────────
   Every product image on this page is a real screenshot, framed the same way
   (partials/landing-shot). */
.app-shot { position: relative; display: block; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 26px 56px -26px rgba(28,25,23,.28); }
.app-shot-img { position: relative; display: block; overflow: hidden; background: #F5F4EF; }
.app-shot-img img { display: block; width: 100%; height: auto; }
.app-shot.is-cut .app-shot-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; max-height: 120px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 92%); pointer-events: none; }
/* Textured colour frame around a screenshot (the Scribe-style treatment): a
   coral wash with soft cloudiness plus fine grain, both from an SVG noise
   filter, so there is no image file to load. The card inside keeps its own
   white background and radius. Tried on the Problem section first. */
.shot-frame { padding: clamp(16px, 4.2vw, 54px); border-radius: 22px; background-color: #EDBBA6; background-size: 640px 640px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .011' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .92 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23c)'/%3E%3Crect width='640' height='640' filter='url(%23g)'/%3E%3C/svg%3E"); }
/* Tints, varied per screenshot like Scribe's teal/blue. The texture is white
   noise over whatever colour this is, so only the base colour changes. */
.shot-frame.is-sand { background-color: #e6cfa87a; }
.shot-frame.is-rose { background-color: #E9B5B0; }
.shot-frame.is-sage { background-color: #BCCFBC; }
.shot-frame .app-shot { border-color: rgba(255,255,255,.7); box-shadow: 0 18px 40px -18px rgba(90,40,20,.45); }
/* Every framed screenshot BELOW the hero (they sit in .lp-section; the hero's
   is in .hero-band and keeps the full card): no shadow, no bottom padding, and
   square bottom corners, so the screenshot sits flush on the base of the frame
   like a tab. The frame's own bottom corners are square too, or the card's
   corners would poke past them. */
.lp-section .shot-frame { padding-bottom: 0; border-radius: 22px 22px 0 0; }
.lp-section .shot-frame .app-shot { box-shadow: none; border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Full-page snip in a vertically scrollable window (the datafa.st pattern).
   The height is a fixed viewport-ish window, the page scrolls inside it. */
.app-shot.is-scroll .app-shot-img { aspect-ratio: auto !important; height: clamp(380px, 56vw, 720px); overflow-y: scroll; overflow-x: hidden; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: auto; scrollbar-color: #B7AFA5 transparent; }
/* Soft ring + generous radius (datafa.st-style): the light border reads as a
   device bezel, and the inner corner is concentric with it automatically. */
.app-shot.is-scroll { border: 7px solid #EFECE7; border-radius: 26px; background: #fff; }
/* Scrollbar inset from the rounded corners: margins on the track stop it running
   into (and being clipped by) the corner radius. Chromium/Safari only; Firefox
   keeps its native thin bar. */
.app-shot.is-scroll .app-shot-img::-webkit-scrollbar { width: 16px; }
.app-shot.is-scroll .app-shot-img::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }
.app-shot.is-scroll .app-shot-img::-webkit-scrollbar-thumb { background: #B7AFA5; border-radius: 10px; border: 4px solid transparent; background-clip: padding-box; }
.app-shot.is-scroll .app-shot-img::-webkit-scrollbar-thumb:hover { background: #8F877D; background-clip: padding-box; }
.app-shot.is-scroll .app-shot-img:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
/* Fade + cue at the bottom until the visitor first scrolls the window. */
.app-shot.is-scroll::after { content: "Scroll ↓"; position: absolute; left: 0; right: 14px; bottom: 0; padding: 46px 0 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--warm); background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96) 62%); pointer-events: none; transition: opacity .25s; }
.app-shot.is-scroll.has-scrolled::after { opacity: 0; }
.hero-scroll-hint { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--ink-quiet); }
.hero-scroll-hint i { margin-right: 4px; }
.shot-meta { margin: 12px 2px 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* Hero screenshot: wider than the text column, with the Brands / Dashboard
   switch underneath. */
.hero-shot { max-width: 1280px; margin-top: 32px; text-align: left; }
.hero-views { display: flex; gap: 4px; padding: 4px; margin: 20px auto 6px; width: max-content; max-width: 100%; background: #EFEBE5; border-radius: 12px; }
.hero-view-tab { border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--muted); padding: 8px 16px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s, box-shadow .15s; }
.hero-view-tab:hover { color: var(--warm); }
.hero-view-tab[aria-selected="true"] { background: var(--surface); color: var(--warm); box-shadow: 0 1px 3px rgba(28,25,23,.12); }


/* ── 3. WHAT YOU GET ── one lost question, followed through the product. */
.gain { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 64px; align-items: center; padding: 64px 0; }
.gain + .gain { border-top: 1px solid var(--border); }
.gain:first-of-type { padding-top: 4px; }
.gain:last-of-type { padding-bottom: 0; }
.gain.is-flip { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); }
.gain.is-flip .gain-copy { order: 2; }
@media (max-width: 991px) {
  .gain, .gain.is-flip { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
  .gain.is-flip .gain-copy { order: 0; }
}
.gain-copy, .gain-visual { min-width: 0; }
.gain-step { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--coral-ink); }
.gain-title { font-family: 'DM Sans', sans-serif; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--warm); margin: 8px 0 14px; text-wrap: balance; }
.gain-title .accent { color: var(--coral); }
.gain-copy > p { font-size: 1rem; color: var(--muted); line-height: 1.7; margin: 0 0 18px; max-width: 520px; }
.gain-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gain-points li { position: relative; padding-left: 26px; font-size: .94rem; color: #4A4541; line-height: 1.55; }
.gain-points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--coral-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23C2613E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px no-repeat; }
.gain-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 22px; }
.gain-foot .lp-link { font-size: .95rem; }

/* ── 4. HOW IT WORKS ── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); max-width: 1040px; margin: 0 auto; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } }
.step { background: var(--surface); padding: 30px 28px; }
.step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--coral-l); color: var(--coral-d); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; margin-bottom: 16px; }
.step h3 { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--warm); margin-bottom: 8px; letter-spacing: -.3px; }
.step p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }
.mid-cta { text-align: center; margin-top: 44px; }
.mid-cta .hero-micro { color: var(--ink-quiet); }

/* ── 5. YOUR OPTIONS, HONESTLY ── */
/* position: relative is load-bearing: the .visually-hidden screen-reader
   text in the cells is position:absolute, and without a positioned ancestor
   it escapes this scroller and widens the whole page on phones (565px wide at
   a 375px viewport before this was added). */
.comp-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.comp-table { width: 100%; min-width: 600px; border-collapse: collapse; }
.comp-table thead th { padding: 14px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--tint); border-bottom: 2px solid var(--border); color: var(--muted); text-align: center; }
.comp-table thead th.th-brand { color: var(--coral-ink); background: #FBF1EC; }
.comp-table td, .comp-table tbody th { padding: 13px 16px; font-size: 14px; border-bottom: 1px solid #F0EDE8; vertical-align: middle; text-align: center; color: var(--muted); }
.comp-table tbody tr:last-child > * { border-bottom: none; }
.comp-table .td-feature { text-align: left; color: var(--warm); font-weight: 500; background: var(--surface); line-height: 1.45; }
.comp-table td.td-brand { background: #FDF8F5; font-weight: 600; white-space: nowrap; color: var(--warm); }
/* Pinned first column: on a phone the table scrolls sideways, and a row of
   ticks with no label next to it means nothing. */
@media (max-width: 767px) {
  .comp-table .td-feature, .comp-table th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--border); }
  .comp-table th:first-child { background: var(--tint); }
  .comp-table .td-feature { min-width: 170px; }
}
.c-yes { color: var(--coral-d); font-size: 17px; font-weight: 700; }
.c-no  { color: #CFC8BF; font-size: 17px; }
.c-partial { font-size: 12px; color: var(--ink-quiet); font-weight: 500; }
.comp-hint { font-size: .8rem; color: var(--ink-quiet); text-align: center; margin-top: .8rem; }


/* ── 7. FAQ ── native <details>: keyboard and screen-reader accessible with
   no script (the shared .pub-faq-* accordion is a clickable <div>). */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
@media (max-width: 991px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } }
.faq-side { position: sticky; top: 96px; }
@media (max-width: 991px) { .faq-side { position: static; } }
.faq-side .lp-title { text-align: left; }
.faq-side p { font-size: .95rem; color: var(--muted); line-height: 1.65; margin: 14px 0 0; }
.faq-list { display: grid; gap: 8px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s; }
.faq-item[open] { border-color: #D8CFC5; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 22px; font-size: 15px; font-weight: 600; color: var(--warm); line-height: 1.45; border-radius: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: #F8F6F2; }
.faq-ic { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #F0ECE7; flex-shrink: 0; transition: background .15s; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.6px; border-radius: 2px; background: var(--muted); transform: translate(-50%, -50%); transition: transform .2s, background .15s; }
.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-ic { background: var(--coral-l); }
.faq-item[open] .faq-ic::before, .faq-item[open] .faq-ic::after { background: var(--coral-d); }
.faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 22px 20px; font-size: 14.5px; color: var(--muted); line-height: 1.75; margin: 0; }

/* ── 8. FINAL CTA ── */
.cta-section { background: var(--warm); position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; width: 700px; height: 450px; background: radial-gradient(ellipse, rgba(217,117,87,0.2) 0%, transparent 65%); top: -80px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.cta-section h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #F5F0EC; line-height: 1.12; letter-spacing: -.025em; position: relative; text-wrap: balance; }
.cta-section .cta-sub { color: #B5ADA7; font-size: 1.05rem; position: relative; max-width: 540px; margin: 0 auto; line-height: 1.6; }
.cta-section .hero-url-form { position: relative; }
.cta-section .hero-url-bar { border-color: #3A3431; }
.cta-section .hero-url-bar:hover { border-color: #4A4340; }
.cta-alt { position: relative; font-size: .88rem; color: #9A928C; }
.cta-alt a { color: #EFA58D; font-weight: 600; text-decoration: none; }
.cta-alt a:hover { color: #F5BCA9; text-decoration: underline; text-underline-offset: 3px; }