/* ClipTik - UI polish v2. Warm minimalism + spot illustrations.
 *
 * Plain CSS, no build step. Cream base + teal primary + coral/sun warmth.
 * Mobile-first; desktop is progressive enhancement.
 */

:root {
 color-scheme: light;

 /* surfaces */
 --bg: #f7f5ef;
 --bg-warm: #fdf2e7;
 --bg-cool: #ecf5f3;
 --surface: #ffffff;
 --surface-soft: #fbfaf5;

 /* ink */
 --ink: #14181c;
 --ink-soft: #2c333a;
 --muted: #5d6673;
 --muted-strong: #41474f;

 /* lines */
 --line: #d6d2c8;
 --line-soft: #e9e6dc;
 --line-warm: #f1d9c3;

 /* primary teal */
 --accent: #0f766e;
 --accent-strong: #0b4f4a;
 --accent-soft: #ddf2ec;
 --accent-glow: rgb(15 118 110 / 18%);

 /* warm coral - illustrations + secondary spots */
 --warm: #e26d4a;
 --warm-strong: #b9522f;
 --warm-soft: #fde3d6;

 /* sun yellow - highlights */
 --sun: #f5b945;
 --sun-soft: #fef0d0;

 /* status */
 --success-bg: #d8f4e6;
 --success-ink: #0b4f3a;
 --success-line: #9fdbbf;
 --warning-bg: #fff1cc;
 --warning-ink: #6f4a00;
 --warning-line: #ebcd7a;
 --error-bg: #ffe1e1;
 --error-ink: #7a1a1a;
 --error-line: #ebb5b5;
 --loading-bg: #eef2f5;
 --loading-ink: #2c333a;
 --loading-line: #cdd6dc;

 /* shapes */
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 18px;
 --radius-xl: 24px;
 --radius-pill: 999px;

 /* shadows */
 --shadow-xs: 0 1px 2px rgb(20 24 28 / 4%);
 --shadow-sm: 0 1px 3px rgb(20 24 28 / 5%), 0 1px 2px rgb(20 24 28 / 4%);
 --shadow-card: 0 1px 2px rgb(20 24 28 / 4%), 0 10px 30px rgb(20 24 28 / 6%);
 --shadow-card-hover: 0 2px 4px rgb(20 24 28 / 6%), 0 18px 40px rgb(20 24 28 / 9%);
 --shadow-cta: 0 1px 2px rgb(15 118 110 / 16%), 0 8px 22px rgb(15 118 110 / 28%);
 --shadow-cta-hover: 0 2px 6px rgb(15 118 110 / 20%), 0 14px 32px rgb(15 118 110 / 36%);

 /* motion */
 --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 --t-fast: 120ms;
 --t-base: 200ms;
 --t-slow: 360ms;

 --focus: #0f766e;

 font-family:
 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif,
 system-ui, "Helvetica Neue", Arial, sans-serif;
 font-feature-settings: "ss01", "cv01", "cv11";
}

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.001ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.001ms !important;
 scroll-behavior: auto !important;
 }
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

html,
body {
 margin: 0;
 padding: 0;
}

body {
 min-height: 100vh;
 color: var(--ink);
 background: var(--bg);
 -webkit-text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 overflow-x: hidden;
}

a {
 color: inherit;
 text-decoration: none;
}

.visually-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0 0 0 0);
 white-space: nowrap;
 border: 0;
}

/* ---------- skip link ---------- */

.skip-link {
 position: absolute;
 top: -60px;
 left: 12px;
 padding: 10px 14px;
 border-radius: var(--radius-sm);
 background: var(--ink);
 color: #fff;
 font-weight: 700;
 z-index: 100;
 transition: top var(--t-fast) ease;
}

.skip-link:focus {
 top: 12px;
 outline: 3px solid var(--focus);
 outline-offset: 2px;
}

/* ---------- focus visibility ---------- */

