/* Defter Pro — mobile app design criteria applied to the promo site.
   Source of truth: src/theme/tokens.ts (radius, spacing, typography, controls),
   src/theme/elevation.ts (card shadow), src/shared/ui (buttons, cards, badges,
   segmented tabs, hero gradient). Loaded after site.css; only changes look and
   feel (radius, type scale, shadow, colour roles). Grid and section placement
   stay as they are in site.css. */

:root{
  /* radius (tokens.ts > radius) */
  --r-card:24px;
  --r-record:19px;
  --r-button:16px;
  --r-input:14px;
  --r-icon:14px;
  --r-chip:13px;
  --r-badge:8px;
  --r-sheet:30px;
  /* spacing (tokens.ts > spacing) */
  --space-card:20px;
  --space-gap:12px;
  /* control metrics (tokens.ts > controlMetrics) */
  --btn-h:48px;
  --btn-h-sm:38px;
  /* elevation (elevation.ts > cardElevation) */
  --shadow-card:0 5px 19px rgba(24,41,25,.03);
  --shadow-float:0 8px 25px rgba(23,34,24,.08);
  /* type scale ratios (tokens.ts > typography, letter-spacing / size) */
  --track-xl:-.038em;
  --track-lg:-.035em;
  --track-md:-.025em;
}
:root[data-mode="dark"]{--shadow-card:none;--shadow-float:0 8px 25px rgba(0,0,0,.35)}

/* ---- Typography ---- */
body{font-size:14px;line-height:1.6}
h1,h2,h3,h4,.mh3,.mh4{font-weight:600}
.hero h1{letter-spacing:var(--track-xl)}
.page-hero h1,.hero h1{letter-spacing:var(--track-xl)}
.section-heading h2,.page-hero.with-visual h1{letter-spacing:var(--track-lg)}
.section-heading h2{font-size:clamp(26px,3vw,34px)}
.price-card h3,.legal-doc h2,.section h3,.feature-detail-copy h3,
.price-card .mh3,.section .mh3,.feature-detail-copy .mh3{letter-spacing:var(--track-md)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.3px;line-height:1.5;color:var(--muted)}
.hero>.hero-copy>.eyebrow,.section-heading .eyebrow,.hero h1>.eyebrow{font-size:11px;letter-spacing:.3px;max-width:none}
.section-heading>p:last-child,.hero-description,.page-hero>div>p:last-child{font-size:14px;line-height:1.7}
.hero-micro{font-size:11px}

/* ---- Buttons (AppButton: 48 high, radius 16, 14 / 500) ---- */
.btn{min-height:var(--btn-h);padding:0 20px;border-radius:var(--r-button);font-size:14px;font-weight:500;gap:8px}
.btn .icon{width:18px;height:18px}
.btn:hover{transform:none}
.btn-primary{box-shadow:var(--shadow-card)}
.btn-secondary{border-width:1.5px;border-color:var(--line);background:var(--surface)}
.hero-ctas>.btn,.price-card>.btn,.page-hero .btn{min-height:var(--btn-h);font-size:14px;padding:0 20px;border-radius:var(--r-button)}
.nav-actions>.btn{min-height:var(--btn-h-sm);font-size:12.5px;padding:0 16px;border-radius:var(--r-button)}

/* ---- Cards (Card: radius 24, soft shadow, no hard border) ---- */
.price-card,.legal-doc{border:0;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:var(--space-card)}
.price-card{padding:24px}
.price-card.pro-card{
  background:linear-gradient(145deg,var(--hero),var(--heroEnd,var(--accent)));
  color:var(--heroInk,var(--ink));
}
.pro-card .plan-kicker,.pro-card .plan-description,.pro-card li,.pro-card .price-display span,.pro-card .pricing-note{color:var(--heroSub,var(--muted))}
.pro-card li>.icon{color:var(--heroInk,var(--ink))}
.pro-card h3,.pro-card .price-display strong,
.pro-card .mh3{color:var(--heroInk,var(--ink))}
.pro-card .btn-primary{background:var(--ink);color:var(--bg)}
.pro-card .pro-coming{background:var(--surface);color:var(--ink)}

/* ---- Segmented control (SegmentedTabs: muted track, accent active pill) ---- */
.billing-switch{background:var(--surface2);border:0;border-radius:var(--r-button);padding:4px;gap:2px;box-shadow:none}
.billing-switch button{min-height:36px;border-radius:12px;color:var(--muted);font-weight:500}
.billing-switch button[aria-pressed=true]{background:var(--accent);color:var(--onAccent)}
.billing-switch button>span{background:var(--surface);color:var(--ink)}
.billing-switch button[aria-pressed=true]>span{background:var(--surface)}
.pro-card .billing-switch{margin:4px 0 18px}

/* ---- Badges (StatusBadge: radius 8, 10 / 500) ---- */
.pro-coming{font-size:10px;font-weight:500;padding:4px 8px;border-radius:var(--r-badge)}
.billing-switch button>span{border-radius:var(--r-badge)}

/* ---- Chips and icon tiles ---- */
.legal-toc a{border:0;border-radius:var(--r-chip);box-shadow:var(--shadow-card);font-weight:500}
.feature-icon{border-radius:var(--r-icon)}
.login-link{border-radius:var(--r-button);font-weight:500}
.locale-control select{border-radius:var(--r-input)}
.icon-button{border-radius:var(--r-button)}

/* ---- Lists, tables, FAQ ---- */
.comparison-table th,.comparison-table td{padding:16px 20px}
.comparison-table thead{background:var(--surface2)}
.faq-list summary>span{border-radius:var(--r-icon)}

/* ---- Navigation drawer (AppShell side panel) ---- */
.drawer-link{border-radius:var(--r-record)}
.drawer-icon{border-radius:var(--r-icon)}
.drawer-lang{border-radius:var(--r-chip)}

/* ---- Footer ---- */
.site-footer{border-top:0;background:var(--surface);border-radius:var(--r-card) var(--r-card) 0 0}
.footer-bottom{font-size:12px}

/* ---- Mobile: tighter gutters and sizes, same layout ---- */
@media(max-width:699px){
  .price-card{padding:20px}
  .section-heading h2{font-size:26px}
  .btn{padding:0 18px}
}

/* =====================================================================
   App shell v2 — mirrors the mobile app: fixed top bar, record-style
   menu, bottom sheet for languages, floating colour button.
   ===================================================================== */
