:root{
  --paper:#f7f2e9;
  --paper-2:#efe8da;
  --card:#fffdf8;
  --ink:#221d17;
  --ink-dim:#6f6357;
  --skin-1:#f2b28c;
  --skin-2:#e8927a;
  --jade:#3d8b6f;
  --jade-l:#4fae8c;
  --rose:#c76c85;
  --rose-d:#a8536b;
  --lavender:#8b7bb0;
  --lavender-d:#6f5f96;
  --blue:#3f6f9e;
  --blue-d:#2e5578;
  --magenta:#b13d68;
  --violet:#6b5b95;
  --green:#3f8f5f;
  --skyblue:#3f7fb0;
  --pink:#c94f7c;
  --line: rgba(34,29,23,0.14);
  --shadow: 0 10px 30px -14px rgba(34,29,23,0.18);
  --nav-bg: rgba(247,242,233,0.72);
  --bird-stroke: rgba(34,29,23,0.35);
  --radius: 18px;
  --maxw: 1180px;
  --paper-edge: rgba(255,255,255,0.4);
  --fiber-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.7 0.05' numOctaves='2' seed='11' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}

/* Lighting engine — four real daylight moods, not a light/dark palette swap.
   data-theme (light/dark) is derived from data-daypart by script.js and
   drives structural dark-mode CSS elsewhere; data-daypart drives the actual
   color grading. Morning and afternoon are "light"; evening and night are
   "dark" — each pair still reads as genuinely different lighting. */
:root[data-daypart="morning"]{
  --paper:#faf1e2; --paper-2:#f3e4c9; --card:#fffaf0;
  --ink:#2c2013; --ink-dim:#7d6a4a;
  --line: rgba(120,80,20,0.16);
  --shadow: 0 12px 30px -14px rgba(120,80,20,0.22);
  --nav-bg: rgba(250,241,226,0.72);
  --bird-stroke: rgba(44,32,19,0.32);
  --glow-1: rgba(255,196,110,0.4); --glow-2: rgba(255,150,90,0.16); --glow-3: rgba(120,190,150,0.1);
  --paper-edge: rgba(255,250,235,0.55);
}
:root[data-daypart="afternoon"]{
  --paper:#f7f2e9; --paper-2:#efe8da; --card:#fffdf8;
  --ink:#221d17; --ink-dim:#6f6357;
  --line: rgba(34,29,23,0.14);
  --shadow: 0 10px 30px -14px rgba(34,29,23,0.18);
  --nav-bg: rgba(247,242,233,0.72);
  --bird-stroke: rgba(34,29,23,0.35);
  --glow-1: rgba(242,178,140,0.34); --glow-2: rgba(139,123,176,0.22); --glow-3: rgba(79,174,140,0.16);
  --paper-edge: rgba(255,253,248,0.5);
}
:root[data-daypart="evening"]{
  --paper:#e9d6b9; --paper-2:#ddc39c; --card:#f4e7ce;
  --ink:#33230f; --ink-dim:#75603c;
  --line: rgba(90,50,10,0.2);
  --shadow: 0 16px 36px -14px rgba(90,45,10,0.34);
  --nav-bg: rgba(233,214,185,0.72);
  --bird-stroke: rgba(51,35,15,0.32);
  --glow-1: rgba(232,120,55,0.45); --glow-2: rgba(180,80,50,0.24); --glow-3: rgba(120,90,140,0.14);
  --paper-edge: rgba(255,240,215,0.4);
}
:root[data-daypart="night"]{
  --paper:#0c0b10;
  --paper-2:#17151b;
  --card:#1b191f;
  --ink:#f3ede6;
  --ink-dim:#b3a89b;
  --line: rgba(243,237,230,0.14);
  --shadow: 0 10px 30px -14px rgba(0,0,0,0.55);
  --nav-bg: rgba(21,20,26,0.72);
  --bird-stroke: rgba(243,237,230,0.28);
  --glow-1: rgba(120,150,255,0.22); --glow-2: rgba(90,110,200,0.16); --glow-3: rgba(140,120,200,0.12);
  --paper-edge: rgba(180,190,255,0.1);
}
/* data-theme still drives a handful of structural dark-mode rules below,
   kept in sync with data-daypart by script.js. */
:root[data-theme="dark"]{
  --paper:#0c0b10; --paper-2:#17151b; --card:#1b191f;
  --ink:#f3ede6; --ink-dim:#b3a89b;
  --line: rgba(243,237,230,0.14);
  --shadow: 0 10px 30px -14px rgba(0,0,0,0.55);
  --nav-bg: rgba(21,20,26,0.72);
  --bird-stroke: rgba(243,237,230,0.28);
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; font-weight:500; margin:0;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
img,svg{display:block; max-width:100%;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] .grain{ mix-blend-mode:overlay; opacity:0.05; }

/* Paper/fiber realism — a directional fiber grain distinct from the page-wide
   .grain (which is uniform static-noise "atmosphere"). Anisotropic turbulence
   frequency gives it a linen-like streak instead of a TV-static look. Applied
   per-card via ::before so it never fights the card's own background-color. */
.paper-grain{ position:relative; isolation:isolate; }
.paper-grain::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background-image:var(--fiber-texture); background-size:160px 160px;
  opacity:.045; mix-blend-mode:multiply;
}
:root[data-theme="dark"] .paper-grain::before{ opacity:.07; mix-blend-mode:overlay; }
.paper-grain > *{ position:relative; z-index:1; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:14px 28px; border-radius:999px; font-weight:700; font-size:0.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.96); transition-duration:.08s; }
.icon-btn:active, .icon-btn-mini:active, .editor-tool:active, .checkout-btn:active{ transform:scale(0.92); }
.value:active, .canon-card:active, .module:active, .price-card:active{ transform:scale(0.985) translateY(-1px); }
.btn-primary{ background:linear-gradient(135deg,var(--skin-1),var(--skin-2)); color:#2b1608; box-shadow:0 10px 24px -10px rgba(232,146,122,0.6);}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(232,146,122,0.75);}
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink);}
.btn-outline:hover{ border-color:var(--ink-dim); transform:translateY(-2px);}
.btn-ghost{ padding:10px 20px; border:1px solid var(--line); font-size:0.85rem;}
.btn-ghost:hover{ border-color:var(--ink-dim);}
.btn-block{ width:100%; margin-top:26px;}

/* Nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px;
  padding:10px 32px;
  background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-left{ justify-self:start; display:flex; align-items:center; gap:12px; position:relative; }
.nav-right{ justify-self:end; display:flex; align-items:center; gap:8px; }

.brand{ display:flex; flex-direction:column; align-items:center; gap:3px; justify-self:center; }
.brand-mark{ width:30px; height:25px; }
.bird-nav{ width:30px; height:25px; filter:drop-shadow(0 2px 5px rgba(34,29,23,.18)); }
.brand-word{ display:flex; flex-direction:column; align-items:center; line-height:1; gap:1px; }
.w-aura{ font-family:'Fraunces', serif; font-weight:300; font-size:.62rem; letter-spacing:.32em; color:var(--ink-dim); }
.w-sync{ font-family:'Manrope', sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:.03em; color:var(--ink); }

.nav-links{ display:flex; gap:26px; font-size:0.88rem; font-weight:500; color:var(--ink-dim); }
.nav-links a:hover{ color:var(--ink); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); }

/* Icon buttons (search, theme, help, profile) */
.icon-btn{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--ink-dim); cursor:pointer; flex:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.icon-btn:hover{ background:var(--card); color:var(--ink); border-color:var(--line); }
.icon-btn svg{ width:17px; height:17px; }
#themeToggle{ position:relative; }
:root:not([data-theme="dark"]) .ico-sun{ display:none; }
:root[data-theme="dark"] .ico-moon{ display:none; }

.search-wrap{ display:flex; align-items:center; position:relative; }
.search-results{
  position:absolute; top:calc(100% + 10px); right:0; width:280px; max-height:340px; overflow-y:auto;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; z-index:60;
}
.search-results[hidden]{ display:none; }
.search-result-cat{ font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-dim); padding:8px 10px 4px; }
.search-result-item{
  display:block; width:100%; text-align:left; background:none; border:none; padding:8px 10px; border-radius:8px;
  font-size:.85rem; color:var(--ink); cursor:pointer; font-family:inherit;
}
.search-result-item:hover, .search-result-item.is-active{ background:var(--paper-2); }
.search-no-results{ padding:12px 10px; font-size:.8rem; color:var(--ink-dim); }
.search-input{
  width:0; opacity:0; padding:0; margin:0; border:1px solid transparent; background:var(--card); color:var(--ink);
  border-radius:999px; font-size:.85rem; font-family:inherit; transition:width .3s ease, opacity .3s ease, padding .3s ease, margin .3s ease, border-color .2s ease;
}
.search-wrap.is-open .search-input{ width:180px; opacity:1; padding:8px 14px; margin-right:6px; border-color:var(--line); }
.search-input:focus{ outline:none; border-color:var(--skin-2); }
.mic-btn{ display:none; }
.search-wrap.is-open .mic-btn{ display:flex; }
.mic-btn.is-listening{ color:var(--skin-2); background:var(--card); }

.profile{ position:relative; }
.profile-panel{
  position:absolute; top:calc(100% + 12px); right:0; width:264px; max-height:calc(100vh - 100px); overflow-y:auto;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:16px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:60;
}
.profile.is-open .profile-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.profile-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.profile-head-text{ flex:1; min-width:0; }
.profile-avatar-upload{ position:relative; cursor:pointer; flex:none; display:block; }
.profile-avatar{
  width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden;
  background:linear-gradient(135deg,var(--skin-1),var(--skin-2)); color:#2b1608;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem;
}
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-edit-badge{
  position:absolute; bottom:-2px; right:-2px; width:18px; height:18px; border-radius:50%;
  background:var(--ink); color:var(--paper); font-size:.75rem; line-height:1; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--card);
}
.profile-name-input{
  border:none; background:none; font-weight:700; font-size:.9rem; color:var(--ink); font-family:inherit; padding:2px 0; width:100%;
  border-radius:6px;
}
.profile-name-input:hover, .profile-name-input:focus{ background:var(--paper-2); outline:none; padding-left:4px; }
.profile-plan{ font-size:.7rem; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }
.subscription-status{
  font-size:.76rem; color:var(--jade); background:color-mix(in srgb, var(--jade) 10%, transparent);
  border-radius:8px; padding:8px 10px; margin-bottom:12px;
}
.subscription-status.is-warning{ color:var(--rose-d); background:color-mix(in srgb, var(--rose-d) 10%, transparent); }
.profile-caption-input{
  width:100%; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-family:inherit; font-size:.8rem;
  padding:8px 10px; border-radius:8px; margin-bottom:12px;
}
.profile-caption-input:focus{ outline:none; border-color:var(--skin-2); }
.profile-sync-status{ font-size:.72rem; color:var(--ink-dim); min-height:1.1em; margin-top:8px; }
.profile-sync-status.is-synced{ color:var(--jade); }
.profile-sync-status.is-error{ color:var(--rose-d); }