:focus-visible {
 outline: 3px solid var(--focus);
 outline-offset: 2px;
 border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
.download-cta:focus-visible {
 outline: 3px solid var(--focus);
 outline-offset: 2px;
}

/* ---------- app shell ---------- */

body.app-page {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

.site-header,
.site-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 width: min(720px, calc(100% - 32px));
 margin: 0 auto;
 padding: 22px 0 18px;
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: 9px;
 font-size: 1.08rem;
 font-weight: 800;
 letter-spacing: -0.015em;
 color: var(--ink);
 transition: transform var(--t-fast) var(--ease-out);
}

.brand:hover {
 transform: translateY(-1px);
}

.brand-mark {
 color: var(--accent);
 flex-shrink: 0;
 transition: transform var(--t-base) var(--ease-out);
}

.brand:hover .brand-mark {
 transform: rotate(-8deg);
}

nav {
 display: flex;
 flex-wrap: wrap;
 gap: 6px 16px;
 color: var(--muted);
 font-size: 0.94rem;
}

nav a {
 color: var(--muted);
 font-weight: 500;
 padding: 6px 2px;
 position: relative;
 transition: color var(--t-fast) ease;
}

nav a::after {
 content: "";
 position: absolute;
 left: 2px;
 right: 2px;
 bottom: 2px;
 height: 2px;
 background: currentColor;
 border-radius: 2px;
 transform: scaleX(0);
 transform-origin: left;
 transition: transform var(--t-base) var(--ease-out);
}

nav a:hover {
 color: var(--ink);
}

nav a:hover::after {
 transform: scaleX(1);
}

nav a[aria-current="page"] {
 color: var(--accent);
}

nav a[aria-current="page"]::after {
 transform: scaleX(1);
 background: var(--accent);
}

main {
 width: min(720px, calc(100% - 32px));
 margin: 0 auto;
}

.tool-main {
 flex: 1 0 auto;
 width: min(680px, calc(100% - 32px));
 margin: 0 auto;
 padding: 28px 0 32px;
}

/* ---------- hero section ---------- */

.tool-section {
 position: relative;
 padding-top: 20px;
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 5px 12px 5px 8px;
 background: var(--warm-soft);
 color: var(--warm-strong);
 border: 1px solid var(--line-warm);
 border-radius: var(--radius-pill);
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 margin-bottom: 16px;
}

.eyebrow-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--warm);
 animation: eyebrow-pulse 2.4s var(--ease-in-out) infinite;
}

@keyframes eyebrow-pulse {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.55; transform: scale(0.85); }
}

.hero-grid {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 24px;
 align-items: start;
}

.tool-section h1 {
 margin: 0;
 font-size: clamp(1.85rem, 5.5vw, 2.6rem);
 line-height: 1.08;
 letter-spacing: -0.025em;
 color: var(--ink);
 max-width: 16ch;
 text-wrap: balance;
}

.tool-section h1 .accent-word {
 position: relative;
 white-space: nowrap;
}

.tool-section h1 .accent-word::after {
 content: "";
 position: absolute;
 left: -2px;
 right: -2px;
 bottom: 4%;
 height: 28%;
 background: var(--sun-soft);
 z-index: -1;
 border-radius: 3px;
 transform: skew(-2deg);
}

.tool-lead {
 margin: 14px 0 28px;
 color: var(--muted-strong);
 font-size: 1.04rem;
 line-height: 1.55;
 max-width: 52ch;
}

.tool-subtitle {
 margin: 12px 0 0;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
 color: var(--accent-strong);
 font-size: 0.95rem;
 font-weight: 700;
 letter-spacing: 0.01em;
}

.tool-subtitle .dot {
 color: var(--warm);
 font-weight: 700;
 font-size: 1.15em;
 line-height: 1;
 opacity: 1;
}

.hero-art {
 width: 120px;
 height: 120px;
 flex-shrink: 0;
 filter: drop-shadow(0 6px 16px rgb(226 109 74 / 18%));
 animation: float 4.5s var(--ease-in-out) infinite;
}

@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-6px); }
}

/* ---------- form card ---------- */

.tool {
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 background: var(--surface);
 box-shadow: var(--shadow-card);
 padding: 24px 24px 22px;
 transition: box-shadow var(--t-base) var(--ease-out);
}

.tool:hover {
 box-shadow: var(--shadow-card-hover);
}

label {
 display: block;
 margin-bottom: 10px;
 font-weight: 700;
}