:root{
  --hdr:64px;
  --onAccent:#172019;
  --heroEnd:#F7D184;
  --heroInk:#172019;
  --heroSub:#45392D;
  --scrim:rgba(17,28,29,.40);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
@media(min-width:992px){:root{--hdr:76px}}
body{padding-top:var(--hdr)}
body.dp-lock{overflow:hidden}
.dp-desk{display:inline-flex}
.dp-mob{display:none}
@media(max-width:991px){
  .dp-desk{display:none!important}
  .dp-mob{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---- Fixed top bar (AppBar: 64 high on phones) ---- */
.site-header.dp-top{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--hdr);padding:0;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--hairline)}
.dp-top-in{height:100%;width:min(1272px,calc(100% - 32px));margin:0 auto;display:flex;align-items:center;gap:12px}
@media(min-width:992px){.dp-top-in{width:min(1272px,calc(100% - 64px));gap:28px}}
.dp-logo{display:block;flex-shrink:0;line-height:0}
.dp-logo .brand-logo{width:120px;height:auto;display:block}
@media(min-width:992px){.dp-logo .brand-logo{width:150px}}
.dp-nav{align-items:center;gap:24px;margin-left:auto}
.dp-nav-link{position:relative;font-size:13px;font-weight:500;color:var(--muted);padding:6px 0;text-decoration:none}
.dp-nav-link:hover{color:var(--ink)}
.dp-nav-link.is-active{color:var(--ink)}
.dp-nav-link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--accent)}
.dp-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.dp-login{font-size:13px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:16px;background:var(--tint);text-decoration:none;white-space:nowrap}
.dp-cta{min-height:42px;padding:0 18px;font-size:13px;border-radius:16px}
.dp-pill{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 13px;border-radius:16px;border:0;background:var(--surface);color:var(--ink);font:500 12px/1 var(--font);cursor:pointer;box-shadow:var(--shadow-card)}
.dp-pill .icon{width:16px;height:16px}
.dp-caret{width:12px!important;height:12px!important;transition:transform .2s var(--ease-out)}
.dp-lang-btn[aria-expanded=true] .dp-caret,.dp-pill[aria-expanded=true] .dp-caret{transform:rotate(180deg)}
.dp-round{width:42px;height:42px;border-radius:16px;border:0;background:var(--surface);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-card);flex-shrink:0}
.dp-round .icon{width:20px;height:20px}
.dp-round .ic-rot45{transform:rotate(45deg)}

/* ---- Desktop language popover ---- */
.dp-lang{position:relative}
.dp-lang-menu{position:absolute;right:0;top:calc(100% + 10px);width:232px;padding:6px;border-radius:19px;background:var(--surface);box-shadow:var(--shadow-float);display:grid;gap:2px;transform-origin:top right;animation:dpPop .2s var(--ease-out)}
.dp-lang-menu[hidden]{display:none}
@keyframes dpPop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.dp-lang-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:var(--ink);font-size:13px;font-weight:500;text-decoration:none}
.dp-lang-opt:hover{background:var(--surface2)}
.dp-lang-opt.is-active{background:var(--tint)}
.dp-check{margin-left:auto;width:18px!important;height:18px!important;color:var(--ink)}
.dp-flag-tile{width:32px;height:32px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.dp-flag-sm{width:26px;height:26px;border-radius:9px;font-size:14px}

/* ---- Mobile language bottom sheet ---- */
.dp-scrim{position:fixed;inset:0;z-index:58;background:var(--scrim);animation:dpFade .25s var(--ease-out)}
.dp-scrim[hidden]{display:none}
@keyframes dpFade{from{opacity:0}to{opacity:1}}
.dp-sheet{display:none}
@media(max-width:991px){
  .dp-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:78vh;overflow-y:auto;padding:10px 18px calc(20px + env(safe-area-inset-bottom));background:var(--bg);border-radius:30px 30px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.14);transform:translateY(104%);visibility:hidden;transition:transform .34s var(--ease-out),visibility .34s}
  .dp-sheet.is-open{transform:none;visibility:visible}
}
.dp-grabber{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.dp-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dp-sheet-head h2{font-size:18px;font-weight:600;letter-spacing:-.025em}
.dp-sheet-list{display:grid;gap:8px}
.dp-sheet-item{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px 10px 10px;border-radius:19px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;box-shadow:var(--shadow-card)}
.dp-sheet-item.is-active{background:var(--tint)}
.dp-sheet-name{flex:1}

/* ---- Mobile menu (record rows, app side panel) ---- */
.dp-menu{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(340px,88vw);display:flex;flex-direction:column;gap:14px;padding:16px 16px calc(20px + env(safe-area-inset-bottom));background:var(--bg);border-radius:30px 0 0 30px;box-shadow:-14px 0 44px rgba(0,0,0,.14);overflow-y:auto;transform:translateX(106%);visibility:hidden;transition:transform .34s var(--ease-out),visibility .34s}
.dp-menu.is-open{transform:none;visibility:visible}
.dp-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 2px}
.dp-menu-head .dp-logo .brand-logo{width:132px}
.dp-eyebrow{margin:10px 6px 0;font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.dp-menu-list{display:grid;gap:8px}
.dp-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px 10px 10px;border-radius:19px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;box-shadow:var(--shadow-card)}
.dp-row.is-active{background:var(--tint)}
.dp-row-label{flex:1}
.dp-tile{width:40px;height:40px;border-radius:14px;background:var(--surface2);display:grid;place-items:center;flex-shrink:0}
.dp-tile .icon{width:19px;height:19px}
.dp-row.is-active .dp-tile{background:var(--surface)}
.dp-chev{width:16px!important;height:16px!important;color:var(--muted)}
.dp-menu-foot{margin-top:auto;display:grid;gap:10px;padding-top:8px}
.dp-row-ghost{background:transparent;box-shadow:none;border:1.5px solid var(--line)}
.dp-menu-cta{width:100%;justify-content:center;min-height:52px;border-radius:19px}
.dp-fine{font-size:11px;color:var(--muted);text-align:center;margin-top:4px}

/* ---- Header colour and appearance popover (left of the language switch) ---- */
.dp-theme{position:relative}
.dp-theme-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:50;width:272px;padding:16px;border-radius:19px;background:var(--surface);box-shadow:var(--shadow-float);transform-origin:top right;animation:dpPop .2s var(--ease-out)}
.dp-theme-menu[hidden]{display:none}
@media(max-width:991px){.dp-theme{display:none}}
.dp-menu-theme{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)}
.dp-swatch-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:6px 18px;margin:0 -18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);-webkit-overflow-scrolling:touch}
.dp-swatch-row::-webkit-scrollbar{display:none}
.dp-swatch-row .dp-swatch{flex:0 0 44px;width:44px;height:44px;scroll-snap-align:center}
.dp-menu-theme .dp-seg{margin-top:0}
@media(max-width:991px){.dp-menu{overflow-y:auto}}
@media(max-width:991px){.dp-theme-menu{position:fixed;left:16px;right:16px;top:calc(var(--hdr) + 8px);width:auto}}
@media(max-width:699px){.dp-top-in{gap:8px}.dp-top .dp-theme-btn,.dp-top .dp-round{width:36px;height:36px;border-radius:13px}.dp-top .dp-pill{height:36px;padding:0 10px;border-radius:13px}}
.dp-tune-title{font-size:11px;font-weight:500;letter-spacing:.3px;color:var(--muted);text-transform:uppercase;margin:0 0 8px}
.dp-tune-current{font-size:15px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.dp-swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:10px 8px;margin-bottom:16px}
.dp-swatch{width:100%;aspect-ratio:1;border-radius:50%;border:0;padding:3px;background:transparent;cursor:pointer}
.dp-swatch span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.dp-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.dp-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:16px;background:var(--surface2)}
.dp-seg button{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:500 12px/1 var(--font);cursor:pointer}
.dp-seg button .icon{width:16px;height:16px}
.dp-seg button[aria-pressed=true]{background:var(--accent);color:var(--onAccent)}