.auth-section{ display:flex; flex-direction:column; gap:8px; }
.auth-lead{ font-size:.8rem; color:var(--ink-dim); margin-bottom:4px; }
.auth-input{
  width:100%; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-family:inherit; font-size:.82rem;
  padding:9px 10px; border-radius:8px;
}
.auth-input:focus{ outline:none; border-color:var(--skin-2); }
.auth-actions{ display:flex; gap:8px; margin-top:2px; }
.auth-actions .btn-mini{ flex:1; }
.btn-mini-outline{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.auth-note{ font-size:.75rem; color:var(--rose-d); min-height:1.1em; }
.auth-note.is-success{ color:var(--jade); }
.password-form{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.password-note{ font-size:.75rem; color:var(--rose-d); min-height:1.1em; margin-bottom:8px; }
.password-note.is-success{ color:var(--jade); }
.auth-skip{ font-size:.72rem; color:var(--ink-dim); text-align:center; opacity:.85; margin-top:4px; }
.profile-section{ border-top:1px solid var(--line); padding:8px 0; }
.profile-section summary{
  cursor:pointer; font-weight:700; font-size:.8rem; list-style:none; padding:4px 0; display:flex; justify-content:space-between; align-items:center;
}
.profile-section summary::-webkit-details-marker{ display:none; }
.profile-section summary::after{ content:"›"; transform:rotate(90deg); display:inline-block; color:var(--ink-dim); transition:transform .2s; }
.profile-section[open] summary::after{ transform:rotate(270deg); }
.profile-toggle{ display:flex; justify-content:space-between; align-items:center; padding:7px 2px; font-size:.78rem; color:var(--ink); cursor:pointer; }
.profile-toggle input[type="checkbox"]{
  appearance:none; width:32px; height:19px; border-radius:999px; background:var(--line); position:relative; cursor:pointer;
  transition:background .2s; flex:none; margin:0;
}
.profile-toggle input[type="checkbox"]::before{
  content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--card);
  box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .2s;
}
.profile-toggle input[type="checkbox"]:checked{ background:var(--jade); }
.profile-toggle input[type="checkbox"]:checked::before{ transform:translateX(13px); }
.profile-links{ display:flex; flex-direction:column; gap:2px; margin-top:8px; border-top:1px solid var(--line); padding-top:10px; }
.profile-links a, .profile-links button{
  text-align:left; background:none; border:none; padding:9px 8px; border-radius:8px; font-size:.85rem; color:var(--ink);
  cursor:pointer; font-family:inherit; width:100%;
}
.profile-links a:hover, .profile-links button:hover{ background:var(--paper-2); }

/* Section shared */
main{ position:relative; z-index:1; }
section{ padding:120px 32px; max-width:var(--maxw); margin:0 auto; }
.section-head{ max-width:640px; margin-bottom:56px; }
.kicker{ text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:700; color:var(--skin-2); margin-bottom:14px; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:14px; }
.section-sub{ color:var(--ink-dim); font-size:1.05rem; max-width:56ch; }

/* HERO */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:170px 32px 100px; text-align:center; overflow:hidden;
  background:
    radial-gradient(55% 45% at 50% 15%, var(--glow-1), transparent 70%),
    radial-gradient(45% 35% at 82% 78%, var(--glow-2), transparent 70%),
    radial-gradient(40% 30% at 8% 70%, var(--glow-3), transparent 70%),
    var(--paper);
  transition:background 1.1s ease;
}
.hero-backdrop{
  position:absolute; left:0; right:0; bottom:0; height:280px; z-index:0; overflow:hidden;
  pointer-events:none; mask-image:linear-gradient(to top, black 55%, transparent 100%);
}
.backdrop-scene{ width:100%; height:100%; display:block; }
.freed-bird{ animation: freedBirdFloat 6s ease-in-out infinite; transform-origin:120px 60px; transform-box:fill-box; }
@keyframes freedBirdFloat{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(26px,-46px) rotate(-10deg); }
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.6;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 60% at 50% 40%, black, transparent 90%);
}
/* Living environment — travelling light, moving at a pace nobody would
   consciously notice. Two large, heavily blurred blobs drift very slowly;
   they reuse the daypart's own glow colors so they never look bolted-on. */