.input-row {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 10px;
}

.input-wrap {
 position: relative;
}

.input-icon {
 position: absolute;
 left: 14px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--muted);
 pointer-events: none;
 transition: color var(--t-fast) ease;
}

.input-wrap:focus-within .input-icon {
 color: var(--accent);
}

input[type="url"] {
 width: 100%;
 min-width: 0;
 min-height: 54px;
 padding: 0 14px 0 42px;
 border: 1.5px solid var(--line);
 border-radius: var(--radius-md);
 background: #fff;
 color: var(--ink);
 font: inherit;
 font-size: 1rem;
 transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

input[type="url"]::placeholder {
 color: #939aa3;
}

input[type="url"]:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 4px var(--accent-glow);
 outline: none;
}

/* ---------- buttons ---------- */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 54px;
 padding: 0 24px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--ink);
 font: inherit;
 font-size: 1rem;
 font-weight: 700;
 cursor: pointer;
 text-decoration: none;
 transition: background var(--t-fast) ease, color var(--t-fast) ease,
 transform 60ms ease, box-shadow var(--t-fast) ease;
}

.btn:active:not(:disabled):not([aria-disabled="true"]) {
 transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
 cursor: not-allowed;
}

.btn-primary {
 background: var(--accent);
 color: #fff;
 box-shadow: var(--shadow-cta);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]),
.btn-primary:focus-visible {
 background: var(--accent-strong);
 box-shadow: var(--shadow-cta-hover);
 transform: translateY(-1px);
}

.btn-primary:disabled {
 background: var(--muted);
 box-shadow: none;
 opacity: 0.85;
}

.btn-ghost {
 background: transparent;
 color: var(--muted-strong);
 border: 1.5px solid var(--line);
 min-height: 48px;
 padding: 0 18px;
}

.btn-ghost:hover {
 border-color: var(--ink);
 color: var(--ink);
 background: var(--surface-soft);
}

.btn-warm {
 background: var(--warm);
 color: #fff;
 box-shadow: 0 1px 2px rgb(226 109 74 / 16%), 0 8px 22px rgb(226 109 74 / 30%);
}

.btn-warm:hover:not(:disabled):not([aria-disabled="true"]) {
 background: var(--warm-strong);
 transform: translateY(-1px);
}

.btn-label {
 display: inline-flex;
}

.btn-spinner {
 display: none;
 width: 16px;
 height: 16px;
 border: 2.5px solid rgba(255, 255, 255, 0.55);
 border-top-color: #fff;
 border-radius: 50%;
 animation: btn-spin 700ms linear infinite;
}

.btn.btn--loading .btn-spinner {
 display: inline-block;
}

@keyframes btn-spin {
 to {
 transform: rotate(360deg);
 }
}

/* ---------- supported + hint ---------- */

.hint {
 margin: 14px 0 0;
 color: var(--muted-strong);
 font-size: 0.93rem;
 line-height: 1.55;
 display: flex;
 align-items: flex-start;
 gap: 8px;
}

.hint-icon {
 flex-shrink: 0;
 color: var(--accent);
 margin-top: 2px;
}

.supported {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px 12px;
 margin-top: 16px;
 font-size: 0.86rem;
 color: var(--muted-strong);
}

.supported-list {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin: 0;
 padding: 0;
 list-style: none;
}

.supported-list li {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 12px;
 border: 1px solid var(--accent-soft);
 border-radius: var(--radius-pill);
 background: var(--accent-soft);
 color: var(--accent-strong);
 font-weight: 700;
 font-size: 0.82rem;
}

.chip-dot {
 width: 6px;
 height: 6px;
 border-radius: var(--radius-pill);
 background: var(--accent);
 display: inline-block;
}

.supported-note {
 color: var(--muted);
 font-size: 0.82rem;
}

/* ---------- result panel ---------- */

.result {
 display: none;
 margin-top: 20px;
 padding: 18px 18px 16px;
 border: 1px solid transparent;
 border-radius: var(--radius-md);
 line-height: 1.55;
 animation: result-in var(--t-slow) var(--ease-out);
}

@keyframes result-in {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}