/* ---- Footer and page surfaces in app tones ---- */
.site-footer{background:var(--surface);border-top:0;border-radius:var(--r-card) var(--r-card) 0 0;margin-top:24px}
.footer-bottom{padding-bottom:0}

/* ---- Footer base (the single footer; Minimal layout is refined below) ---- */
.dp-foot{width:var(--page-w);margin:48px auto 28px;padding:0;border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card);color:var(--ink)}
.dp-foot-in{padding:24px 20px 20px}
@media(min-width:992px){.dp-foot-in{padding:40px 44px 28px}}
.dp-foot-top{display:flex;flex-direction:column;gap:20px}
@media(min-width:992px){.dp-foot-top{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px}}
.dp-foot-brand{max-width:440px}
.dp-foot-brand .dp-logo .brand-logo{width:150px}
.dp-foot-brand>p{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.dp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dp-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;border-radius:13px;background:var(--surface2);font-size:12px;font-weight:500;color:var(--ink)}
.dp-chip .icon{width:16px;height:16px}
.dp-foot-cta{min-height:50px;padding:0 22px;border-radius:16px;font-size:14px;align-self:flex-start;flex-shrink:0}
@media(min-width:992px){.dp-foot-cta{align-self:auto}}
.dp-foot-cta .icon{width:18px;height:18px}
.dp-foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;margin-top:32px;padding-top:28px;border-top:1px solid var(--hairline)}
@media(min-width:992px){.dp-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;max-width:720px;margin-left:auto}}
.dp-foot-col h3,
.dp-foot-col .mh3{margin:0 0 12px;font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.dp-foot-col a{display:block;padding:7px 0;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.dp-foot-bottom{display:flex;flex-direction:column;gap:14px;margin-top:32px;padding-top:20px;border-top:1px solid var(--hairline)}
@media(min-width:992px){.dp-foot-bottom{flex-direction:row;align-items:center;justify-content:space-between}}
.dp-foot-bottom>p{margin:0;font-size:12px;color:var(--muted)}
.dp-lang-row{display:flex;flex-wrap:wrap;gap:6px}
.dp-lang-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:12px;background:var(--surface2);color:var(--ink);font-size:12px;font-weight:500;text-decoration:none}
.dp-lang-chip span{font-size:14px;line-height:1}
.dp-lang-chip.is-active{background:var(--ink);color:var(--bg)}

/* Variant B — minimal: brand + CTA on one row, links inline, no card */
.dp-foot{background:var(--surface);box-shadow:var(--shadow-card)}
.dp-foot .dp-foot-in{padding:20px}
@media(min-width:992px){.dp-foot .dp-foot-in{padding:26px 36px}}
.dp-foot .dp-foot-top{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.dp-foot .dp-foot-brand{max-width:none}
.dp-foot .dp-foot-brand>p,.dp-foot .dp-chips{display:none}
.dp-foot .dp-foot-brand .dp-logo .brand-logo{width:124px}
.dp-foot .dp-foot-cta{min-height:44px;padding:0 16px;font-size:13px;border-radius:14px}
.dp-foot .dp-foot-cols{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0 0;padding-top:16px;max-width:none;margin-left:0}
.dp-foot .dp-foot-col{display:contents}
.dp-foot .dp-foot-col h3,
.dp-foot .dp-foot-col .mh3{display:none}
.dp-foot .dp-foot-col a{display:inline-block;padding:4px 0;font-size:13px}
.dp-foot .dp-foot-bottom{margin-top:14px;padding-top:14px}

/* Variant B — larger brand logo, same colours as the header logo */
.dp-foot .dp-foot-brand .dp-logo .brand-logo{width:170px}
@media(min-width:992px){.dp-foot .dp-foot-brand .dp-logo .brand-logo{width:210px}}

/* ---- Header v3: bigger logo, mobile-only controls hidden on desktop, dark login ---- */
.dp-logo .brand-logo{width:160px}
@media(min-width:992px){.dp-logo .brand-logo{width:200px}}
@media(min-width:992px){.dp-mob{display:none!important}}
@media(max-width:991px){.dp-desk{display:none!important}}
.dp-login{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--accent) 45%,var(--ink));color:var(--bg);font-weight:500}
.dp-login .icon{width:16px;height:16px}
.dp-login:hover{filter:brightness(1.08)}