.ambient-light{
  position:absolute; z-index:0; width:60vw; height:60vw; border-radius:50%;
  filter:blur(60px); pointer-events:none; mix-blend-mode:multiply;
}
:root[data-theme="dark"] .ambient-light{ mix-blend-mode:screen; }
.ambient-light-1{ top:-10%; left:-10%; background:var(--glow-1); animation:ambientDrift1 85s ease-in-out infinite; }
.ambient-light-2{ bottom:-15%; right:-10%; background:var(--glow-2); animation:ambientDrift2 100s ease-in-out infinite; }
@keyframes ambientDrift1{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(6vw,4vh); }
}
@keyframes ambientDrift2{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-5vw,-5vh); }
}
.axis{
  position:absolute; z-index:1; font-family:'Manrope',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; color:var(--ink-dim); opacity:.55;
}
.axis-x{ top:44%; right:14%; }
.axis-y{ top:20%; left:20%; }
.axis-z{ bottom:22%; left:16%; }
.hero-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.eyebrow{ text-transform:uppercase; letter-spacing:.24em; font-size:.8rem; color:var(--ink-dim); margin-bottom:28px; font-weight:700;}
.hero-bird{ width:min(220px,40vw); margin-bottom:32px; }
.bird-hero{ width:100%; height:auto; filter:drop-shadow(0 18px 32px rgba(34,29,23,.22)); }
.hero-title{ font-size:clamp(2.2rem,6vw,4.2rem); line-height:1.08; letter-spacing:-.01em; margin-bottom:24px; color:var(--ink); }
.hero-sub{ color:var(--ink-dim); font-size:1.15rem; max-width:52ch; margin-bottom:28px; }
.mantra{ display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:40px; flex-wrap:wrap; justify-content:center;}
.mantra i{ color:var(--skin-2); font-style:normal; opacity:.8; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* Bird facet colors */
.f-peach{fill:var(--skin-1);} .f-peach-d{fill:var(--skin-2);}
.f-jade{fill:var(--jade-l);} .f-jade-l{fill:var(--jade);}
.f-rose{fill:var(--rose);} .f-rose-d{fill:var(--rose-d);}
.f-lavender{fill:var(--lavender);} .f-lavender-d{fill:var(--lavender-d);}
.f-blue{fill:var(--blue);} .f-blue-d{fill:var(--blue-d);}
.f-magenta{fill:var(--magenta);}
.f-crown{fill:var(--magenta);}
.f-violet2{fill:var(--violet);}
.f-ink{fill:var(--ink);}
#origami-bird polygon{ stroke:var(--bird-stroke); stroke-width:1; stroke-linejoin:round; }
.bird .wing{
  animation: shimmer 7s ease-in-out infinite, wingIntro 0.32s ease-in-out 6;
  transform-origin:120px 60px; transform-box:fill-box;
}
@keyframes shimmer{
  0%,88%,100%{ filter:brightness(1); }
  92%{ filter:brightness(1.3); }
}
@keyframes wingIntro{
  0%, 100%{ transform:rotate(0deg) scaleX(1); }
  25%{ transform:rotate(-22deg) scaleX(-1); }
  50%{ transform:rotate(6deg) scaleX(1); }
  75%{ transform:rotate(-14deg) scaleX(-1); }
}

/* Canon accent colors (shared by manifesto cards + recap strip) */
.canon-card[data-accent="trace"], .canon-strip-item[data-accent="trace"]{ --accent:var(--violet); }
.canon-card[data-accent="sync"], .canon-strip-item[data-accent="sync"]{ --accent:var(--green); }
.canon-card[data-accent="share"], .canon-strip-item[data-accent="share"]{ --accent:var(--skyblue); }
.canon-card[data-accent="inspire"], .canon-strip-item[data-accent="inspire"]{ --accent:var(--pink); }

/* Generic named accents used by values / modules / pricing / panels */
[data-accent="violet"]{ --accent:var(--violet); }
[data-accent="green"]{ --accent:var(--green); }
[data-accent="skyblue"]{ --accent:var(--blue); }
[data-accent="pink"]{ --accent:var(--magenta); }
[data-accent="jade"]{ --accent:var(--jade); }
[data-accent="rose"]{ --accent:var(--rose); }
[data-accent="lavender"]{ --accent:var(--lavender); }
[data-accent="peach"]{ --accent:var(--skin-2); }

/* Icon badges */
.canon-meta{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.canon-icon{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.canon-icon svg{ width:20px; height:20px; color:var(--accent); }

/* MANIFESTO */
.canon-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.canon-card{
  background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:24px 32px 32px;
  position:relative; overflow:hidden; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  box-shadow:var(--shadow);
}
.canon-card:hover{ transform:perspective(800px) rotateX(2deg) translateY(-4px); border-color:var(--accent); }
.canon-illustration{
  width:calc(100% + 64px); margin:-24px -32px 20px; display:block; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, var(--paper-2));
}
.canon-num{ font-family:'Fraunces',serif; font-size:1.7rem; font-weight:300; color:var(--accent); }
.canon-card h3{ font-size:1.4rem; margin-bottom:14px; display:flex; flex-direction:column; gap:2px;}
.canon-card h3 span{ font-family:'Manrope',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); font-weight:700;}
.canon-card p{ color:var(--ink-dim); margin-bottom:18px; }
.canon-card ul li{ position:relative; padding-left:18px; margin-bottom:8px; font-size:.92rem; color:var(--ink); }
.canon-card ul li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:1px; background:var(--accent); transform:rotate(45deg); }

