/* Plancalc site — Claude Design 2026-08-07 + layout bridges for existing markup */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root {
  --color-bg: #f3f6f8;
  --color-surface: #e8edf1;
  --color-paper: #ffffff;
  --color-text: #16202b;
  --color-muted: #5a6570;
  --color-divider: rgba(15, 39, 68, .16);
  --color-navy: #0f2744;
  --color-navy-deep: #081628;
  --color-accent: #1a7a6d;
  --color-red: #b33a2b;
  --color-green: #1e6b4a;
  --color-accent-100: #e6f5f2; --color-accent-200: #c5e8e1; --color-accent-300: #96d3c8;
  --color-accent-400: #5fb3a5; --color-accent-500: #2b8b7c; --color-accent-600: #17695e;
  --color-accent-700: #10514a; --color-accent-800: #0b3a35; --color-accent-900: #082a26;
  --color-neutral-100: #f5f7f9; --color-neutral-200: #e8edf1; --color-neutral-300: #d5dde5;
  --color-neutral-400: #b6c0ca; --color-neutral-500: #97a2ad; --color-neutral-600: #79848f;
  --color-neutral-700: #5c6772; --color-neutral-800: #404b56; --color-neutral-900: #1d2936;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, serif;
  --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px;
  --space-4: 18.4px; --space-6: 27.6px; --space-8: 36.8px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px;
  --shadow-sm: 0 1px 2px rgba(8,22,40,.14);
  --shadow-md: 0 3px 10px rgba(8,22,40,.16);
  --shadow-lg: 0 12px 32px rgba(8,22,40,.22);
  /* legacy aliases used in older markup */
  --navy: var(--color-navy); --navy-deep: var(--color-navy-deep);
  --accent: var(--color-accent); --accent-soft: var(--color-accent-100);
  --red: var(--color-red); --green: var(--color-green);
  --bg: var(--color-bg); --paper: var(--color-paper); --ink: var(--color-text);
  --muted: var(--color-muted); --line: var(--color-neutral-300); --max: 960px;
  --sans: var(--font-body); --serif: var(--font-heading);
  --radius: var(--radius-md); --focus: var(--color-accent);
}

*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);line-height:1.65}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--font-heading-weight);color:var(--color-navy);margin-top:0}
h1{font-weight:400}
h2{border-bottom:1px solid var(--color-navy);padding-bottom:var(--space-2);font-size:clamp(1.35rem,2.5vw,1.75rem)}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-600)}
::selection{background:var(--color-accent-200)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.tnum{font-feature-settings:'tnum'}

/* Buttons — outline, never filled (design rule) */
.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-accent,.btn-navy,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid transparent;background:transparent;color:var(--color-text);margin:.25rem .35rem .25rem 0
}
.btn-primary,.btn-accent{border-color:var(--color-accent);color:var(--color-accent-700)}
.btn-primary:hover,.btn-accent:hover{background:var(--color-accent-100)}
.btn-secondary,.btn-navy{border-color:var(--color-navy);color:var(--color-navy)}
.btn-secondary:hover,.btn-navy:hover{background:var(--color-neutral-100)}
.btn-ghost{color:var(--color-muted)}
.btn-ghost:hover{color:var(--color-text);background:var(--color-neutral-100)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.btn-block{display:flex;width:100%}
.btn[disabled],button[disabled]{opacity:.45;pointer-events:none}

/* Layout */
header{background:var(--color-paper);color:var(--color-text);border-bottom:1px solid var(--color-divider);padding:var(--space-3) var(--space-4)}
header .inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}
.brand,.wordmark{font-family:var(--font-heading);font-size:1.5rem;font-weight:600;text-decoration:none;color:var(--color-navy);display:inline-flex;align-items:center;gap:.55rem}
.brand img,.wordmark img{width:36px;height:36px;border-radius:var(--radius-md);display:block;object-fit:cover}
.brand span,.wordmark .calc,.brand .calc{color:var(--color-accent)}
nav a{color:var(--color-muted);text-decoration:none;margin-left:.85rem;font-size:.92rem;min-height:44px;display:inline-flex;align-items:center}
nav a:hover{color:var(--color-navy)}
.lang{font-size:.85rem;letter-spacing:.04em}
@media (max-width:640px){
  nav{width:100%;display:flex;flex-wrap:wrap;gap:.1rem .4rem}
  nav a{margin-left:0;margin-right:.45rem}
}