/* Headline accent words */
.gradient-text{background:linear-gradient(105deg,var(--theme-strong) 8%,var(--theme-soft) 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Primary buttons take the theme colour; dark mode uses the bright accent with dark text */
.btn-primary{background:var(--theme-strong);color:var(--bg)}
.pro-card .btn-primary{background:var(--theme-strong);color:var(--bg)}
:root[data-mode="dark"] .btn-primary,:root[data-mode="dark"] .pro-card .btn-primary{background:var(--accent);color:var(--on-accent)}

/* Header login: deep theme tone */
.dp-login{background:var(--theme-strong);color:var(--bg)}
:root[data-mode="dark"] .dp-login{color:var(--on-accent)}

/* ---- Theme colour v5: use the palette's own tokens (themes.css) only ----
   headline  -> --headline-accent / --headline-end (designer's headline tones)
   primary   -> --accent with --on-accent text (the theme colour itself)
   login     -> --peach-ink (the palette's dark tone), --bg text
   Derived shades from v4 are no longer used. */
.gradient-text{background:linear-gradient(105deg,var(--headline-accent) 8%,var(--headline-end) 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn-primary,.pro-card .btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover,.pro-card .btn-primary:hover{filter:brightness(.97)}
.dp-login{background:var(--peach-ink);color:var(--bg)}
:root[data-mode="dark"] .btn-primary,:root[data-mode="dark"] .pro-card .btn-primary{background:var(--accent);color:var(--on-accent)}
:root[data-mode="dark"] .dp-login{background:var(--peach-ink);color:var(--bg)}

/* ---- One content width for header, page content and footer ---- */
:root{--page-w:min(1272px,calc(100% - 32px))}
@media(min-width:992px){:root{--page-w:min(1272px,calc(100% - 64px))}}
.container{width:var(--page-w);max-width:none}
.dp-top-in,.dp-foot,.dp-variant-bar{width:var(--page-w)}
.page-hero,.pricing-section,.full-pricing{max-width:none}

/* Footer language chips: one row on phones (flags only; codes shown from tablet up) */
@media(max-width:991px){
  .dp-lang-row{flex-wrap:nowrap;justify-content:space-between;gap:4px}
  .dp-lang-chip{flex:1 1 0;min-width:0;height:36px;padding:0;justify-content:center}
  .dp-lang-chip .dp-lang-code{display:none}
}

/* Closed off-canvas menu sits off-screen; clip it so it never widens the page */
html{overflow-x:clip}
@media(max-width:991px){.product-showcase{overflow-x:clip}}

/* Minimal footer on phones: centred stack, bigger logo, no CTA button, links listed vertically */
@media(max-width:991px){
  .dp-foot .dp-foot-in{padding:28px 20px 22px;text-align:center}
  .dp-foot .dp-foot-top{flex-direction:column;align-items:center;gap:0}
  .dp-foot .dp-foot-brand{display:flex;justify-content:center;width:100%}
  .dp-foot .dp-foot-brand .dp-logo .brand-logo{width:210px}
  .dp-foot .dp-foot-cta{display:none}
  .dp-foot .dp-foot-cols{display:flex;flex-direction:column;align-items:center;gap:2px;margin:20px 0 0;padding-top:18px}
  .dp-foot .dp-foot-col a{padding:8px 0;font-size:15px}
  .dp-foot .dp-foot-bottom{align-items:center;justify-content:center;margin-top:18px;padding-top:18px}
  .dp-foot .dp-foot-bottom>p{text-align:center}
}
@media(max-width:991px){
  .dp-foot .dp-lang-row{justify-content:center;flex-wrap:nowrap;gap:6px}
  .dp-foot .dp-lang-chip{flex:0 0 auto;width:44px;height:36px;min-width:0;padding:0}
}


/* ---- Final buttons (Siyah): ink primary, tinted login ---- */
.btn-primary,.pro-card .btn-primary,.dp-foot-cta,.dp-menu-cta{background:var(--ink);color:var(--bg)}
.dp-login{background:var(--tint);color:var(--ink)}

/* ---- Closing call-to-action card (replaces the dark logo panel; no footer duplication) ---- */
.dp-closing{padding-top:40px;padding-bottom:0}
.dp-cta-card{display:flex;align-items:center;gap:24px;padding:28px 32px;border-radius:var(--r-card);background:var(--tint)}
.dp-cta-tile{width:56px;height:56px;border-radius:18px;background:var(--surface);display:grid;place-items:center;flex-shrink:0}
.dp-cta-tile .icon{width:26px;height:26px}
.dp-cta-text{flex:1;min-width:0}
.dp-cta-text h2{margin:0 0 6px;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.25}
.dp-cta-text p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:560px}
.dp-cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.dp-cta-actions .btn{min-height:46px;font-size:13px;padding:0 18px;border-radius:14px}
.dp-cta-actions .btn .icon{width:16px;height:16px}
@media(max-width:991px){
  .dp-cta-card{flex-direction:column;align-items:flex-start;padding:22px}
  .dp-cta-actions{width:100%}
  .dp-cta-actions .btn{flex:1 1 0;justify-content:center}
}

/* ---- Store links in the closing card ---- */
.dp-stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dp-store{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:14px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;box-shadow:var(--shadow-card)}
.dp-store .icon{width:16px;height:16px}
.dp-store-soon{color:var(--muted);background:transparent;box-shadow:none;border:1.5px dashed var(--line)}
.dp-store[hidden]{display:none!important}

/* ---- Free plan: single-segment switch above the price, same look as the Pro toggle ---- */
.price-card:not(.pro-card) .billing-switch{margin:4px 0 18px;justify-content:flex-start;width:max-content}
.free-switch button{cursor:default}

/* ---- Desktop header: page icons beside the menu labels ---- */
.dp-nav-link{display:inline-flex;align-items:center;gap:7px}
.dp-nav-link .icon{width:16px;height:16px;flex-shrink:0;color:var(--muted)}
.dp-nav-link:hover .icon,.dp-nav-link.is-active .icon{color:var(--ink)}

/* ---- Comparison table icons ---- */
.comparison-table .cmp{flex-shrink:0;vertical-align:-3px}
.comparison-table .cmp-label{width:17px;height:17px;margin-right:10px;color:var(--muted)}
.comparison-table .cmp-head{width:16px;height:16px;margin-right:7px;color:var(--ink)}
.comparison-table .cmp-cell{width:15px;height:15px;margin-right:7px;color:var(--ink)}
.comparison-table td{vertical-align:middle}
.comparison-table th[scope=row]{font-weight:500}

/* ---- Comparison table on phones: sticky first column, sliding plan columns, Free / Pro toggle ---- */
.cmp-toggle{display:none}
@media(max-width:699px){
  .cmp-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:var(--surface2);margin:0 0 14px}
  .cmp-toggle button{height:40px;border:0;border-radius:12px;background:transparent;color:var(--muted);font:500 14px/1 var(--font);cursor:pointer}
  .cmp-toggle button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
  .cmp-scroll{position:relative;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cmp-scroll::-webkit-scrollbar{display:none}
  .cmp-scroll .comparison-table{min-width:560px}
  .cmp-scroll .comparison-table th:first-child,.cmp-scroll .comparison-table td:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
  .cmp-scroll .comparison-table thead th:first-child{background:var(--surface2)}
  .cmp-scroll .comparison-table th[scope=col]:not(:first-child){scroll-snap-align:start}
}

/* ---- Comparison table on phones: every label and value stays on one line ---- */
@media(max-width:699px){
  .cmp-scroll .comparison-table{width:max-content;min-width:100%}
  .cmp-scroll .comparison-table th,.cmp-scroll .comparison-table td{white-space:nowrap;font-size:11px;line-height:1.4;padding:12px 10px}
  .cmp-scroll .comparison-table th:first-child,.cmp-scroll .comparison-table td:first-child{padding-left:12px}
  .cmp-scroll .comparison-table thead th{font-size:12px;font-weight:500}
  .cmp-scroll .comparison-table .cmp{width:14px!important;height:14px!important;margin-right:6px!important;vertical-align:-2px}
  .cmp-toggle button{white-space:nowrap}
}

/* ---- Free / Pro toggle icons (phones) ---- */
.cmp-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.cmp-toggle .cmp-tog{width:16px;height:16px;flex-shrink:0}

/* ---- Comparison table on phones: one plan column at a time, no horizontal scrolling ---- */
@media(max-width:699px){
  .cmp-scroll{overflow:hidden}
  .cmp-scroll .comparison-table{width:100%;min-width:0;table-layout:auto}
  .cmp-scroll .comparison-table th:first-child,.cmp-scroll .comparison-table td:first-child{width:1%;white-space:nowrap}
  .cmp-scroll .comparison-table th,.cmp-scroll .comparison-table td{padding:12px 8px}
  .cmp-scroll[data-plan=free] .comparison-table th:nth-child(3),.cmp-scroll[data-plan=free] .comparison-table td:nth-child(3){display:none}
  .cmp-scroll[data-plan=pro] .comparison-table th:nth-child(2),.cmp-scroll[data-plan=pro] .comparison-table td:nth-child(2){display:none}
}
@media(max-width:699px){
  .cmp-scroll .comparison-table th,.cmp-scroll .comparison-table td{font-size:10.5px;padding:12px 7px}
  .cmp-scroll .comparison-table th:first-child,.cmp-scroll .comparison-table td:first-child{padding-right:6px}
}
@media(max-width:699px){
  .cmp-scroll .comparison-table th:first-child,.cmp-scroll .comparison-table td:first-child{letter-spacing:-.25px;padding-left:10px}
}
@media(max-width:699px){
  .cmp-scroll .comparison-table th:first-child,.cmp-scroll .comparison-table td:first-child{font-size:10px}
}
@media(max-width:699px){
  .cmp-scroll .comparison-table th:not(:first-child),.cmp-scroll .comparison-table td:not(:first-child){padding-left:16px}
}

/* ---- Phones: header login icon, menu as a bottom sheet with navigation items only ---- */
.dp-login-ic{text-decoration:none}
.dp-login-ic .icon{width:20px;height:20px}
@media(max-width:991px){
  .dp-menu{top:auto;right:auto;left:0;bottom:0;width:100%;max-height:78vh;gap:0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.14);transform:translateY(104%)}
  .dp-menu.is-open{transform:none}
  .dp-menu .dp-grabber{margin-bottom:14px}
  .dp-menu .dp-menu-list{gap:8px}
}
@media(min-width:992px){.dp-menu{display:none}}

/* ---- Phones: the scrim behind the language and menu sheets is a shadow under the sheet only ---- */
@media(max-width:991px){
  .dp-scrim{background:linear-gradient(to top,rgba(17,28,29,.42) 0%,rgba(17,28,29,.24) 40%,rgba(17,28,29,0) 78%)}
}

/* ---- Phones: lock the page behind the language and menu sheets ---- */
@media(max-width:991px){
  body.dp-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
  .dp-scrim{touch-action:none}
  .dp-sheet,.dp-menu{overscroll-behavior:contain;touch-action:pan-y}
}

/* ---- Phones: centre all page content (header, menu and language sheet keep their layout) ---- */
@media(max-width:991px){
  main,footer{text-align:center}
  main li,footer li{justify-content:center}
  main .price-card li,main .feature-items h3,main .dp-cta-card,main .legal-doc,main .legal-doc p,main .legal-doc li,main .faq-list summary,main .feature-items .mh3{text-align:center}
  main .price-card li{justify-content:center}
  main .dp-cta-card{align-items:center}
  main .dp-cta-actions{justify-content:center}
  main .faq-list summary{justify-content:center}
  main .faq-list summary>span{margin:0 auto}
  main .feature-items h3,
  main .feature-items .mh3{justify-content:center}
  main .comparison-table th,main .comparison-table td{text-align:center}
  main .comparison-table th:first-child{text-align:center}
  main .legal-toc{justify-content:center}
  main .platform-symbol{margin-left:auto;margin-right:auto}
  footer .dp-foot-col a{text-align:center}
  footer .dp-foot-col h3,
  footer .dp-foot-col .mh3{text-align:center}
}

/* ---- Phones: centre the remaining items (price rows, switches, icon tiles, plan headers) ---- */
@media(max-width:991px){
  main .price-display{justify-content:center;text-align:center}
  main .billing-switch,main .free-switch,main .pro-card .billing-switch,main .price-card:not(.pro-card) .billing-switch{justify-content:center;margin-left:auto;margin-right:auto}
  main .plan-top{justify-content:center;flex-direction:column;align-items:center;gap:8px}
  main .feature-icon,main .platform-symbol,main .dp-cta-tile,main .icon-tile,main .step-num,main .experience-visual,main .task-priority{margin-left:auto;margin-right:auto}
  main .dp-stores,main .dp-chips{justify-content:center}
  main .dp-foot-cols{text-align:center}
  main .notes-list,main .check-list{text-align:center}
}
@media(max-width:991px){
  main a.text-link,main .feature-jump-nav,main .feature-jump-nav a{justify-content:center;text-align:center}
  main .feature-jump-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
}
@media(max-width:991px){
  main .detail-number{float:none;position:static;display:block;width:100%;text-align:center;margin:0 0 6px}
}

/* ---- Pricing: plan icons, Coming soon removed, theme-based Pro gradient, FAQ and table tweaks ---- */
.pro-coming{display:none}
.plan-icon{display:none}
.price-card.pro-card{background:linear-gradient(145deg,var(--hero),var(--hero-end));color:var(--hero-ink)}
.pro-card .plan-kicker,.pro-card .plan-description,.pro-card li,.pro-card .price-display span,.pro-card .pricing-note{color:var(--hero-sub)}
.pro-card h3,.pro-card .price-display strong,.pro-card li>.icon,
.pro-card .mh3{color:var(--hero-ink)}
.pu-slash{display:inline}
@media(max-width:991px){
  main .plan-kicker{display:none}
  main .plan-icon{display:flex;width:52px;height:52px;border-radius:18px;background:var(--surface2);align-items:center;justify-content:center;margin:0 auto 14px}
  main .pro-card .plan-icon{background:color-mix(in srgb,var(--surface) 70%,transparent)}
  main .plan-icon .icon{width:24px;height:24px}
  main .price-display{flex-direction:column;align-items:center;gap:4px}
  main .pu-slash{display:none}
  main .faq-list summary{justify-content:center;gap:10px}
  main .faq-list summary>span{margin:0}
  .cmp-scroll .comparison-table th:first-child::after{content:":";font-weight:700;margin-left:1px}
}

/* ---- Phones, other pages: step numbers, platform cards, FAQ rows match the centred layout ---- */
@media(max-width:991px){
  main article:has(> .step-num){display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
  main .step-num{display:inline-flex;margin:0 auto}
  main .platform-cards article{display:flex;flex-direction:column;align-items:center;text-align:center}
  main .platform-cards .platform-unavailable{display:inline-flex;align-items:center;justify-content:center}
  main .faq-list summary{display:block;text-align:center}
  main .faq-list summary>span{display:inline-flex;vertical-align:middle;margin:0 0 0 8px}
}

/* ---- Home showcase: desktop window faces right, phone faces left, slight overlap; screens fade; tilt follows scroll ---- */
html{overflow-x:clip}
.product-showcase{overflow:visible;--tilt:.5}
.product-showcase .showcase-glow{overflow:visible;inset:-80px -70px -60px}
.product-showcase .app-mock{transition:opacity .6s ease}
.product-showcase .app-mock.is-fading{opacity:0}
.product-showcase .desktop-window{border:7px solid #202321;border-radius:30px}
.product-showcase .showcase-glow{background:none}
.product-showcase .showcase-glow:before,.product-showcase .showcase-glow:after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(48px);will-change:transform,opacity}
.product-showcase .showcase-glow:before{width:58%;height:80%;left:0;top:4%;background:color-mix(in srgb,var(--accent) 80%,transparent);opacity:.7;transform:none;animation:showcase-blob-a 10s ease-in-out infinite alternate}
.product-showcase .showcase-glow:after{width:52%;height:70%;right:0;top:14%;background:color-mix(in srgb,var(--hero-end) 75%,transparent);opacity:.65;animation:showcase-blob-b 13s ease-in-out infinite alternate}
@keyframes showcase-blob-a{0%{transform:translate(-4%,-6%) scale(.92);opacity:.45}50%{transform:translate(22%,12%) scale(1.25);opacity:.9}100%{transform:translate(-10%,20%) scale(.98);opacity:.5}}
@keyframes showcase-blob-b{0%{transform:translate(6%,4%) scale(1);opacity:.4}50%{transform:translate(-22%,-8%) scale(1.3);opacity:.95}100%{transform:translate(4%,12%) scale(.94);opacity:.45}}
.product-showcase .showcase-light{position:absolute;left:10%;right:10%;bottom:-70px;height:150px;z-index:-1;pointer-events:none;opacity:1;filter:blur(28px);background:radial-gradient(45% 60% at 22% 50%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%),radial-gradient(40% 55% at 70% 45%,color-mix(in srgb,var(--hero-end) 50%,transparent),transparent 70%),radial-gradient(35% 50% at 50% 70%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%);animation:showcase-refract 6s ease-in-out infinite alternate}
@keyframes showcase-refract{0%{transform:translateX(-6%) skewX(-10deg) scale(1);filter:blur(28px) hue-rotate(0deg)}50%{transform:translateX(3%) skewX(6deg) scale(1.08);filter:blur(30px) hue-rotate(25deg)}100%{transform:translateX(7%) skewX(-4deg) scale(.96);filter:blur(28px) hue-rotate(-15deg)}}
@media(min-width:992px){
  .product-showcase .showcase-main{perspective:2400px;left:48px;width:min(800px,calc(100% - 228px))}
  .product-showcase .desktop-window{transform:rotateY(calc(5deg + (var(--tilt) - .5) * 4deg)) rotateX(2deg) rotateZ(-0.6deg);transition:transform .8s ease-out;transform-origin:50% 50%;box-shadow:0 40px 60px -30px color-mix(in srgb,var(--ink) 35%,transparent),0 12px 24px -12px color-mix(in srgb,var(--ink) 22%,transparent)}
  .product-showcase .showcase-phone{perspective:2200px;right:48px}
  .product-showcase .phone-device{transform:rotateY(calc(-8deg - (var(--tilt) - .5) * 4deg)) rotateX(2deg) rotateZ(-1deg) scale(.8);transition:transform .8s ease-out;transform-origin:top right;box-shadow:0 40px 50px -24px color-mix(in srgb,var(--ink) 40%,transparent),0 10px 20px -10px color-mix(in srgb,var(--ink) 25%,transparent)}
}
@media(max-width:991px){
  .product-showcase{height:auto;margin-top:48px;padding-bottom:40px}
  .product-showcase .showcase-main{display:none}
  .product-showcase .showcase-phone{position:relative;left:auto;right:auto;top:auto;width:auto;margin:0 auto;z-index:3;perspective:900px}
  .product-showcase .phone-device{position:relative;left:auto;right:auto;top:auto;transform:rotateY(calc(-6deg - (var(--tilt) - .5) * 3deg)) rotateX(2deg) rotateZ(-0.8deg);transition:transform .8s ease-out;transform-origin:top center;margin:0 auto;box-shadow:0 30px 40px -20px color-mix(in srgb,var(--ink) 40%,transparent)}
  .product-showcase .screen-note{display:none}
  .product-showcase .showcase-glow{inset:-30px -30px -20px}
  .product-showcase .showcase-light{left:0;right:0;bottom:-40px;height:110px}
}
@media(max-width:991px){main{overflow-x:clip}}
.dp-top .dp-login.dp-desk{min-height:42px;padding:0 18px;background:var(--ink);color:var(--bg);box-shadow:0 5px 15px #15201908}
.dp-top .dp-login.dp-desk:hover{filter:brightness(1.12)}
/* ---- Mobile: benefit icons sit above their headings ---- */
@media(max-width:699px){.benefit-grid article{display:flex;flex-direction:column;align-items:center;text-align:center}.benefit-grid article>.feature-icon{grid-row:auto;margin:0 0 16px}}
/* ---- Experience card: whole phone visible, one swatch row with edge fade, appearance control ---- */
.theme-swatches{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 4px;margin-left:-4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.theme-swatches::-webkit-scrollbar{display:none}
.theme-swatches .theme-swatch{flex:0 0 auto}
.experience-card>*{min-width:0}
.theme-swatches{max-width:100%}
.experience-appearance{margin-top:18px;max-width:300px}
.experience-visual{min-height:400px}
.experience-phone{top:0;transform:translateX(-50%) scale(.86);transform-origin:top center}
@media(max-width:699px){.experience-appearance{margin-inline:auto}.experience-visual{height:420px;min-height:420px}.experience-phone{top:0;transform:translateX(-50%) scale(.84)}.experience-card{padding:30px 24px 24px}}
/* ---- Home: agency reasons as a tinted panel with numbered rows; features as cards (rail on mobile) ---- */
.agency-panel{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;background:color-mix(in srgb,var(--accent) 18%,var(--surface));color:var(--ink);border-radius:30px;padding:56px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;isolation:isolate}
.agency-panel::before{content:'';position:absolute;right:-120px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%);filter:blur(30px);z-index:-1}
.agency-panel .eyebrow{color:color-mix(in srgb,var(--ink) 60%,transparent)}
.agency-panel h2{color:var(--ink);font-size:38px;letter-spacing:-1.6px;line-height:1.12}
.agency-panel-head p:not(.eyebrow){color:color-mix(in srgb,var(--ink) 70%,transparent);margin-top:18px;max-width:440px;font-size:13px;line-height:1.85}
.agency-reasons{list-style:none;margin:0;padding:0;display:grid}
.agency-reasons li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 0;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.agency-reasons li:first-child{border-top:0;padding-top:0}
.agency-tile{width:48px;height:48px;border-radius:16px;background:var(--accent);color:var(--onAccent);display:grid;place-items:center}
.agency-tile .icon{width:22px;height:22px}
.agency-num{display:block;font-size:10px;letter-spacing:1.5px;color:color-mix(in srgb,var(--ink) 55%,transparent);margin-bottom:6px}
.agency-reasons h3,
.agency-reasons .mh3{color:var(--ink);font-size:17px;letter-spacing:-.4px;margin-bottom:8px}
.agency-reasons p{color:color-mix(in srgb,var(--ink) 70%,transparent);font-size:12px;line-height:1.8}
.feature-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.feature-card{position:relative;overflow:hidden;isolation:isolate;min-height:330px;border-radius:26px;padding:28px 24px;background:var(--surface);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px;transition:transform .25s var(--ease-out)}
.feature-card:hover{transform:translateY(-5px)}
.feature-card::before{content:'';position:absolute;right:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 68%);opacity:.55;filter:blur(18px);z-index:-1}
.feature-card.tone-2::before{background:radial-gradient(circle,var(--hero-end) 0%,transparent 68%)}
.feature-card.tone-3::before{background:radial-gradient(circle,var(--accent) 0%,transparent 68%);opacity:.35}
.feature-card.tone-4::before{background:radial-gradient(circle,var(--hero-end) 0%,transparent 68%);opacity:.35}
.feature-card-no{position:absolute;top:22px;right:24px;font-size:30px;font-weight:600;letter-spacing:-1px;color:color-mix(in srgb,var(--ink) 12%,transparent)}
.feature-card-icon{width:58px;height:58px;border-radius:20px;background:var(--tint);color:var(--ink);display:grid;place-items:center;margin-bottom:22px}
.feature-card-icon .icon{width:26px;height:26px}
.feature-card h3,
.feature-card .mh3{font-size:19px;letter-spacing:-.6px;line-height:1.25}
.feature-card p{font-size:12px;line-height:1.85}
@media(max-width:991px){.agency-panel{grid-template-columns:1fr;gap:32px;padding:40px 32px}.feature-rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:699px){
  .agency-panel{padding:32px 22px;border-radius:24px}
  .agency-panel h2{font-size:28px;letter-spacing:-1px}
  .feature-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:6px 18px 18px;gap:14px;scrollbar-width:none}
  .feature-rail::-webkit-scrollbar{display:none}
  .feature-card{flex:0 0 78%;scroll-snap-align:center;min-height:300px}
}
/* ---- Feature visuals: the bottom reserve for the removed sample-data caption is gone ---- */
.feature-detail-visual{padding:12px}
@media(max-width:699px){.feature-detail-visual{padding:10px}}
/* ---- Feature pages (mobile): one toggle opens a bottom sheet with the feature list ---- */
.jump-toggle{display:none}
@media(max-width:699px){
  main .feature-jump-nav{display:none}
  .jump-wrap{margin-bottom:22px}
  .jump-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:0 18px;border:0;border-radius:19px;background:var(--accent);color:var(--onAccent);font:500 13px/1.3 var(--font);cursor:pointer}
  .jump-toggle .icon{width:18px;height:18px;transition:transform .25s var(--ease-out)}
  .jump-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}
  .dp-jump-sheet .dp-sheet-item .icon{width:20px;height:20px;padding:8px;box-sizing:content-box;border-radius:12px;background:var(--tint)}
  .dp-jump-sheet .dp-sheet-item{justify-content:flex-start;text-align:left}
  .dp-jump-sheet .dp-sheet-name{text-align:left}
  .feature-detail{scroll-margin-top:84px}
}
/* ---- Feature pages: complete feature grid below the detailed sections ---- */
.feature-more{padding-top:60px;padding-bottom:40px}
.feature-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.feature-more-item{scroll-margin-top:100px;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-card)}
.feature-more-item h3,
.feature-more-item .mh3{font-size:16px;letter-spacing:-.4px;line-height:1.3}
.feature-more-item p{font-size:12px;line-height:1.8}
@media(max-width:991px){.feature-more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:699px){.feature-more-grid{grid-template-columns:1fr}.feature-more-item{padding:20px}}
/* ---- Audience intro (agencies, freelancers): heading and text stay left-aligned beside each other on wider screens ---- */
@media(min-width:700px){main .audience-intro{max-width:none}main .audience-intro,main .audience-intro h2,main .audience-intro p{text-align:left}}