/* WORKBENCH */
.triptych{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.panel{ padding:28px 24px; border-right:1px solid var(--line); border-top:3px solid var(--accent); }
.panel:last-child{ border-right:none; }
.panel-project{ background:var(--paper-2); }
.panel-label{ font-weight:800; margin-bottom:16px; font-size:1rem; color:var(--accent); }
.panel-note{ color:var(--ink-dim); font-size:.85rem; margin-bottom:16px; }
.panel-list li{ padding:0; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-dim); }
.panel-list li:first-child{ border-top:none; }
.panel-list li label, .import-trigger{
  display:block; width:100%; text-align:left; padding:9px 0; background:none; border:none; font:inherit; color:inherit;
  cursor:pointer; font-family:inherit; font-size:inherit;
}
.panel-list li label:hover, .import-trigger:hover{ color:var(--ink); }
.panel-list-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.panel-list-tags li{ border:1px solid var(--line); padding:6px 12px; border-radius:999px; font-size:.78rem; }
.import-inline-form{ display:flex; gap:8px; margin-top:12px; }
.import-inline-form[hidden]{ display:none; }
.import-inline-form input{
  flex:1; min-width:0; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-family:inherit;
  font-size:.8rem; padding:8px 10px; border-radius:8px;
}
.import-inline-form input:focus{ outline:none; border-color:var(--jade); }
.btn-mini{
  border:none; background:var(--jade); color:#fff; font-weight:700; font-size:.78rem; padding:8px 14px; border-radius:8px; cursor:pointer; flex:none;
}
.import-preview{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.import-preview-media{ border-radius:8px; overflow:hidden; margin-bottom:8px; background:var(--paper-2); }
.import-preview-media img, .import-preview-media video{ width:100%; display:block; max-height:120px; object-fit:cover; }
.import-preview-label{ font-size:.78rem; color:var(--ink-dim); word-break:break-all; }

.project-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.project-tools{ display:flex; gap:8px; }
.icon-btn-mini{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.72rem; font-weight:700;
}
.icon-btn-mini:hover{ color:var(--ink); border-color:var(--ink-dim); }
.icon-btn-mini svg{ width:15px; height:15px; }
.aspect-btn{ width:auto; padding:0 10px; }

.preview-stage-wrap{ display:flex; justify-content:center; margin-bottom:14px; }
.preview-stage{
  position:relative; width:100%; max-width:220px; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .35s ease, aspect-ratio .35s ease;
}
.preview-stage[data-aspect="9-16"]{ aspect-ratio:9/16; max-width:150px; }
.preview-stage[data-aspect="16-9"]{ aspect-ratio:16/9; max-width:260px; }
.preview-stage[data-rotate="90"]{ transform:rotate(90deg); }
.preview-stage[data-rotate="180"]{ transform:rotate(180deg); }
.preview-stage[data-rotate="270"]{ transform:rotate(270deg); }
.preview-media{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16%; }
.preview-media img, .preview-media video{ width:100%; height:100%; object-fit:contain; }
.preview-placeholder-bird{ width:70%; opacity:.9; }
.overlay-layer{ position:absolute; inset:0; overflow:hidden; }
.overlay-item{
  position:absolute; cursor:grab; touch-action:none; user-select:none; padding:2px 4px; line-height:1.2; white-space:nowrap;
}
.overlay-item.is-selected{ outline:1.5px dashed var(--skin-2); border-radius:4px; }
.overlay-item.overlay-emoji, .overlay-item.overlay-sticker{ font-size:28px; }

.editor-toolbar{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; justify-content:center; }
.editor-tool{
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.76rem; font-weight:700;
  padding:6px 12px; border-radius:999px; cursor:pointer;
}
.editor-tool:hover{ border-color:var(--accent); color:var(--accent); }
.editor-tool:disabled{ opacity:.35; cursor:not-allowed; }
.editor-tool:disabled:hover{ border-color:var(--line); color:var(--ink); }
.editor-tool-icon{ padding:6px 10px; display:inline-flex; align-items:center; }
.editor-tool-icon svg{ width:15px; height:15px; }
.editor-popover{
  display:flex; flex-wrap:wrap; gap:6px; padding:10px; margin-bottom:10px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); max-height:110px; overflow-y:auto; justify-content:center;
}
.editor-popover[hidden]{ display:none; }
.editor-popover button{
  border:none; background:none; font-size:22px; cursor:pointer; padding:2px 4px; border-radius:6px; line-height:1;
}
.editor-popover button:hover{ background:var(--paper-2); }
.text-style-bar{ display:flex; gap:8px; margin-bottom:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.text-style-bar[hidden]{ display:none; }
.text-style-bar select{
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:.76rem; padding:6px 8px; border-radius:8px;
}
.text-style-bar input[type="color"]{ width:30px; height:30px; border:1px solid var(--line); border-radius:8px; padding:2px; background:var(--card); cursor:pointer; }
.text-style-bar button{
  border:1px solid var(--line); background:var(--card); color:var(--rose-d); font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:8px; cursor:pointer;
}

.timeline{ height:64px; border:1px solid var(--line); border-radius:10px; margin-bottom:20px; overflow:hidden; background:var(--card); position:relative;}
.wave{ position:absolute; inset:0; background:
  repeating-linear-gradient(90deg, transparent 0 10px, rgba(232,146,122,.35) 10px 12px);
  mask-image:linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}
.wave.is-replaying{ animation:waveReplay .8s ease; }
@keyframes waveReplay{ 0%{ opacity:.2; transform:scaleX(0.85); } 100%{ opacity:1; transform:scaleX(1); } }
.panel-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.panel-actions button{
  border:1px solid var(--line); background:var(--card); color:var(--ink-dim); font-family:inherit; font-size:.82rem; font-weight:600;
  padding:8px 14px; border-radius:999px; cursor:pointer;
}
.panel-actions button:hover{ color:var(--ink); border-color:var(--accent); }
.panel-status{ margin-top:10px; font-size:.78rem; color:var(--jade); min-height:1.1em; }

.history-wrap{ position:relative; display:inline-flex; }
.history-popover{
  position:absolute; bottom:calc(100% + 10px); left:0; width:260px; max-height:280px; overflow-y:auto;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; z-index:60;
  text-align:left;
}
.history-popover[hidden]{ display:none; }
.history-empty{ padding:14px 10px; font-size:.78rem; color:var(--ink-dim); text-align:center; }
.history-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:8px; font-size:.78rem;
}
.history-item:hover{ background:var(--paper-2); }
.history-item-meta{ color:var(--ink-dim); }
.history-item-restore{
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.72rem; font-weight:700;
  padding:4px 10px; border-radius:999px; cursor:pointer; flex:none;
}
.history-item-restore:hover{ border-color:var(--accent); color:var(--accent); }
.crane-profile{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.crane-avatar{
  width:52px; height:52px; border-radius:50%; background:var(--paper-2); border:1px solid var(--line); flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.crane-avatar svg{ width:32px; height:32px; }
.crane-profile .panel-label{ margin-bottom:2px; }
.crane-profile .panel-note{ margin-bottom:0; font-size:.78rem; }

/* VALUES */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.value{
  border:1px solid var(--line); border-radius:14px; padding:22px 18px; font-size:.92rem; font-weight:600; color:var(--ink);
  display:flex; flex-direction:column; gap:12px; background:var(--card); transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.value:hover{ transform:perspective(800px) rotateX(2deg) translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); }
.value-num{ font-family:'Fraunces',serif; font-size:1.3rem; font-weight:500; color:var(--accent); }

/* MODULES */
.modules-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.module{
  border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:28px 22px;
  background:var(--card); box-shadow:var(--shadow); transition:transform .3s ease, border-color .3s ease;
}
.module:hover{ transform:perspective(800px) rotateX(2deg) translateY(-3px); border-color:var(--accent); }
.module h3{ font-size:1.05rem; margin-bottom:10px; }
.module p{ font-size:.88rem; color:var(--ink-dim); }

/* PRICING — Membership & Pricing redesign: editorial cards, not a table.
   Annual-only for paid tiers, so there's no billing-cadence toggle. */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price-card{
  border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:var(--radius); padding:32px 28px;
  background:var(--card); position:relative; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease, filter .3s ease;
}
.price-card-featured{ border-color:var(--line); background:var(--card); box-shadow:0 20px 44px -18px rgba(232,146,122,.45); }
.price-tagline{ font-size:.85rem; color:var(--ink-dim); margin-bottom:18px; }
/* A tag pinned to the top edge, notched like a paper ribbon rather than a
   promotional pill badge — restrained, not flashing. */
.price-ribbon{
  position:absolute; top:20px; left:-8px; z-index:3;
  background:linear-gradient(135deg,var(--skin-1),var(--skin-2)); color:#2b1608;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:6px 16px 6px 16px; box-shadow:0 4px 10px -4px rgba(0,0,0,.35);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%);
}
.price-ribbon-studio{ background:linear-gradient(135deg,var(--lavender),var(--violet)); color:#fff; }
.price-ribbon + h3{ margin-top:20px; }
.price-card h3{ font-size:1.2rem; margin-bottom:6px; }
.price-amount{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.amount{ font-family:'Fraunces',serif; font-size:2.4rem; font-weight:500; }
.period{ color:var(--ink-dim); font-size:.9rem; }
.price-equivalent{ font-size:.76rem; color:var(--ink-dim); margin-bottom:22px; }
.price-card ul{ display:flex; flex-direction:column; gap:10px; flex:1; margin-bottom:24px; }
.price-card ul li{ font-size:.88rem; color:var(--ink-dim); padding-left:18px; position:relative; }
.price-card ul li::before{ content:""; position:absolute; left:0; top:6px; width:6px; height:6px; background:var(--accent); transform:rotate(45deg); }
.fine-print{ margin-top:28px; font-size:.78rem; color:var(--ink-dim); opacity:.85; max-width:64ch; }
.checkout-status{ margin-top:16px; font-size:.85rem; color:var(--jade); min-height:1.2em; display:flex; align-items:center; justify-content:center; gap:6px; }

/* Selection — reflects a real, active subscription, not a decorative
   click-to-preview state. Blush-to-amethyst border, a quiet illumination
   bump, and a checkmark that eases in rather than popping. */
.current-plan-check{
  position:absolute; top:20px; right:20px; z-index:3; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--skin-2),var(--violet)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5); transition:opacity .3s ease, transform .3s ease;
}
.current-plan-check svg{ width:14px; height:14px; }
.price-card.is-current-plan{
  border-color:transparent; background-image:linear-gradient(var(--card),var(--card)), linear-gradient(135deg,var(--skin-2),var(--violet));
  background-origin:border-box; background-clip:padding-box, border-box; border-width:2px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(155,110,190,.12);
}
:root[data-theme="dark"] .price-card.is-current-plan{ background-image:linear-gradient(var(--card),var(--card)), linear-gradient(135deg,var(--skin-2),var(--lavender-d)); }
.price-card.is-current-plan .current-plan-check{ opacity:1; transform:scale(1); }
.price-card.is-current-plan .plan-cta{ opacity:.7; cursor:default; }
.price-card.is-current-plan .plan-cta:hover{ transform:none; }

/* Trust & transparency — quiet text, not a promotional graphic. */
.trust-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:36px;
  font-size:.76rem; color:var(--ink-dim); list-style:none; padding:0;
}
.trust-row li{ position:relative; padding-left:16px; }
.trust-row li::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--jade); }
.crane-loader{ display:inline-flex; width:16px; height:16px; flex:none; color:var(--lavender-d); animation:craneLoad 1.4s ease-in-out infinite; }
.crane-loader svg{ width:100%; height:100%; }
@keyframes craneLoad{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-3px) rotate(6deg); } }
.checkout-status.is-error{ color:var(--rose-d); }
.btn:disabled{ opacity:.6; cursor:default; transform:none !important; }