.result.loading,
.result.warning,
.result.error,
.result.success {
 display: block;
}

.result.loading {
 background: var(--loading-bg);
 color: var(--loading-ink);
 border-color: var(--loading-line);
}

.result.warning {
 background: var(--warning-bg);
 color: var(--warning-ink);
 border-color: var(--warning-line);
}

.result.error {
 background: var(--error-bg);
 color: var(--error-ink);
 border-color: var(--error-line);
}

.result.success {
 background: var(--success-bg);
 color: var(--success-ink);
 border-color: var(--success-line);
}

.result-header {
 display: flex;
 align-items: center;
 gap: 12px;
}

.result-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 border-radius: var(--radius-pill);
 background: rgba(255, 255, 255, 0.45);
 color: inherit;
 flex-shrink: 0;
}

.result.success .result-icon {
 background: rgb(11 79 58 / 14%);
 animation: success-pop var(--t-slow) var(--ease-out);
}

.result.warning .result-icon {
 background: rgb(111 74 0 / 14%);
}

.result.error .result-icon {
 background: rgb(122 26 26 / 14%);
}

.result.loading .result-icon {
 background: rgb(44 51 58 / 10%);
}

@keyframes success-pop {
 0% { transform: scale(0.6); opacity: 0; }
 60% { transform: scale(1.12); opacity: 1; }
 100% { transform: scale(1); }
}

.result-spinner {
 display: inline-block;
 width: 16px;
 height: 16px;
 border: 2.4px solid rgba(44, 51, 58, 0.25);
 border-top-color: var(--loading-ink);
 border-radius: 50%;
 animation: btn-spin 700ms linear infinite;
}

.result-title {
 font-size: 1.05rem;
 font-weight: 800;
 letter-spacing: -0.01em;
}

.result-message {
 margin: 10px 0 0;
 font-size: 0.95rem;
}

.result-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 18px;
}

.download-cta {
 flex: 1 1 auto;
 min-width: 200px;
}

.download-cta--used {
 background: var(--muted);
 box-shadow: none;
 pointer-events: none;
 opacity: 0.7;
}

.expiry-note {
 margin: 12px 0 0;
 font-size: 0.86rem;
 color: var(--muted-strong);
 opacity: 0.9;
 display: flex;
 align-items: center;
 gap: 6px;
}

.download-followup {
 margin-top: 6px;
}

/* ---------- support details (collapsed disclosure) ---------- */

.support-details {
 margin-top: 14px;
 font-size: 0.82rem;
 opacity: 0.92;
}

.support-details summary {
 cursor: pointer;
 user-select: none;
 list-style: none;
 font-weight: 600;
}

.support-details summary::-webkit-details-marker {
 display: none;
}

.support-details summary::before {
 content: "▸";
 display: inline-block;
 width: 12px;
 margin-right: 4px;
 transition: transform var(--t-fast) ease;
}

.support-details[open] summary::before {
 transform: rotate(90deg);
}

.support-details-body {
 margin-top: 8px;
 padding-left: 16px;
 display: grid;
 gap: 4px;
}

.support-row {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 align-items: baseline;
}

.support-label {
 font-weight: 600;
 min-width: 80px;
}

.support-details-body code {
 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
 font-size: 0.78rem;
 background: rgba(0, 0, 0, 0.08);
 padding: 1px 6px;
 border-radius: 4px;
 word-break: break-all;
}

/* ---------- home sections (How-to + FAQ) ---------- */

.home-section {
 margin-top: 68px;
 scroll-margin-top: 20px;
}

.home-section-head {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 8px;
}

.section-emblem {
 width: 38px;
 height: 38px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-md);
 flex-shrink: 0;
 background: var(--accent-soft);
 color: var(--accent);
}

.section-emblem--warm {
 background: var(--warm-soft);
 color: var(--warm-strong);
}

.section-emblem--sun {
 background: var(--sun-soft);
 color: #92660d;
}

.home-section > h2,
.home-section-head > h2 {
 margin: 0;
 font-size: 1.4rem;
 letter-spacing: -0.015em;
 color: var(--ink);
}