/* SEO pass: the eyebrow now sits inside the h1 */
h1>.eyebrow{display:block}
/* SEO pass: "who it's for" cards on the home page */
.audience-split{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px}
.audience-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:30px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-card)}
.audience-card h3{font-size:21px;letter-spacing:-.7px;line-height:1.25}
.audience-card>p{font-size:12px;line-height:1.85}
.tag-list{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tag-list li{font-size:11px;line-height:1.2;padding:8px 12px;border-radius:999px;background:var(--tint);color:var(--ink)}
.audience-card .text-link{margin-top:auto}
@media(max-width:699px){.audience-split{grid-template-columns:1fr;gap:14px}.audience-card{align-items:center;padding:24px}.tag-list{justify-content:center}}

/* Cookie consent banner (Google Analytics) */
.cookie-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:57;width:min(660px,calc(100% - 32px));display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:20px;background:var(--surface);border:1px solid var(--hairline);box-shadow:0 12px 40px rgba(24,41,25,.14);text-align:left}
.cookie-banner p{margin:0;flex:1;font-size:12px;line-height:1.65;color:var(--ink)}
.cookie-banner a,.cookie-prefs-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-banner .btn{min-height:38px;padding:0 16px;font-size:13px}
.cookie-prefs-link{background:none;border:0;padding:0;font:inherit;cursor:pointer}
@media(max-width:699px){.cookie-banner{flex-direction:column;text-align:center;bottom:12px;gap:12px;padding:16px}.cookie-actions{width:100%}.cookie-actions .btn{flex:1}}