/* CANON STRIP (recap) */
.canon-strip{ text-align:center; }
.canon-strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:20px; }
.canon-strip-item{ padding:26px 18px; border:1px solid var(--line); border-radius:16px; background:var(--card); display:flex; flex-direction:column; align-items:center; box-shadow:var(--shadow); }
.canon-strip-item svg{ width:26px; height:26px; color:var(--accent); margin-bottom:14px; }
.canon-strip-item h4{ font-size:1.05rem; margin-bottom:8px; color:var(--accent); }
.canon-strip-item p{ font-size:.85rem; color:var(--ink-dim); }

/* HELP / FAQ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:720px; }
.faq-item{ border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:var(--card); }
.faq-item summary{ cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.2rem; color:var(--ink-dim); flex:none; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top:12px; color:var(--ink-dim); font-size:.9rem; }
.faq-item a{ color:var(--skin-2); text-decoration:underline; }

/* BEGIN */
.begin{ text-align:center; }
.begin-inner{ max-width:520px; margin:0 auto; }
.begin h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:14px; }
.begin p{ color:var(--ink-dim); margin-bottom:32px; }
.waitlist-form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.waitlist-form input{
  flex:1; min-width:220px; padding:14px 18px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.95rem; font-family:inherit;
}
.waitlist-form input:focus{ outline:none; border-color:var(--skin-2); }
.form-note{ margin-top:16px; font-size:.85rem; color:var(--jade); min-height:1.2em; }