.section-lead {
 margin: 6px 0 22px;
 color: var(--muted-strong);
 font-size: 1rem;
 line-height: 1.55;
 max-width: 56ch;
}

.section-note {
 margin: 22px 0 0;
 padding: 14px 16px;
 background: var(--warm-soft);
 border: 1px solid var(--line-warm);
 border-radius: var(--radius-md);
 color: var(--warm-strong);
 font-size: 0.92rem;
 line-height: 1.55;
 display: flex;
 align-items: flex-start;
 gap: 10px;
}

.section-note-icon {
 flex-shrink: 0;
 margin-top: 2px;
}

/* how-to step cards */

.howto-steps {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 14px;
}

.howto-steps li {
 position: relative;
 border: 1px solid var(--line-soft);
 border-radius: var(--radius-md);
 padding: 20px 22px 20px 22px;
 background: var(--surface);
 margin: 0;
 transition: border-color var(--t-fast) ease, transform var(--t-base) var(--ease-out),
 box-shadow var(--t-base) var(--ease-out);
}

.howto-steps li:hover {
 border-color: var(--accent-soft);
 transform: translateY(-2px);
 box-shadow: var(--shadow-sm);
}

.howto-steps li::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 4px;
 background: var(--accent);
 border-radius: var(--radius-md) 0 0 var(--radius-md);
 opacity: 0;
 transition: opacity var(--t-fast) ease;
}

.howto-steps li:hover::before {
 opacity: 1;
}

.howto-step-head {
 display: flex;
 align-items: center;
 gap: 14px;
 margin: 0 0 8px;
}

.howto-step-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 38px;
 height: 38px;
 border-radius: var(--radius-md);
 background: var(--accent-soft);
 color: var(--accent);
 flex-shrink: 0;
 position: relative;
}

.howto-step-badge--warm {
 background: var(--warm-soft);
 color: var(--warm-strong);
}

.howto-step-badge--sun {
 background: var(--sun-soft);
 color: #92660d;
}

.howto-step-num {
 position: absolute;
 top: -6px;
 right: -6px;
 width: 22px;
 height: 22px;
 border-radius: var(--radius-pill);
 background: var(--ink);
 color: #fff;
 font-size: 0.72rem;
 font-weight: 800;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 letter-spacing: 0;
}

.howto-steps h3 {
 margin: 0;
 font-size: 1.04rem;
 letter-spacing: -0.01em;
 color: var(--ink);
 font-weight: 700;
}

.howto-steps p {
 margin: 0;
 color: var(--muted-strong);
 line-height: 1.6;
 font-size: 0.96rem;
}

/* FAQ accordion */

.faq-list {
 display: grid;
 gap: 10px;
}

.faq-item {
 border: 1px solid var(--line-soft);
 border-radius: var(--radius-md);
 background: var(--surface);
 overflow: hidden;
 transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.faq-item:hover {
 border-color: var(--accent-soft);
}

.faq-item[open] {
 border-color: var(--accent-soft);
 box-shadow: var(--shadow-sm);
}

.faq-item > summary {
 list-style: none;
 cursor: pointer;
 padding: 16px 18px;
 font-weight: 700;
 color: var(--ink);
 font-size: 0.98rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 14px;
 transition: background var(--t-fast) ease;
}

.faq-item > summary:hover {
 background: var(--surface-soft);
}

.faq-item > summary::-webkit-details-marker {
 display: none;
}

.faq-chevron {
 flex-shrink: 0;
 color: var(--accent);
 transition: transform var(--t-base) var(--ease-out);
}

.faq-item[open] .faq-chevron {
 transform: rotate(180deg);
}

.faq-item > p {
 margin: 0;
 padding: 0 18px 18px;
 color: var(--muted-strong);
 line-height: 1.6;
 font-size: 0.96rem;
 animation: faq-body-in var(--t-base) var(--ease-out);
}

@keyframes faq-body-in {
 from { opacity: 0; transform: translateY(-4px); }
 to { opacity: 1; transform: translateY(0); }
}

.faq-item > summary:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: -2px;
 border-radius: var(--radius-md);
}

/* ---------- legal pages ---------- */