/* Features page: the jump list is an auto-advancing carousel from 700px up (phones keep the sheet). */
@media(min-width:700px){
  main .feature-jump-nav.is-carousel{display:block;position:relative;max-width:none;overflow:hidden;padding:2px 0}
  .feature-jump-nav.is-carousel .fj-track{display:flex;gap:10px;transition:transform .7s cubic-bezier(.45,0,.2,1);will-change:transform}
  .feature-jump-nav.is-carousel .fj-track>a{flex:0 0 calc((100% - 30px) / 4);min-width:0;white-space:nowrap}
  .feature-jump-nav.is-carousel .fj-track>a>span{overflow:hidden;text-overflow:ellipsis}
  .feature-jump-nav.is-carousel .fj-controls{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .fj-controls button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--hairline);color:var(--ink);cursor:pointer}
  .fj-controls button:hover{border-color:var(--accent)}
  .fj-controls .icon{width:16px;height:16px}
  .fj-controls [data-fj-prev] .icon{transform:scaleX(-1)}
}
@media(min-width:700px) and (max-width:991px){.feature-jump-nav.is-carousel .fj-track>a{flex-basis:calc((100% - 20px) / 3)}}
@media(prefers-reduced-motion:reduce){.feature-jump-nav.is-carousel .fj-track{transition:none}}