/* QR CARD */
.qr-card{
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 26px; background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); margin:0 auto 32px;
}
.qr-code-wrap{ width:112px; height:112px; background:#fffdf8; padding:8px; border-radius:10px; }
.qr-code{ width:100%; height:100%; color:#221d17; }
.qr-caption{ font-family:'Fraunces',serif; font-size:.95rem; letter-spacing:.02em; color:var(--ink); }
.qr-hint{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); }

/* FOOTER */
.footer{ padding:60px 32px 40px; text-align:center; border-top:1px solid var(--line); position:relative; z-index:1;}
.barcode{ display:flex; justify-content:center; align-items:flex-end; gap:6px; margin-bottom:26px; height:42px; }
.barcode span{
  width:5px; border-radius:1px;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-dim) 55%, transparent 100%);
  clip-path:polygon(0 9px, 100% 0, 100% 100%, 0 100%);
  opacity:.75; filter:drop-shadow(2px 3px 2px rgba(0,0,0,0.18));
}
.barcode span:nth-child(odd){ height:42px; }
.barcode span:nth-child(even){ height:24px; }
.barcode span:nth-child(3n){ height:32px; transform:rotate(-3deg); }
.barcode span:nth-child(4n){ transform:rotate(2deg); }
.barcode span:nth-child(5n){ height:18px; }
.footer-mantra{ font-family:'Fraunces',serif; font-size:1.1rem; letter-spacing:.06em; margin-bottom:22px; }
.footer-links{ display:flex; gap:26px; justify-content:center; font-size:.85rem; color:var(--ink-dim); margin-bottom:22px; flex-wrap:wrap;}
.footer-links a:hover{ color:var(--ink); }
.footer-tagline{ font-family:'Fraunces',serif; font-style:italic; font-size:.95rem; color:var(--ink-dim); margin-bottom:10px; }
.footer-copy{ font-size:.78rem; color:var(--ink-dim); opacity:.75; }

/* SHARE SHEET */
.share-sheet{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.share-sheet[hidden]{ display:none; }
.share-sheet-backdrop{
  position:absolute; inset:0; background:rgba(10,9,12,0.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s ease;
}
.share-sheet.is-open .share-sheet-backdrop{ opacity:1; }
.share-sheet-panel{
  position:relative; z-index:1; width:100%; max-width:560px; max-height:80vh; overflow-y:auto;
  background:color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow); padding:24px;
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);
}
.share-sheet.is-open .share-sheet-panel{ opacity:1; transform:translateY(0) scale(1); }
.share-sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.share-sheet-head h3{ font-size:1.2rem; }
.share-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:12px; margin-bottom:14px; }
.share-item{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:12px; border:1px solid transparent;
  background:none; cursor:pointer; font-family:inherit;
}
.share-item:hover{ background:var(--paper-2); border-color:var(--line); }
.share-item-icon{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.95rem; font-family:'Manrope',sans-serif;
}
.share-item-label{ font-size:.72rem; color:var(--ink-dim); text-align:center; }
.share-sheet-note{ font-size:.72rem; color:var(--ink-dim); opacity:.8; text-align:center; }

.shortcuts-panel{ max-width:420px; }
.shortcuts-list{ display:flex; flex-direction:column; gap:12px; margin:6px 0 16px; }
.shortcuts-list li{ display:flex; align-items:center; gap:10px; font-size:.88rem; }
.shortcut-keys{ display:inline-flex; align-items:center; gap:4px; flex:none; }
.shortcut-label{ margin-left:auto; color:var(--ink-dim); text-align:right; }
kbd{
  display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 6px;
  border:1px solid var(--line); border-radius:6px; background:var(--paper-2); font-family:'Manrope',sans-serif;
  font-size:.72rem; font-weight:700; color:var(--ink); box-shadow:0 1px 0 var(--line);
}
.shortcuts-note{ font-size:.74rem; color:var(--ink-dim); text-align:center; }