.legal-page {
 max-width: 720px;
 width: 100%;
 margin: 0 auto;
 padding: 24px 16px 56px;
 line-height: 1.65;
}

.legal-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 5px 12px;
 background: var(--accent-soft);
 color: var(--accent-strong);
 border-radius: var(--radius-pill);
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 margin-bottom: 14px;
}

.legal-page h1 {
 font-size: clamp(1.8rem, 5vw, 2.4rem);
 letter-spacing: -0.025em;
 margin: 6px 0 12px;
 line-height: 1.1;
}

.legal-page > p:first-of-type {
 font-size: 1.04rem;
 color: var(--muted-strong);
 line-height: 1.6;
 max-width: 56ch;
}

.legal-page h2 {
 margin-top: 36px;
 font-size: 1.15rem;
 letter-spacing: -0.01em;
}

.legal-page a {
 color: var(--accent-strong);
 font-weight: 600;
 border-bottom: 1.5px solid var(--accent-soft);
 transition: border-color var(--t-fast) ease;
}

.legal-page a:hover {
 border-color: var(--accent);
}

.legal-page ul {
 padding-left: 22px;
}

.legal-page li {
 margin: 4px 0;
}

.callout {
 margin: 20px 0;
 padding: 16px 18px;
 border-radius: var(--radius-md);
 background: var(--accent-soft);
 border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
 display: flex;
 align-items: flex-start;
 gap: 12px;
 color: var(--accent-strong);
 line-height: 1.55;
 font-size: 0.96rem;
}

.callout-icon {
 flex-shrink: 0;
 margin-top: 2px;
 color: var(--accent);
}

.callout strong {
 font-weight: 700;
}

.callout--warm {
 background: var(--warm-soft);
 border-color: var(--line-warm);
 color: var(--warm-strong);
}

.callout--warm .callout-icon {
 color: var(--warm);
}

.callout--sun {
 background: var(--sun-soft);
 border-color: color-mix(in srgb, var(--sun) 40%, transparent);
 color: #6b4a0a;
}

.callout--sun .callout-icon {
 color: var(--sun);
}

/* ---------- about page ---------- */

.about-page {
 max-width: 720px;
 width: 100%;
 margin: 0 auto;
 padding: 24px 16px 56px;
 line-height: 1.65;
}

.about-hero {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 28px;
 align-items: start;
 margin-bottom: 12px;
}

.about-hero h1 {
 font-size: clamp(1.85rem, 5vw, 2.4rem);
 letter-spacing: -0.025em;
 margin: 6px 0 14px;
 line-height: 1.1;
}

.about-lead {
 font-size: 1.06rem;
 color: var(--muted-strong);
 line-height: 1.6;
 max-width: 56ch;
 margin: 0 0 24px;
}

.about-art {
 width: 130px;
 height: 130px;
 flex-shrink: 0;
}

.about-page h2 {
 margin-top: 36px;
 font-size: 1.18rem;
 letter-spacing: -0.01em;
 display: flex;
 align-items: center;
 gap: 12px;
}

.about-page h2 .section-emblem {
 width: 32px;
 height: 32px;
}

.principles {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 12px;
}

.principles li {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 14px;
 align-items: flex-start;
 padding: 16px 18px;
 background: var(--surface);
 border: 1px solid var(--line-soft);
 border-radius: var(--radius-md);
 transition: transform var(--t-base) var(--ease-out), border-color var(--t-fast) ease;
}

.principles li:hover {
 transform: translateY(-2px);
 border-color: var(--accent-soft);
}

.principle-icon {
 width: 36px;
 height: 36px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--radius-md);
 background: var(--accent-soft);
 color: var(--accent);
 flex-shrink: 0;
}

.principle-body strong {
 display: block;
 color: var(--ink);
 margin-bottom: 2px;
 font-weight: 700;
}

.principle-body p {
 margin: 0;
 color: var(--muted-strong);
 font-size: 0.95rem;
 line-height: 1.55;
}

/* ---------- 404 page ---------- */

.not-found {
 flex: 1 0 auto;
 width: min(560px, calc(100% - 32px));
 margin: 0 auto;
 padding: 36px 16px 56px;
 text-align: center;
}