/* SEO content: quote workflow, scope notes and compact plan summary. */
.seo-links{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:24px;align-items:center}
.seo-scope .feature-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.scope-note{margin-top:22px;max-width:80ch;font-size:12px;line-height:1.8}
.quote-steps{list-style:decimal;display:grid;gap:22px;padding-left:26px;margin:0;max-width:86ch}
.quote-steps li{padding-left:6px}
.quote-steps li::marker{font-weight:600;color:var(--ink)}
.quote-steps h3{font-size:20px;line-height:1.35;letter-spacing:-.6px;margin-bottom:8px}
.quote-steps p,.seo-example>p,.seo-explainer>p{font-size:14px;line-height:1.9}
.seo-guide,.seo-example,.seo-explainer,.seo-scope,.seo-plans{min-width:0;overflow-wrap:anywhere}
.seo-guide .section-heading,.seo-example .section-heading,.seo-explainer .section-heading,.seo-scope .section-heading,.seo-plans .section-heading{max-width:900px}
@media(min-width:700px){
 .seo-guide,.seo-example,.seo-explainer,.seo-scope,.seo-plans,.seo-guide .section-heading,.seo-example .section-heading,.seo-explainer .section-heading,.seo-scope .section-heading,.seo-plans .section-heading{text-align:left}
 .seo-guide .section-heading,.seo-example .section-heading,.seo-explainer .section-heading,.seo-scope .section-heading,.seo-plans .section-heading{margin-left:0}
}
@media(max-width:699px){
 .seo-links{justify-content:center}
 .seo-scope .feature-more-grid{grid-template-columns:minmax(0,1fr)}
 .seo-guide,.seo-example,.seo-explainer,.seo-scope,.seo-plans,.quote-steps li{text-align:center}
 .quote-steps{list-style:none;padding-left:0;counter-reset:quote-step}
 .quote-steps li{padding-left:0;counter-increment:quote-step}
 .quote-steps li::before{content:counter(quote-step,decimal-leading-zero);display:block;margin-bottom:10px;color:var(--muted);font-size:13px}
 .scope-note{margin-inline:auto}
}