.storage-usage{ font-size:.82rem; color:var(--ink-dim); margin-bottom:10px; }
.storage-clear-btn{
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:.78rem; font-weight:700;
  padding:8px 14px; border-radius:999px; cursor:pointer;
}
.storage-clear-btn:hover{ border-color:var(--rose-d); color:var(--rose-d); }

/* Reveal animation */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Responsive */
@media (max-width:900px){
  .canon-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .modules-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; }
  .triptych{ grid-template-columns:1fr; }
  .panel{ border-right:none; border-bottom:1px solid var(--line); }
  .canon-strip-grid{ grid-template-columns:repeat(2,1fr); }
  .axis{ display:none; }
}
@media (max-width:720px){
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav.is-open .nav-left{ position:static; }
  /* A real unfold, not a display:none/flex snap — the menu grows open from
     the top, matching the origami "unfold" language used elsewhere. */
  .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0; background:var(--card);
    flex-direction:column; border-bottom:1px solid var(--line); gap:16px; z-index:40;
    max-height:0; opacity:0; overflow:hidden; transform:translateY(-8px); padding:0 32px;
    transition:max-height .32s ease, opacity .28s ease, transform .28s ease, padding .32s ease;
  }
  .nav.is-open .nav-links{ max-height:70vh; opacity:1; transform:translateY(0); padding:20px 32px; }
  .search-wrap.is-open .search-input{ width:110px; }
  section{ padding:80px 20px; }
}
@media (max-width:480px){
  .search-wrap{ display:none; }
  .mantra{ font-size:.6rem; gap:6px; letter-spacing:.06em; flex-wrap:nowrap; }
}

/* Accessibility: honor the OS-level reduced-motion preference everywhere —
   the wing flutter, freed-bird float, and scroll-reveal are decorative;
   nobody should be forced to sit through them. */
@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;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* Same reduced-motion treatment, but as a real in-app Settings toggle
   (id="settingReduceMotion") rather than only the OS-level preference. */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}
:root[data-motion="reduce"] .reveal{ opacity:1 !important; transform:none !important; }

/* Accessibility: a visible, theme-consistent keyboard focus ring everywhere —
   ink is always the highest-contrast color against paper in every daypart. */
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:2px; }
.icon-btn:focus-visible, .icon-btn-mini:focus-visible{ outline-offset:3px; }

/* "High contrast" Settings toggle (id="settingHighContrast") — a real, immediate
   override that pushes dimmed text to full ink and thickens hairline borders,
   independent of and stacking with the OS-level prefers-contrast preference. */
:root[data-contrast="high"]{ --ink-dim: var(--ink); }
:root[data-contrast="high"] .btn-outline{ border-width:2px; }
:root[data-contrast="high"] a{ text-decoration-thickness:2px; }
:root[data-daypart="morning"][data-contrast="high"]{ --line: rgba(44,32,19,0.45); }
:root[data-daypart="afternoon"][data-contrast="high"]{ --line: rgba(34,29,23,0.4); }
:root[data-daypart="evening"][data-contrast="high"]{ --line: rgba(51,35,15,0.45); }
:root[data-daypart="night"][data-contrast="high"]{ --line: rgba(243,237,230,0.4); }
@media (prefers-contrast: more){
  :root{ --ink-dim: var(--ink); }
}

/* Touch target sizing (WCAG 2.5.5) — icon buttons stay visually compact but
   gain real hit-area padding on touch-sized viewports. */
@media (max-width:720px){
  .icon-btn{ width:40px; height:40px; }
  .icon-btn-mini{ min-width:36px; min-height:36px; }
}

/* Paper thickness — a soft inset highlight along the top edge, as if light is
   catching the sheet's own edge, layered with each card's ambient shadow.
   Placed last so it wins over each card's own box-shadow:var(--shadow). */
.canon-card, .module, .price-card, .qr-card{
  box-shadow: inset 0 1px 0 var(--paper-edge), var(--shadow);
}

/* A single folded-corner "dog-ear" on the featured plan — one deliberate,
   physical crease rather than a decoration repeated on every card. */
.price-card-featured::after{
  content:''; position:absolute; top:0; right:0; width:26px; height:26px; z-index:2;
  background:linear-gradient(135deg, transparent 50%, var(--paper-2) 50%);
  border-top-right-radius:var(--radius);
  box-shadow:-3px 3px 6px -2px rgba(0,0,0,0.18);
  transition:transform .3s ease; transform-origin:top right;
}

/* Hover — glass brightens, shadow deepens, the card lifts, and the featured
   card's fold becomes slightly more pronounced. Restrained, not bouncy. */
.price-card:hover{
  transform:translateY(-6px);
  box-shadow: inset 0 1px 0 var(--paper-edge), 0 26px 50px -20px rgba(0,0,0,.22);
  filter:brightness(1.02);
}
.price-card-featured:hover::after{ transform:scale(1.15); }
/* Explicit tie-break: :hover and :active fire together on a real click, and
   both rules above share specificity with the global press-compress rule —
   without this, whichever is later in the file wins and the "press" feel
   (scale down) would lose to the "hover" feel (lift up) mid-click. */
.price-card:hover:active{ transform:scale(0.985) translateY(-2px); }