.hero{background:linear-gradient(165deg,var(--color-navy-deep),var(--color-navy));color:#eef3f8;padding:var(--space-8) var(--space-4);border-bottom:1px solid var(--color-accent)}
.hero .inner{max-width:var(--max);margin:0 auto}
.hero h1{font-family:var(--font-heading);font-weight:400;font-size:clamp(1.85rem,4.2vw,2.65rem);margin:0 0 var(--space-3);color:#fff}
.hero p{color:#c5d2e0;max-width:40rem}
.kicker{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-300);border:1px solid rgba(26,122,109,.45);padding:.25rem .6rem;margin-bottom:var(--space-3)}
.wrap{max-width:var(--max);margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)}

.paper,.card{background:var(--color-paper);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-3)}
.card-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-2)}
.card-title{font-family:var(--font-heading);font-size:26px;color:var(--color-navy);font-feature-settings:'tnum'}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-2);margin:var(--space-4) 0}
.stat{background:var(--color-paper);border:1px solid var(--color-divider);border-top:2px solid var(--color-accent);padding:var(--space-3);text-align:center;border-radius:var(--radius-sm)}
.stat .n{font-family:var(--font-heading);font-size:1.45rem;color:var(--color-navy);font-weight:600;font-feature-settings:'tnum'}
.stat .l{font-size:.8rem;color:var(--color-muted);margin-top:.25rem}
.stat.good .n{color:var(--color-green)}.stat.bad .n{color:var(--color-red)}

/* Tables — product */
table,.table{width:100%;border-collapse:collapse;font-size:.92rem;margin:var(--space-3) 0;background:var(--color-paper);border:1px solid var(--color-divider)}
th,td,.table th,.table td{border-bottom:1px solid var(--color-divider);padding:var(--space-2) var(--space-3);text-align:left;vertical-align:top}
th,.table th{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);background:transparent;border-bottom:1px solid var(--color-navy)}
tr:nth-child(even) td{background:var(--color-neutral-100)}
.table td.num,.table th.num,td.num,th.num{text-align:right;font-feature-settings:'tnum'}
.table td.risk,td.risk{color:var(--color-red)}

.note{display:block;gap:var(--space-2);background:var(--color-accent-100);border-left:2px solid var(--color-accent);padding:var(--space-2) var(--space-3);font-size:13px;color:var(--color-accent-800);margin:var(--space-3) 0}
.note a{color:var(--color-accent-700)}
.note-warn,.warn{background:#faf0ee;border-left:2px solid var(--color-red);color:#7c2b20;padding:var(--space-2) var(--space-3);margin:var(--space-3) 0}
.good{border-left:2px solid var(--color-green);background:#eef8f3;padding:var(--space-2) var(--space-3);margin:var(--space-3) 0}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
.card h3{margin-top:0}

footer{background:var(--color-navy-deep);color:rgba(255,255,255,.72);border-top:1px solid var(--color-accent);padding:var(--space-6) var(--space-4);font-size:.9rem}
footer a{color:#d0dbe6}
footer .inner{max-width:var(--max);margin:0 auto}
footer .brand,footer .wordmark{color:#fff}
footer .brand span,footer .wordmark .calc{color:var(--color-accent-300)}
footer .muted{color:rgba(255,255,255,.5)}

.faq-item{border:1px solid var(--color-divider);margin-bottom:var(--space-2);background:var(--color-paper);border-radius:var(--radius-md)}
.faq-item h2{font-family:var(--font-body);font-size:1.05rem;margin:0;padding:var(--space-3);background:var(--color-neutral-100);border:0}
.faq-item .a{padding:var(--space-3)}

/* Forms */
label{display:block;font-weight:600;margin:var(--space-3) 0 var(--space-1);color:var(--color-navy);font-size:12px;letter-spacing:.04em}
.field label{text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);font-weight:600}
input[type=text],input[type=email],input[type=number],input[type=tel],input[type=file],select,textarea,.input{
  width:100%;max-width:32rem;min-height:44px;padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);font:inherit;background:var(--color-paper);color:var(--color-text)
}
input:hover,select:hover,textarea:hover{border-color:var(--color-neutral-400)}
input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--color-accent);outline:none}
textarea{min-height:6rem;max-width:100%}
.drop,.dropzone{border:1px dashed var(--color-accent-400);padding:var(--space-4);text-align:center;background:var(--color-accent-100);margin:var(--space-2) 0 var(--space-3);max-width:32rem;border-radius:var(--radius-md);color:var(--color-accent-800);cursor:pointer}
.drop strong,.dropzone strong{display:block;color:var(--color-navy)}
.drop:hover,.dropzone:hover{border-color:var(--color-accent)}