.seo-quote-hero .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}

/* Keep all five navigation links and account actions inside narrow desktop viewports. */
@media(min-width:992px) and (max-width:1199px){
 .dp-top-in{gap:14px}
 .dp-logo .brand-logo{width:160px}
 .dp-nav{gap:12px}
 .dp-nav-link{font-size:12px;white-space:nowrap}
 .dp-top .dp-nav-link>.icon{display:none}
 main{overflow-x:clip}
}

/* Quote page: icon step panel, example quote card, comparison note. */
.quote-steps-section .agency-panel-head .btn{margin-top:26px}
.quote-steps-section .agency-reasons h3{color:var(--ink);font-size:17px;letter-spacing:-.4px;margin-bottom:8px}
.quote-example-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.quote-example-copy h2{font-size:36px;letter-spacing:var(--track-lg,-1.5px);line-height:1.15;margin-bottom:18px}
.quote-example-copy>p:not(.eyebrow){font-size:13px;line-height:1.9}
.quote-doc{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:24px;text-align:left}
.quote-doc-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--hairline)}
.quote-doc-icon{width:42px;height:42px;flex-shrink:0;border-radius:var(--r-icon);background:var(--tint);display:grid;place-items:center}
.quote-doc-icon .icon{width:20px;height:20px}
.quote-doc-head b{display:block;font-size:15px;font-weight:600}
.quote-doc-head small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.quote-doc-status{margin-left:auto;font-size:11px;font-weight:500;padding:6px 11px;border-radius:999px;background:var(--success-bg);color:var(--success);white-space:nowrap}
.quote-doc-lines{list-style:none;margin:0;padding:14px 0 18px;display:grid;gap:6px}
.quote-doc-lines li{display:flex;align-items:center;gap:12px;font-size:12.5px;padding:12px 14px;border-radius:12px;background:var(--bg)}
.quote-doc-lines li::before{content:'';width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--accent)}
.quote-doc-flow{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:relative}
.quote-doc-flow::before{content:'';position:absolute;top:33px;left:12.5%;right:12.5%;height:2px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.quote-doc-flow li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:10.5px;line-height:1.35;color:var(--ink);position:relative}
.quote-flow-dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 22%,var(--surface));border:3px solid var(--surface)}
.quote-flow-dot .icon{width:16px;height:16px}
.quote-checks .feature-more-item,.quote-compare .feature-more-item{padding:26px}
.quote-checks .feature-icon,.quote-compare .feature-icon,.seo-scope .feature-icon{margin-bottom:6px}
.quote-note{display:flex;align-items:flex-start;gap:16px;margin-top:16px;padding:20px 24px;border-radius:var(--r-card);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.quote-note>.icon{width:22px;height:22px;flex-shrink:0;margin-top:1px}
.quote-note p{margin:0;font-size:12.5px;line-height:1.8;color:var(--ink)}
@media(max-width:991px){.quote-example-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:699px){
  .quote-example-copy,.quote-example-copy h2{text-align:center}
  .quote-example-copy h2{font-size:28px;letter-spacing:-1.1px}
  .quote-doc{padding:18px}
  .quote-doc-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .quote-doc-flow::before{display:none}
  .quote-note{flex-direction:column;align-items:center;text-align:center;padding:20px}
  .quote-steps-section .agency-panel-head{text-align:center}
}
@media(min-width:700px){.seo-scope.quote-scope,.seo-scope.quote-scope .section-heading{text-align:center}.seo-scope.quote-scope .section-heading{margin-left:auto}}
.quote-scope .seo-links{justify-content:center}
@media(max-width:699px){
  main .quote-steps-section .agency-reasons li{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  main .quote-doc-lines li{justify-content:flex-start;text-align:left}
}