.not-found-art {
 width: 180px;
 height: 180px;
 margin: 0 auto 22px;
}

.not-found h1 {
 font-size: clamp(2rem, 5vw, 2.4rem);
 letter-spacing: -0.025em;
 margin: 0 0 12px;
}

.not-found p {
 color: var(--muted-strong);
 font-size: 1.02rem;
 margin: 0 auto 28px;
 max-width: 36ch;
 line-height: 1.55;
}

.not-found-actions {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
}

.not-found-actions .btn {
 flex: 1 1 auto;
 min-width: 160px;
 max-width: 240px;
}

/* ---------- footer extras ---------- */

.site-footer {
 border-top: 1px solid var(--line-soft);
 margin-top: 36px;
 padding: 26px 0 30px;
 color: var(--muted);
 font-size: 0.88rem;
 flex-wrap: wrap;
}

.footer-recap {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 1 1 auto;
}

.footer-recap-icon {
 color: var(--accent);
 flex-shrink: 0;
}

/* ---------- mobile ---------- */

@media (max-width: 720px) {
 .site-header,
 .site-footer,
 .tool-main,
 .legal-page,
 .about-page {
 width: calc(100% - 24px);
 }
}

@media (max-width: 640px) {
 .site-header {
 padding: 16px 0 12px;
 }

 /* ---- mobile tap targets (Apple HIG 44px / WCAG 2.5.5) ---- */
 nav a {
 min-height: 44px;
 padding: 10px 6px;
 display: inline-flex;
 align-items: center;
 }

 .site-footer nav a {
 min-height: 44px;
 padding: 8px 6px;
 display: inline-flex;
 align-items: center;
 }

 .tool-main {
 padding: 16px 0 22px;
 }

 .tool {
 padding: 20px 18px 18px;
 }

 /* ---- center hero stack on mobile (eyebrow, art, H1, subtitle, lead) ---- */
 .tool-section {
 text-align: center;
 }

 .tool-section h1 {
 font-size: 1.7rem;
 margin-left: auto;
 margin-right: auto;
 }

 .tool-lead {
 margin: 14px auto 22px;
 font-size: 0.99rem;
 max-width: 36ch;
 }

 .tool-subtitle {
 justify-content: center;
 margin-top: 14px;
 }

 .hero-grid {
 grid-template-columns: 1fr;
 gap: 10px;
 justify-items: center;
 }

 .hero-art {
 width: 128px;
 height: 128px;
 order: -1;
 margin: 4px auto 8px;
 }

 /* form: keep left-aligned inside the card; only the hero is centered */
 .tool {
 text-align: left;
 }

 /* about page hero: same centered treatment */
 .about-page {
 /* leave body left-aligned for readability */
 }

 .about-hero {
 grid-template-columns: 1fr;
 text-align: center;
 }

 .about-lead {
 margin-left: auto;
 margin-right: auto;
 max-width: 36ch;
 }

 .about-art {
 width: 130px;
 height: 130px;
 order: -1;
 margin: 0 auto 6px;
 }

 /* legal-page eyebrow centered too (consistency) */
 .legal-page {
 /* keep body left-aligned for legal reading */
 }

 .input-row {
 grid-template-columns: 1fr;
 gap: 8px;
 }

 .btn-primary,
 .btn-ghost,
 .btn-warm {
 width: 100%;
 }

 .download-cta {
 min-width: 0;
 }

 .result {
 padding: 16px 16px 14px;
 }

 .home-section {
 margin-top: 52px;
 }

 .home-section > h2,
 .home-section-head > h2 {
 font-size: 1.22rem;
 }

 .howto-steps li {
 padding: 18px 18px;
 }

 .site-footer {
 flex-direction: column;
 align-items: flex-start;
 gap: 12px;
 padding: 22px 0 26px;
 }

 .footer-recap {
 flex: 0 1 auto;
 }
}

@media (max-width: 380px) {
 .tool-section h1 {
 font-size: 1.45rem;
 }

 .supported {
 gap: 6px 8px;
 }

 .howto-step-head {
 gap: 10px;
 }

 .howto-step-badge {
 width: 34px;
 height: 34px;
 }
}