.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3);margin:var(--space-4) 0}
.price-card{border:1px solid var(--color-divider);background:var(--color-paper);padding:var(--space-4);position:relative;border-radius:var(--radius-md)}
.price-card.featured{border-color:var(--color-accent);box-shadow:0 0 0 1px rgba(26,122,109,.25)}
.price-card .tag{position:absolute;top:var(--space-2);right:var(--space-2);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--color-accent);color:var(--color-accent-700);padding:.2rem .45rem;font-weight:700;background:var(--color-accent-100)}
.price-card .amount{font-family:var(--font-heading);font-size:2rem;color:var(--color-navy);font-weight:600;margin:.25rem 0;font-feature-settings:'tnum'}
.price-card .amount span{font-size:1rem;color:var(--color-muted);font-weight:500}
.price-card ul{padding-left:1.1rem;margin:.5rem 0 1rem;color:var(--color-muted);font-size:.92rem}
.muted{color:var(--color-muted);font-size:.9rem}
.steps{counter-reset:step;list-style:none;padding:0;margin:var(--space-3) 0}
.steps li{counter-increment:step;position:relative;padding:.75rem 0 .75rem 2.75rem;border-bottom:1px solid var(--color-divider)}
.steps li::before{content:counter(step);position:absolute;left:0;top:.7rem;width:1.8rem;height:1.8rem;border:1px solid var(--color-navy);color:var(--color-navy);border-radius:50%;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;background:var(--color-paper)}
.chk{display:flex;gap:.5rem;align-items:flex-start;margin:.6rem 0;font-weight:400;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--color-text)}
.chk input{width:auto;margin-top:.3rem;min-height:auto}
.legal-mini{font-size:.8rem;color:var(--color-muted);margin-top:var(--space-3);max-width:40rem}
.partner{font-size:.9rem;color:var(--color-muted);margin-top:var(--space-4)}
.hr{border:0;border-top:1px solid var(--color-divider)}

/* PayPal box (design honest payment step) */
.pay-box{border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-3);background:var(--color-paper);margin:var(--space-3) 0}
.pay-box .pay-amount{font-family:var(--font-heading);font-size:1.75rem;color:var(--color-navy);font-feature-settings:'tnum';font-weight:600}
.pay-box code{font-size:1.05rem}

#order-status{margin-top:var(--space-3);padding:var(--space-3);display:none;border-radius:var(--radius-md)}
#order-status.show{display:block}
#order-status.ok{border-left:2px solid var(--color-green);background:#eef8f3}
#order-status.err{border-left:2px solid var(--color-red);background:#faf0ee}

/* Sample deliverable */
.deliverable{border:1px solid var(--color-divider);background:var(--color-paper);margin:var(--space-4) 0;overflow:hidden;border-radius:var(--radius-md)}
.deliverable .dv-head{background:var(--color-navy-deep);color:#eef3f8;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-accent);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:space-between}
.deliverable .dv-head .mark{display:flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-weight:600}
.deliverable .dv-head .mark img{width:28px;height:28px;border-radius:var(--radius-sm);object-fit:cover}
.deliverable .dv-head .badge{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(26,122,109,.5);color:var(--color-accent-300);padding:.2rem .5rem}
.deliverable .dv-body{padding:var(--space-4)}
.deliverable .dv-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-2);margin-bottom:var(--space-3)}
.deliverable .dv-meta div{border:1px solid var(--color-divider);padding:var(--space-2);background:var(--color-neutral-100)}
.deliverable .dv-meta .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}
.deliverable .dv-meta .v{font-family:var(--font-heading);font-weight:600;color:var(--color-navy);font-size:1.05rem}
.deliverable .range{font-family:var(--font-heading);font-size:clamp(1.4rem,3vw,1.85rem);color:var(--color-navy);font-weight:600;margin:.25rem 0 .75rem;font-feature-settings:'tnum'}
.deliverable .range span{color:var(--color-muted);font-size:.95rem;font-weight:500}