/* Inter, served from this site (SIL Open Font License 1.1, see fonts/Inter-OFL.txt).
   One variable file per character set covers every weight. */
@font-face{font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0d0d0d; --ink-2:#3d3d3d; --ink-3:#6e6e80; --ink-4:#9b9ba7;
  --bg:#ffffff; --bg-2:#f7f7f8; --bg-3:#efeff1;
  --line:#e3e3e6; --line-2:#d4d4d8;
  --pos:#0f7a4f; --neg:#b42318; --accent:#0d0d0d;
  /* Buy and rent get one hue each. Blue against amber stays legible for the
     8% of men with red-green colour blindness, which a red/green pair would not. */
  --buy:#1f6feb; --buy-soft:rgba(31,111,235,.10);
  /* Tints only: the same 10% wash as the mortgage box, so a tinted panel always means
     "this is a figure, not a form". Figures themselves stay ink - colour marks the
     container, never the number. */
  --price-soft:rgba(13,13,13,.045);
  --rent:#d97706; --rent-soft:rgba(217,119,6,.10);
  --r:14px; --r-sm:10px;
  --max:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none !important}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.55;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
h1,h2,h3{margin:0; letter-spacing:-.021em; font-weight:600}
p{margin:0}
button,input{font:inherit; color:inherit}

/* nav */
/* The bar holds five links, a language switch and a full name; the measure that suits
   a column of prose does not suit that, and capping it there is what made a wide screen
   overflow while a narrow one fitted. */
.nav .wrap{max-width:1240px}
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
/* No space-between: the language group carries margin-left:auto, and the two rules
   fighting each other is what made the spacing unpredictable as items were added. */
.nav-in{display:flex; align-items:center; height:60px}
.brand{font-weight:600; letter-spacing:-.02em; text-decoration:none;
  color:var(--ink); font-size:16px; white-space:nowrap; flex:0 0 auto}
/* French labels run longer than English ones, so the nav earns its space back with a
   smaller type size and a pill on the active item rather than four words at full weight
   competing with the brand. */
/* min-width:0 lets this shrink; without overflow it would shrink and spill, which
   is exactly how a fifth link ended up under the language pills. */
.nav-links{display:flex; gap:3px; align-items:center; min-width:0; flex:0 1 auto;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{flex:0 0 auto}
.nav-links a{color:var(--ink-3); text-decoration:none; font-size:13px;
  font-weight:500; letter-spacing:-.005em; padding:6px 9px; border-radius:99px;
  white-space:nowrap; transition:background .14s ease, color .14s ease}
.nav-links a:hover{color:var(--ink); background:var(--bg-3)}
.nav-links a.active{color:var(--ink); background:var(--bg-3); font-weight:600}

/* hero */
/* The hero is the only part of the site a visitor sees before deciding whether to use
   it, so it gets depth the rest of the pages do not: a very low-contrast radial wash
   that lifts the form card off flat white. It should read as depth, never as colour. */
.hero{padding:50px 0 20px; text-align:center; position:relative}
.hero::before{content:""; position:absolute; inset:-30px 0 auto; height:400px;
  background:radial-gradient(60% 72% at 50% 0%, rgba(31,111,235,.07), transparent 70%);
  pointer-events:none; z-index:-1}
.hero h1{font-size:clamp(26px, 5.1vw, 54px); line-height:1.06; margin:0 auto;
  letter-spacing:-.035em; font-weight:680; white-space:nowrap}
.hero .lede{margin:14px auto 0; max-width:52ch; font-size:17.5px; line-height:1.5}
.hero .form{text-align:left; margin-top:28px; box-shadow:0 1px 2px rgba(13,13,13,.04),
  0 12px 32px -12px rgba(13,13,13,.10)}
.hero .form:focus-within{box-shadow:0 1px 2px rgba(13,13,13,.05),
  0 16px 40px -14px rgba(13,13,13,.16)}
.hero #go{min-width:148px; box-shadow:0 1px 2px rgba(13,13,13,.18)}

/* The three things a first-time visitor wants to know before typing an address.
   Dotted separators rather than cards: this is a footnote to the form, not a feature
   grid competing with it. */
.proof{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 28px;
  list-style:none; padding:0; margin:18px 0 0; font-size:13px; color:var(--ink-3)}
.proof li{display:flex; align-items:baseline; gap:6px}
.proof li+li{position:relative}
.proof li+li::before{content:""; position:absolute; left:-15px; top:50%;
  width:3px; height:3px; border-radius:50%; background:var(--line-2)}
.proof b{color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums}
@media (max-width:620px){.proof{gap:6px 18px; font-size:12.5px}
  .proof li+li::before{left:-10px}}
.lede{margin-top:18px; color:var(--ink-3); font-size:17px; max-width:62ch}
.lede.small{font-size:15px; margin-bottom:24px}

/* cards */
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.form{margin-top:36px; display:flex; flex-direction:column; gap:20px}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px}
.card-head h2{font-size:17px}
.muted{color:var(--ink-3); font-size:13px}
.card-foot{margin-top:14px; color:var(--ink-4); font-size:12.5px; line-height:1.5}

/* fields */
.field{display:flex; flex-direction:column; gap:7px; position:relative}
label{font-size:13px; font-weight:500; color:var(--ink-2)}
.unit{color:var(--ink-4); font-weight:400}
/* the euro figure a percentage input represents, on its own line under the title */
.amt-line{font-size:12.5px; font-weight:600; color:var(--ink-2); margin-top:-3px;
  min-height:1.2em; font-variant-numeric:tabular-nums}
.amt-inline{font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums;
  white-space:nowrap}
.amt-inline:not(:empty)::before{content:"· "; font-weight:400; color:var(--ink-4)}
/* rows whose labels differ in height still line their inputs up */
.grid-bottom{align-items:end}
input[type=text],input[type=number],input[type=email],input[type=password],
input:not([type]){
  height:44px; padding:0 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg); outline:none; width:100%;
}
input:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(13,13,13,.07)}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.field-address input{height:52px; font-size:16px}

/* segmented + quality */
.seg{display:flex; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; height:44px}
.seg button{flex:1; background:var(--bg); border:0; cursor:pointer; font-size:14px; color:var(--ink-3)}
.seg button.on{background:var(--ink); color:#fff}
.quality{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.quality button{
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:7px 8px; cursor:pointer; display:flex; flex-direction:column; gap:1px; align-items:center;
}
.quality button span{font-size:12.5px; font-weight:500; line-height:1.3}
.quality button em{font-style:normal; font-size:10.5px; color:var(--ink-4); line-height:1.3}
.quality button.on{background:var(--ink); border-color:var(--ink); color:#fff}
.quality button.on em{color:rgba(255,255,255,.62)}

.row-between{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.mt16{margin-top:16px}
.checks{display:flex; gap:22px}
.check{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); cursor:pointer; font-weight:400}
.check input{width:16px; height:16px; accent-color:var(--ink)}

.btn{background:var(--ink); color:#fff; border:0; border-radius:999px; height:44px; padding:0 26px;
  font-size:14.5px; font-weight:500; cursor:pointer}
.btn:hover{background:#2a2a2a}
.btn.ghost{background:var(--bg); color:var(--ink); border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--bg-2)}
.btn[disabled]{opacity:.5; cursor:default}

/* suggest */
.suggest{position:absolute; top:78px; left:0; right:0; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-sm); box-shadow:0 10px 34px rgba(0,0,0,.09); z-index:20; overflow:hidden}
.suggest div{padding:11px 14px; cursor:pointer; font-size:14px}
.suggest div:hover{background:var(--bg-2)}
.suggest small{color:var(--ink-4); margin-left:8px}

.error{margin-top:18px; padding:13px 16px; border-radius:var(--r-sm);
  background:#fdf2f1; border:1px solid #f4c7c2; color:var(--neg); font-size:14px}

/* result */
.result{padding:10px 0 40px}
.headline{display:flex; gap:40px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.eyebrow{font-size:13px; color:var(--ink-3); margin-bottom:8px}
.price{font-size:52px; font-weight:600; letter-spacing:-.03em; line-height:1.05}
.sub{margin-top:8px; color:var(--ink-3); font-size:14px}
.headline-range{min-width:290px; flex:1; max-width:420px}
.range-label{font-size:12.5px; color:var(--ink-3); margin-bottom:10px}
/* The bar is a control, so it reads as one: a grab cursor, a padded hit area, and a
   handle big enough to find with a thumb. */
.bar{position:relative; height:8px; background:var(--bg-3); border-radius:99px;
  cursor:grab; touch-action:none; outline:none}
.bar:active{cursor:grabbing}
.bar::after{content:""; position:absolute; inset:-14px 0; }   /* hit area, not ink */
.bar:focus-visible{box-shadow:0 0 0 3px rgba(13,13,13,.14)}
.bar .bar-fill{position:absolute; left:0; top:0; height:100%; border-radius:99px;
  transition:width .12s ease, background .12s ease}
.bar i{position:absolute; top:-3px; width:2px; height:14px; background:var(--line-2);
  border-radius:1px; transform:translateX(-1px)}
.bar b{position:absolute; top:-7px; width:16px; height:22px; border-radius:99px;
  background:var(--ink); border:2px solid var(--bg); transform:translateX(-8px);
  box-shadow:0 1px 4px rgba(0,0,0,.22); transition:left .12s ease, background .12s ease}
.bar.is-off{opacity:.4; pointer-events:none}
.range-hint{font-size:11.5px; color:var(--ink-4); border:1px solid var(--line-2);
  border-radius:99px; padding:1px 7px; margin-left:6px; vertical-align:1px}
/* The selected level sits in the label, where the question is asked, rather than under
   the bar competing with the two range ends. */
.range-sel{font-weight:650; margin-left:2px}
/* Ends of the range, not candidate answers: the level name leads, in small caps and
   muted, and the amount follows it. Reading left to right you get "Médiocre 143 043 €"
   at one end and "Haut de gamme 247 400 €" at the other, which is obviously a scale. */
.range-ends{display:flex; justify-content:space-between; margin-top:10px;
  font-size:12.5px; color:var(--ink-2); gap:12px}
.range-ends i{display:block; font-style:normal; font-size:10.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); margin-bottom:1px}
.range-ends span:last-child{text-align:right}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px}
.stat{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.stat .k{font-size:12.5px; color:var(--ink-3)}
.stat .v{font-size:24px; font-weight:600; letter-spacing:-.02em; margin-top:5px}
.stat .v.pos{color:var(--pos)} .stat .v.neg{color:var(--neg)}
.stat .n{font-size:12px; color:var(--ink-4); margin-top:3px}

.two-col{display:grid; grid-template-columns:1.55fr 1fr; gap:20px; margin-top:20px}
.chart{width:100%}
.chart-sm{height:120px} .chart-lg{height:300px}
.fc{font-size:40px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
.fc.pos{color:var(--pos)} .fc.neg{color:var(--neg)}
.fc-note{color:var(--ink-3); font-size:13.5px; margin-top:6px; margin-bottom:14px}

.longrun{margin-top:20px}
.lr-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.lr-grid .k{font-size:12.5px; color:var(--ink-3)}
.lr-grid .v{font-size:20px; font-weight:600; margin-top:4px; letter-spacing:-.02em}

.cta{margin-top:28px; text-align:center}

/* buy vs rent */
.buyrent{padding:36px 0 60px; border-top:1px solid var(--line); margin-top:44px}
.section-title{font-size:30px; margin-bottom:14px}
/* buy vs rent: grouped inputs */
.sides{display:grid; grid-template-columns:1.35fr 1fr; gap:20px}
@media(max-width:900px){.sides,.detail-cols{grid-template-columns:1fr}}
.side-head{margin-bottom:16px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; min-height:34px}
.side-head h3{font-size:15px; letter-spacing:-.01em}
.side{padding:22px 24px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grid.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-3 > .field{display:grid; grid-template-rows:subgrid; grid-row:span 3; row-gap:7px}
.amt-hint{color:var(--ink-3); font-weight:500}
.grid-note{margin:10px 0 0; font-size:11.5px; color:var(--ink-4)}
/* the qualifying share of the renovation, tucked under the amount it comes out of */
.energy-line{display:flex; align-items:center; gap:10px; margin-top:6px}
.energy-line label{flex:1; font-size:11.5px; color:var(--ink-4); line-height:1.35}
.energy-line input{width:92px; flex:0 0 auto}
a.rent-source{text-decoration:none}
a.rent-source:hover{color:var(--ink-2); text-decoration:underline}
@media(max-width:820px){.grid.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.grid-3{grid-template-columns:1fr}}
/* depreciation sits on one line under the costs, with its note beside the two fields */
.dep-title{font-size:13px; font-weight:600; color:var(--ink); margin:22px 0 14px;
  padding-top:18px; border-top:1px solid var(--line)}
.dep-row{display:flex; align-items:flex-end; gap:18px 24px; flex-wrap:wrap}
.dep-row .field{flex:0 0 auto; width:180px}
.dep-row .detail-note{flex:1 1 280px; margin:0; padding-bottom:2px}
.field-wide{grid-column:1 / -1}
.field-inline{flex-direction:row; align-items:center; gap:12px}
.field-inline input{width:120px}
.assump{margin-top:20px; padding:22px 24px}
.detail-cols{display:grid; grid-template-columns:1.6fr 1fr; gap:32px}
.detail-cols h4{font-size:13px; font-weight:600; margin:0 0 14px; color:var(--ink)}
.detail-cols h4.mt{margin-top:26px}
.detail-note{margin-top:14px; font-size:12.5px; color:var(--ink-4); line-height:1.6}
.run-row{margin-top:20px}
.more.card{margin-top:20px; padding:22px 24px}

/* traffic lights */
.lights{display:flex; flex-direction:column; gap:2px; margin-top:2px}
.light{display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line)}
.light:first-child{border-top:0}
.light i{width:9px; height:9px; border-radius:99px; flex:none; margin-top:5px; background:var(--ink-4)}
.light.negative i{background:#d92d20} .light.neutral i{background:#f0a020}
.light.supportive i{background:#12a150}
.light-main{flex:1; min-width:0}
.light-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.light-top b{font-weight:500; font-size:13.5px}
.light-top .lvl{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.light-sub{font-size:11.5px; color:var(--ink-4); margin-top:2px}
.light-sub .chg{margin-left:6px}

/* chart hover */
svg .hover-line{stroke:var(--ink-4); stroke-width:1; stroke-dasharray:3 3}
svg .hover-dot{fill:var(--ink); stroke:#fff; stroke-width:2}
svg .hover-dot.alt{fill:#c8c8ce}
.tip{position:fixed; z-index:100; display:none; pointer-events:none;
  background:var(--ink); color:#fff; border-radius:10px; padding:10px 12px;
  font-size:12.5px; line-height:1.5; box-shadow:0 8px 26px rgba(0,0,0,.22); min-width:150px}
.tip b{display:block; font-weight:600; margin-bottom:5px; font-size:12px; color:rgba(255,255,255,.62)}
.tip span{display:flex; align-items:center; gap:6px; justify-content:space-between}
.tip span em{font-style:normal; font-weight:600}
.tip .sw{width:8px; height:8px; border-radius:2px; display:inline-block}
.tip .sw.buy{background:#7aa8ff} .tip .sw.rent{background:#f0ad4e}
.tip .t-sub{display:block; margin-top:5px; padding-top:5px; border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.72)}
.tip .t-sub.pos{color:#5fd39a} .tip .t-sub.neg{color:#ff9d94}

.more{border-top:1px solid var(--line); padding-top:18px}
.more summary{cursor:pointer; font-size:13.5px; font-weight:500; color:var(--ink-2); list-style:none;
  display:flex; align-items:center; gap:7px; margin-bottom:2px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+"; color:var(--ink-4); font-size:15px; line-height:1}
.more[open] summary::before{content:"−"}
.more[open] summary{margin-bottom:18px}
.more .check.ravalement{margin-top:16px}

.verdict{margin-top:22px; font-size:17px; line-height:1.6}
.verdict b{font-weight:600}
.legend{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3)}
.legend .k{width:11px; height:11px; border-radius:3px; display:inline-block}
.legend .k.buy{background:var(--buy)} .legend .k.rent{background:var(--rent); margin-left:12px}

/* charts */
.chart svg{display:block; width:100%; overflow:visible}
svg text{font-family:inherit; font-size:11px; fill:var(--ink-4)}
svg .grid-line{stroke:var(--line); stroke-width:1}
svg .axis{stroke:var(--line-2); stroke-width:1}
svg .ln{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
svg .ln.alt{stroke:var(--rent)}
svg .ar{fill:rgba(13,13,13,.05)}

/* The price history. It carries the brand blue and a gradient of the same colour, so the
   fill reads as the line's own weight rather than as a second quantity. */
#chart_hist{color:var(--buy)}
#chart_hist .ln{stroke:currentColor; stroke-width:2.2}
#chart_hist .dot{fill:currentColor}
#chart_hist .dot-halo{fill:#fff; stroke:currentColor; stroke-width:1.5; opacity:.9}
/* where the series started: without it the shape is a wiggle rather than a gain or loss */
#chart_hist .base-line{stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 4}
#chart_hist .end-val{fill:var(--ink); font-size:13px; font-weight:650;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums}
#chart_hist .end-chg{font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums}
#chart_hist .end-chg.pos{fill:var(--pos)} #chart_hist .end-chg.neg{fill:var(--neg)}
svg .ax-y,svg .ax-x{fill:var(--ink-4); font-size:11px}
svg .grid-line{stroke:var(--line)}
svg .dot{fill:var(--ink)}
svg .zero{stroke:var(--line-2); stroke-dasharray:3 3}

.foot{border-top:1px solid var(--line); padding:28px 0 56px; color:var(--ink-4); font-size:12.5px}

@media(max-width:900px){
  .hero h1{letter-spacing:-.03em}
  .grid,.grid-4{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .lr-grid{grid-template-columns:repeat(2,1fr)}
  .quality{grid-template-columns:repeat(2,1fr)}
  .price{font-size:40px}
}

.detail-note.tight{margin:0 0 14px; margin-top:-4px}

/* price basis, real-terms verdict, cash purchase */
.basis{margin-top:12px; font-size:12.5px; color:var(--ink-4); line-height:1.6; max-width:52ch}
.real-note{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.65; color:var(--ink-3)}
.real-note b{font-weight:600}
.real-note.pos b{color:var(--pos)} .real-note.neg b{color:var(--neg)}
.cash-cell{margin-top:14px; padding:14px 16px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r)}
.cash-cell .k{font-size:12.5px; color:var(--ink-3)}
.cash-cell .v{font-size:26px; font-weight:600; letter-spacing:-.02em; margin-top:4px}
.cash-cell .n{font-size:12px; color:var(--ink-4); margin-top:6px; line-height:1.6}

/* readable figures: lining tabular digits so groups line up and 7-figure amounts scan */
.price,.stat .v,.cash-cell .v,.lr-grid .v,.fc,.verdict b,.real-note b,
svg text,.tip em,.tip span{font-variant-numeric:tabular-nums lining-nums}
.price{letter-spacing:-.02em}

.hint{margin-top:7px; font-size:11.5px; color:var(--ink-4); line-height:1.55}
.hint.warn{color:#8a5a12}
.hint b{color:#8a5a12; font-weight:600}

/* the two summary strips sit on the cards' bottom edge, so the mortgage payment and the
   rent land on the same horizontal line whatever the inputs above them do */
.sides{align-items:stretch}
.side{display:flex; flex-direction:column}
.cash-cell{margin-top:auto; display:flex; flex-direction:column}
.cash-cell[hidden]{display:none}
.cash-cell .n{flex:1 0 auto}
.cash-cell .three{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.cash-cell .v.sm{font-size:19px}
.cash-cell .monthly-line{display:flex; align-items:baseline; justify-content:space-between;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
.rent-cell .three .k,.rent-cell .three .v{color:var(--ink-4)}
.rent-cell .three .v.sm{font-weight:400}

/* buyer / renter recap */
.recap{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px}
/* with the comparison off there is only one column of recap, and a half-width card
   floating beside empty space reads as a loading state */
.recap.solo{grid-template-columns:1fr}

/* The comparison switch sits above the verdict it governs, quiet enough not to compete
   with it: this is a view setting, not a parameter of the model. */
/* The sample sits under the export row, where someone who has just been refused the
   PDF will already be looking. */
/* The plan card leads the account page, because it is the one row on it that can
   change what the account may do. */
.plan-card{margin-bottom:20px}
.plan-badge{font-size:12px; font-weight:650; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-2); background:var(--bg-3); border:1px solid var(--line);
  border-radius:99px; padding:4px 12px; white-space:nowrap}
.plan-card.is-paid .plan-badge{background:var(--ink); color:#fff; border-color:var(--ink)}
.upgrade-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
.upgrade-row .muted{font-size:12.5px}

.saved-upsell{margin:14px 0 0; padding:12px 14px; border-radius:10px;
  background:var(--bg-3); border:1px solid var(--line); font-size:13.5px;
  color:var(--ink-2); line-height:1.55}
.saved-upsell b{color:var(--ink)}
.acc-saved-link{margin:0 0 20px}

.sample-line{margin:10px 2px 0; font-size:13px; color:var(--ink-3); line-height:1.55}
.sample-line a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
/* a refused click should land the eye on the sample, not merely scroll to it */
.sample-line.flash{animation:sample-flash 1.6s ease-out}
@keyframes sample-flash{0%,100%{background:transparent}
  12%{background:rgba(31,111,235,.12)} 70%{background:rgba(31,111,235,.12)}}
.pdf-tag{font-size:11px; font-weight:650; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-2); background:var(--bg-3); border:1px solid var(--line);
  border-radius:99px; padding:2px 9px}

.compare-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:22px 0 -6px; padding:0 2px}
.compare-row .hint{font-size:12.5px; color:var(--ink-3); margin:0}
@media (max-width:620px){.compare-row .hint{flex:1 0 100%}}
.rc h3{font-size:15px; margin-bottom:6px}
.rc-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:12px 0; border-top:1px solid var(--line)}
.rc-k{font-size:13.5px; color:var(--ink-2)}
.rc-n{display:block; font-size:11.5px; color:var(--ink-4); margin-top:4px; line-height:1.55}
.rc-v{font-size:20px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.rc-row.total{border-top:1.5px solid var(--ink); align-items:baseline}
.rc-row.total .rc-k{font-weight:600; color:var(--ink)}
.rc-row.total .rc-v{font-size:24px}

/* cashflow chart */
.cf-card{margin-top:20px}
.cf-toggles{display:flex; gap:18px}
.legend .k.d{background:none!important; border-top:2px dashed var(--buy); border-radius:0;
  width:14px; height:0; align-self:center}
.legend .k.d.rent{border-top-color:var(--rent)}
svg .ln.dash{stroke-dasharray:5 4}

@media(max-width:900px){ .recap{grid-template-columns:1fr} }

/* financing mode: a two-way choice, not a checkbox */
.seg.small{height:34px; width:auto; flex:0 0 auto}
.seg.small button{padding:0 14px; font-size:13px; flex:0 0 auto; white-space:nowrap}

/* amount fields carry grouped figures, so their digits need to line up too */
input.money{font-variant-numeric:tabular-nums lining-nums}
input:disabled{background:var(--bg-2); cursor:not-allowed}

/* ── pages ─────────────────────────────────────────────────────────── */
.view[hidden]{display:none}
.nav-links a.needs-est{opacity:.38; pointer-events:none}
.nav-links a.needs-est.ready{opacity:1; pointer-events:auto}
.back{display:inline-block; margin:30px 0 22px; font-size:13.5px; color:var(--ink-3);
  text-decoration:none}
.back:hover{color:var(--ink)}
.page-title{font-size:38px; line-height:1.12; letter-spacing:-.02em}
#view_forecast .lede,#view_buyrent .lede{margin-bottom:26px}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ── forecast ──────────────────────────────────────────────────────── */
.fc-card{margin-bottom:20px}
.fc-teaser{color:var(--ink-3); font-size:14.5px; line-height:1.65; max-width:64ch;
  margin:2px 0 18px}
.fc-headline{margin-bottom:16px}
.disclaimer{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-4); line-height:1.6; max-width:78ch}
/* the lights lose their per-driver detail: direction is the whole message */
#r_lights{flex-direction:row; flex-wrap:wrap; gap:8px}
#r_lights .light{border-top:0; padding:7px 12px 7px 10px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:99px; align-items:center; gap:8px}
#r_lights .light i{margin-top:0}
#r_lights .light b{font-weight:500; font-size:13px}

/* 25-year: one line, coloured */
.lr-line{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; padding:4px 0 2px}
.lr-item{display:flex; flex-direction:column; gap:3px}
.lr-item .k{font-size:12.5px; color:var(--ink-3)}
.lr-item b{font-size:32px; font-weight:600; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums}
.lr-item b.pos{color:var(--pos)} .lr-item b.neg{color:var(--neg)}
.lr-op{font-size:19px; color:var(--ink-4); padding-bottom:6px}

/* condition tooltip: a list, not a key/value row */
.tip .t-li{display:list-item; list-style:disc; margin-left:14px; padding-left:2px;
  justify-content:flex-start; line-height:1.5; margin-top:3px}

/* ── one spacing rhythm for every stacked box ──────────────────────────
   Blocks inside a page are 20px apart, whatever they are, and every page ends 48px
   above the footer rule. */
.result .wrap > *,
#view_forecast .wrap > .card,
#view_forecast .wrap > .cta,
#view_buyrent .wrap > *{margin-top:20px}
.result .wrap > *:first-child,
#view_buyrent .wrap > *:first-child{margin-top:0}
#view_buyrent .wrap > .back,
#view_buyrent .wrap > .page-title,
#view_buyrent .wrap > .lede,
#view_forecast .wrap > .back,
#view_forecast .wrap > .page-title,
#view_forecast .wrap > .lede{margin-top:0}
/* room above the footer rule - but only at the END of a page, not on the hero's
   wrap, which sits mid-page above the result */
#view_forecast .wrap,#view_buyrent .wrap,#view_assets .wrap,.result .wrap{padding-bottom:48px}
.cta{margin-top:28px; margin-bottom:0}

/* ── these read better filling their box than wrapped at a text measure ── */
.disclaimer{max-width:none}
#view_forecast .lede,#view_buyrent .lede{max-width:none; margin-bottom:0}
.fc-teaser{max-width:none}

/* ── side cards: keep the summary strip clear of the inputs above it ──── */
.side .grid{margin-bottom:20px}
.cash-cell .three{margin-bottom:2px}

/* ── exit assumption ──────────────────────────────────────────────────── */
.exit-card{padding:16px 20px; background:var(--bg-2); border-color:var(--line-2)}
.exit-card .side-head{margin-bottom:12px; min-height:0; flex-wrap:wrap; gap:6px 16px}
#bl_result .exit-card{margin-top:20px}
.exit-row{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap}
.exit-row .field{flex:0 0 auto; width:200px}
.exit-row .field.w-sm{width:120px}
.exit-row .field.w-md{width:150px}
.exit-eq{font-size:19px; color:var(--ink-4); padding-bottom:12px}
.exit-note{flex:0 1 auto; font-size:12.5px; color:var(--ink-4); line-height:1.6;
  padding-bottom:11px; margin-right:auto}
/* what a visitor is missing here: the 25-year forecast fills this box in. It rides in
   the resale row itself - in the buy blue, the only coloured button on the page, but
   taking no line of its own so the box keeps its height. */
.exit-tease{flex:0 0 auto; display:flex; align-items:center; padding-bottom:11px}
.exit-tease .btn{height:36px; padding:0 16px; font-size:13.5px; white-space:nowrap;
  background:var(--buy); box-shadow:0 2px 6px rgba(31,111,235,.30)}
.exit-tease .btn:hover{background:#1a5fd0}

/* the result blocks are one level deeper than the wrap rule reaches, so give them the
   same rhythm: the net-worth chart was sitting flush against the verdict */
#br_result > * + *{margin-top:20px}
.verdict{margin-top:0}
/* .detail-note.tight pulls itself up under a heading; under a chart it needs the
   opposite, or it collides with the x-axis labels */
#cf_note{margin-top:18px; margin-bottom:0}

/* ── long-run asset returns ────────────────────────────────────────────── */
#view_assets .wrap > *{margin-top:20px}
#view_assets .wrap > .back,#view_assets .wrap > .page-title,
#view_assets .wrap > .warn-line,#view_assets .wrap > .lede{margin-top:0}
#view_assets .lede{max-width:none}
#as_recap{grid-template-columns:repeat(3,1fr)}
.k-dot{width:9px; height:9px; border-radius:99px; display:inline-block; margin-right:7px}
.rc-v small{font-size:13px; font-weight:400; color:var(--ink-3); margin-left:2px}
.rc-v.neg{color:var(--neg)}
.src-row{display:flex; justify-content:space-between; gap:24px; padding:12px 0;
  border-top:1px solid var(--line); font-size:12.5px; line-height:1.6}
.src-row:first-child{border-top:0; padding-top:0}
.src-row b{font-weight:600; display:block}
.src-row span{color:var(--ink-4)}
.src-lic{text-align:right; color:var(--ink-3); white-space:nowrap; flex:none}
.src-lic em{display:block; font-style:normal; color:var(--ink-4); font-size:11.5px}
.field-inline .hint a{color:var(--ink-2)}
@media(max-width:900px){ #as_recap{grid-template-columns:1fr} .src-row{flex-direction:column; gap:4px}
  .src-lic{text-align:left} }

.footnote{font-size:11px; color:var(--ink-4); line-height:1.65; padding-top:14px;
  border-top:1px solid var(--line)}
.assump .row-between{align-items:center; gap:20px; flex-wrap:wrap}
.assump .btn.ghost{flex:none; white-space:nowrap}

.warn-line{margin-top:12px; font-size:13px; font-weight:500; color:var(--neg)}

.lights-key{font-size:11.5px; color:var(--ink-4); margin-bottom:10px}

/* the two buy-vs-rent charts carry the colour; the history chart stays ink, because one
   series needs no key */
#chart_nw .ln,#chart_cf .ln{stroke:var(--buy)}
#chart_nw .ln.alt,#chart_cf .ln.alt{stroke:var(--rent)}
#chart_nw .ar-buy{fill:var(--buy-soft)}
#chart_nw .ar-rent{fill:var(--rent-soft)}
#chart_nw .hover-dot{fill:var(--buy)} #chart_nw .hover-dot.alt{fill:var(--rent)}
#chart_cf .hover-dot{fill:var(--buy)} #chart_cf .hover-dot.alt{fill:var(--rent)}
svg .cross{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:4 4}
svg text.cross-label{fill:var(--ink-3); font-size:11px}
.rc h3 .k-dot{vertical-align:middle}

/* buy to let: the property in the buy colour, the portfolio in the rent colour, each
   area tinted rather than filled */
#chart_bl .ln{stroke:var(--buy)} #chart_bl .ln.alt{stroke:var(--rent)}
#chart_bl .ar-buy{fill:rgba(31,111,235,.16)}
#chart_bl .ar-rent{fill:rgba(217,119,6,.16)}
#chart_bl .hover-dot{fill:var(--buy)} #chart_bl .hover-dot.alt{fill:var(--rent)}

.exit-explain{margin:0; font-size:12.5px; color:var(--ink-4)}
.export-row{display:flex; align-items:center; justify-content:flex-end; gap:10px;
  margin-top:20px; flex-wrap:wrap}

#chart_cf .ar-buy{fill:var(--buy-soft)}
#chart_cf .ar-rent{fill:var(--rent-soft)}
#chart_cf .ar-buy.faint{fill:rgba(31,111,235,.05)}
#chart_cf .ar-rent.faint{fill:rgba(217,119,6,.05)}
.cf-sep{padding-left:18px; border-left:1px solid var(--line); margin-left:2px}

/* ── the two hues, carried off the charts into the boxes that mean the same thing ──
   Used only where a box belongs to one side or the other; assumptions and inputs that
   serve both stay neutral, or the page turns into a colour chart. */
.k-dot.buy{background:var(--buy)} .k-dot.rent{background:var(--rent)}
.side-head h3 .k-dot,.detail-cols h4 .k-dot{vertical-align:middle}

.loan-cell,#br_cash_cell{border-left:3px solid var(--buy); background:var(--buy-soft)}
.rent-cell{border-left:3px solid var(--rent); background:var(--rent-soft)}
.loan-cell .n,#br_cash_cell .n,.rent-cell .n{color:var(--ink-3)}

.verdict{border-left:3px solid var(--line-2)}
.verdict.won-buy{border-left-color:var(--buy); background:var(--buy-soft)}
.verdict.won-rent{border-left-color:var(--rent); background:var(--rent-soft)}
.verdict.won-buy .gap{color:var(--buy)}
.verdict.won-rent .gap{color:var(--rent)}

.rc h3 .k-dot{vertical-align:middle}

/* the asset legend doubles as a filter */
#as_legend{flex-wrap:wrap; gap:0}
#as_legend .lg{display:inline-flex; align-items:center; gap:7px; background:none; border:0;
  padding:4px 12px 4px 0; font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer}
#as_legend .lg:hover{color:var(--ink)}
#as_legend .lg.off{color:var(--ink-4)}
#as_legend .lg.off .k{opacity:.25}
#as_legend .lg.off{text-decoration:line-through}
.rc.off{opacity:.45}
@media(max-width:1100px){ #as_recap{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px){ #as_recap{grid-template-columns:1fr} }

.recap-head{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap}
.recap-head h2{font-size:19px}
#as_basis_note{margin-top:8px; font-size:12px; line-height:1.6}
#view_assets .wrap > #as_basis_note{margin-top:8px}
#view_assets .wrap > .recap{margin-top:14px}

#as_legend{margin-bottom:12px}

/* characteristics panel */
.go-row{display:flex; gap:10px; align-items:center}
/* the two buttons do not fit side by side on a phone */
@media (max-width:560px){
  .go-row{flex-wrap:wrap}
  .go-row .btn{flex:1 1 auto}
  /* a long label on a pill cannot stay on one line at this width */
  .row-between > .btn{min-width:0; max-width:100%; white-space:normal; height:auto;
    padding:10px 18px; line-height:1.35}
}
.details-panel{border:1px solid var(--line); border-radius:var(--r); padding:20px 22px;
  background:var(--bg-2); text-align:left}
.dp-head{margin-bottom:16px}
.dp-note{display:block; margin-top:6px; font-size:12px; color:var(--ink-4); line-height:1.6}
.seg.small.wide{width:100%; height:38px}
.seg.small.wide button{flex:1; padding:0 8px; font-size:12.5px}
.dp-checks{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 18px; margin-top:16px}
@media(max-width:900px){ .dp-checks{grid-template-columns:repeat(2,1fr)} }

/* calls to action: right under the price, where the decision is actually being made */
.cta-top{margin-top:18px; justify-content:flex-start}
.btn svg{flex:none; width:16px; height:16px; margin-right:9px; opacity:.75}
.btn{display:inline-flex; align-items:center; justify-content:center; white-space:nowrap}
/* an icon plus a nowrap label needs the box sized to its content, or the
   pill stays at the old text-wrapped width and the label spills out */
.cta .btn{flex:0 0 auto}
.btn{min-width:max-content}
.btn.ghost{background:var(--bg-2); border-color:var(--line-2); font-weight:500}
.btn.ghost:hover{background:var(--bg-3); border-color:var(--ink-4); color:var(--ink)}
.btn.ghost:hover svg{opacity:1}

/* the price card carries the same treatment as the mortgage box, in plain ink */
.headline.card{background:var(--price-soft); border-left:3px solid var(--ink)}

/* each call to action wears the colour of the page it opens - on the fill and the icon,
   never on the label, which stays ink so it reads as text rather than a link */
.btn.ghost[data-go]{color:var(--ink)}
.btn.ghost[data-go] svg{opacity:1}
.btn.ghost[data-go="forecast"]{background:rgba(15,122,79,.10); border-color:var(--pos)}
.btn.ghost[data-go="forecast"]:hover{background:rgba(15,122,79,.18)}
.btn.ghost[data-go="forecast"] svg{stroke:var(--pos)}
.btn.ghost[data-go="buyrent"]{background:var(--buy-soft); border-color:var(--buy)}
.btn.ghost[data-go="buyrent"]:hover{background:rgba(31,111,235,.18)}
.btn.ghost[data-go="buyrent"] svg{stroke:var(--buy)}
.btn.ghost[data-go="assets"]{background:var(--rent-soft); border-color:var(--rent)}
.btn.ghost[data-go="assets"]:hover{background:rgba(217,119,6,.18)}
.btn.ghost[data-go="assets"] svg{stroke:var(--rent)}

/* ── buy to let ────────────────────────────────────────────────────────── */
.yields{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.yields .y{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px}
.yields .y .k{font-size:12.5px; color:var(--ink-3)}
.yields .y .v{font-size:26px; font-weight:600; letter-spacing:-.02em; margin-top:5px;
  font-variant-numeric:tabular-nums lining-nums}
.yields .y .n{font-size:11.5px; color:var(--ink-4); margin-top:4px; line-height:1.55}
.yields .y.neg .v{color:var(--neg)} .yields .y.pos .v{color:var(--pos)}
.yields .y.infl{background:none; border-style:dashed}
.yield-note{margin:12px 2px 0; font-size:12.5px; line-height:1.6; color:var(--ink-3)}
.yield-note b{color:var(--ink-2); font-weight:600}
.yield-flag{margin-top:14px; padding:12px 16px; border-radius:var(--r);
  border-left:3px solid var(--neg); background:rgba(217,48,37,.07); font-size:13.5px;
  line-height:1.55; color:var(--ink-2)}
.yield-flag b{color:var(--neg)}
.cf-box{margin-top:20px; padding:18px 20px}
.cf-box h3{margin:0 0 12px; font-size:15px}
.cf-link{display:inline-block; margin-top:12px; font-size:13px; font-weight:600;
  color:var(--accent); text-decoration:none}
.cf-link:hover{text-decoration:underline}
/* the surplus options, collapsed under the net-worth chart */
#bl_surplus_more{margin-top:20px}
.surplus-grid{display:grid; grid-template-columns:1fr auto; gap:18px 24px; align-items:end}
.surplus-grid>*{min-width:0}
@media (max-width:720px){
  .surplus-grid{grid-template-columns:1fr}
  /* three long labels have no room side by side on a phone: stack them */
  #bl_surplus{height:auto; flex-wrap:wrap}
  #bl_surplus button{flex:1 1 100%; padding:9px 10px; white-space:normal}
}
.cf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.cf-grid .k{font-size:12.5px; color:var(--ink-3)}
.cf-grid .v{font-size:24px; font-weight:600; letter-spacing:-.02em; margin-top:4px;
  font-variant-numeric:tabular-nums}
.cf-grid .v.pos{color:var(--pos)} .cf-grid .v.neg{color:var(--neg)}
.cf-grid .n{font-size:11.5px; color:var(--ink-4); margin-top:3px}
@media (max-width:720px){.cf-grid{grid-template-columns:1fr}}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:12.5px;
  font-variant-numeric:tabular-nums lining-nums}
.tbl th{text-align:right; font-weight:500; color:var(--ink-3); padding:8px 10px;
  border-bottom:1px solid var(--line-2); white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{text-align:right; padding:7px 10px; border-bottom:1px solid var(--line);
  white-space:nowrap}
.tbl tr:hover td{background:var(--bg-2)}
.tbl td.neg{color:var(--neg)} .tbl td.pos{color:var(--pos)}
.tbl td.sub{color:var(--ink-4); font-size:.92em}
.btn.ghost[data-go="buytolet"]{background:rgba(124,58,237,.10); border-color:#7c3aed}
.btn.ghost[data-go="buytolet"]:hover{background:rgba(124,58,237,.18)}
.btn.ghost[data-go="buytolet"] svg{stroke:#7c3aed}
#view_buytolet .wrap{padding-bottom:48px}
#view_buytolet .wrap > *{margin-top:20px}
#view_buytolet .wrap > .back,#view_buytolet .wrap > .page-title,
#view_buytolet .wrap > .lede{margin-top:0}
#view_buytolet .lede{max-width:none}
#bl_result > * + *{margin-top:20px}
@media(max-width:900px){ .yields{grid-template-columns:repeat(2,1fr)} }

/* ── accounts ─────────────────────────────────────────────────────── */
.nav-auth{display:flex; align-items:center; gap:10px; font-size:14px}
.nav-auth .btn{height:34px; padding:0 16px; font-size:13.5px}
.nav-auth .who{color:var(--ink-2); white-space:nowrap}
.nav-auth .link{background:none; border:0; color:var(--ink-3); cursor:pointer; padding:0}
.nav-auth .link:hover{color:var(--ink)}

.modal{position:fixed; inset:0; z-index:100; background:rgba(13,13,13,.42);
  display:flex; padding:20px; overflow-y:auto}
/* auto margins centre the card, and still let a short screen scroll to its top */
.modal-card{position:relative; margin:auto; width:100%; max-width:440px; background:var(--bg);
  border-radius:var(--r); padding:30px 28px 24px; box-shadow:0 24px 60px rgba(0,0,0,.22)}
.modal-card form{display:flex; flex-direction:column; gap:14px}
.modal-card h2{font-size:21px}
.modal-card input:not([type="checkbox"]){width:100%}
.modal-why{color:var(--ink-3); font-size:13.5px; margin-top:-6px}
.modal-why:empty{display:none}
.modal-x{position:absolute; top:12px; right:14px; width:32px; height:32px; border:0;
  background:none; font-size:22px; line-height:1; color:var(--ink-3); cursor:pointer; border-radius:8px}
.modal-x:hover{background:var(--bg-2); color:var(--ink)}
.modal-switch{font-size:13.5px; color:var(--ink-3); text-align:center}
.modal-switch a{color:var(--ink); font-weight:500}
.form-err{font-size:13px; color:var(--neg); background:rgba(180,35,24,.07);
  border-radius:var(--r-sm); padding:9px 12px}
input.invalid{border-color:var(--neg)!important}

/* what an account unlocks, shown where the content would be */
.lock-card{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px;
  padding:18px 20px; border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--bg-2)}
.lock-card .lk-ico{flex:none; width:36px; height:36px; border-radius:50%; display:grid;
  place-items:center; background:var(--bg); border:1px solid var(--line)}
.lock-card .lk-ico svg{width:16px; height:16px}
.lock-card .lk-text{flex:1; min-width:220px}
.lock-card .lk-text b{display:block; font-weight:600}
.lock-card .lk-text span{color:var(--ink-3); font-size:13.5px}
.lock-card .lk-actions{display:flex; gap:8px; align-items:center}
.lock-card .btn{height:38px; padding:0 18px}
.lock-row td{text-align:center!important; padding:16px!important; background:var(--bg-2)}
.lock-row .btn{height:36px}

/* options an account unlocks carry a small padlock */
.seg button.locked{color:var(--ink-4)}
.seg button.locked::after{content:""; display:inline-block; width:10px; height:10px;
  margin-left:6px; vertical-align:-1px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── saved properties and the account page ───────────────────────────── */
.save-wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.save-btn.is-saved{border-color:var(--pos); background:rgba(15,122,79,.08)}
.save-btn.is-saved svg{fill:var(--pos); stroke:var(--pos); opacity:1}
.save-status{font-size:13px; color:var(--ink-3)}
.save-status.err{color:var(--neg)}
.save-status a{color:var(--ink)}
.cta-top .save-wrap{margin-right:auto}

.nav-auth a.who{color:var(--ink-2); text-decoration:none}
.nav-auth a.who:hover,.nav-auth a.who.active{color:var(--ink); text-decoration:underline;
  text-underline-offset:3px}

#view_account .lede.small{margin:8px 0 26px}
.acc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px}
.acc-card{padding:26px 28px}
.acc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.acc-head h2{font-size:17px}
.acc-sub{color:var(--ink-3); font-size:13.5px; margin-top:3px}
.acc-form{display:flex; flex-direction:column; gap:16px}
.acc-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.acc-form .field{gap:6px}
.acc-form label{color:var(--ink-2)}
.acc-form input{height:46px; font-size:15px; background:var(--bg)}
.acc-actions{display:flex; justify-content:flex-end; padding-top:4px}
.acc-grid .acc-card{display:flex; flex-direction:column}
.acc-grid .acc-form{flex:1}
.acc-grid .acc-actions{margin-top:auto}
@media (max-width:520px){.acc-row{grid-template-columns:1fr}}
.acc-foot{margin:24px 0 48px}
.form-ok{font-size:13px; color:var(--pos); background:rgba(15,122,79,.08);
  border-radius:var(--r-sm); padding:9px 12px}
@media (max-width:760px){.acc-grid{grid-template-columns:1fr}}

.saved-list{display:flex; flex-direction:column}
.saved-item{display:flex; align-items:center; gap:16px; padding:14px 0;
  border-top:1px solid var(--line)}
.saved-item:first-child{border-top:0; padding-top:0}
.saved-item .si-main{flex:1; min-width:0}
.saved-item .si-name{font-weight:600; color:var(--ink); text-decoration:none;
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.saved-item .si-name:hover{text-decoration:underline; text-underline-offset:3px}
.saved-item .si-meta{font-size:13px; color:var(--ink-3)}
.si-top{display:flex; align-items:center; gap:10px; min-width:0}
.kind{flex:none; font-size:11.5px; font-weight:600; letter-spacing:.01em; padding:3px 9px;
  border-radius:999px; border:1px solid}
.kind-buytolet{color:#6d28d9; background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.35)}
.kind-buyrent{color:#1a5fd0; background:var(--buy-soft); border-color:rgba(31,111,235,.35)}
.si-figs{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:6px; font-size:13px; color:var(--ink-3)}
.si-figs b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.si-figs b.pos{color:var(--pos)} .si-figs b.neg{color:var(--neg)}
.saved-item .si-actions{display:flex; gap:8px}
.saved-item .btn{height:36px; padding:0 16px}
a.btn{text-decoration:none}
.saved-empty{color:var(--ink-3); font-size:14px}

/* ── legal pages, sources, account data ───────────────────────────────── */
.foot-links{display:flex; gap:18px; margin-top:10px; font-size:13px}
.foot-links a{color:var(--ink-3)} .foot-links a:hover{color:var(--ink)}
.legal .wrap{max-width:780px; padding-bottom:64px}
.legal h2{font-size:18px; margin:30px 0 10px}
/* Justified here and nowhere else: long uniform paragraphs in a 780 px measure are
   the case justification was made for. Hyphenation keeps the word gaps from opening
   into rivers, and text-wrap:pretty stops a last line of one word. */
.legal p{margin:0 0 10px; color:var(--ink-2); line-height:1.65;
  text-align:justify; text-justify:inter-word; hyphens:auto; text-wrap:pretty}
.legal p:lang(fr){hyphenate-limit-chars:7 3 3}

/* A heading or a lede that wraps should split its lines evenly instead of running the
   first one full and leaving one word below it. */
.page-title,.lede,.card-head h2,.side-head h3{text-wrap:balance}
/* short one-line notes look broken when stretched */
.legal .lede, .legal .data-what, .legal .back{text-align:left; hyphens:manual}
@media (max-width:620px){.legal p{text-align:left}}
.legal a{color:var(--ink)}
.legal .lede.small{margin:6px 0 18px}
.draft-banner{margin:14px 0 8px; padding:12px 16px; border-radius:var(--r);
  border-left:3px solid var(--rent); background:var(--rent-soft); font-size:14px; color:var(--ink-2)}
.sources{margin:0}
.sources dt{font-weight:600; margin-top:14px}
.sources dd{margin:3px 0 0; color:var(--ink-2); line-height:1.6}
.terms-check{align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.terms-check input{margin-top:3px; flex:none; width:16px; height:16px}
.terms-check a{color:var(--ink)}
.acc-actions-left{justify-content:flex-start}
.acc-links{margin-top:14px}
.rent-source{display:block; color:var(--ink-4); font-size:11.5px; margin-top:2px}

/* privacy: one card per kind of data, three labelled facts each */
.data-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:14px 0 18px}
.data-card{border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; background:var(--bg)}
.data-card h3{font-size:15px; margin:0 0 4px}
.legal .data-card .data-what{font-size:13.5px; color:var(--ink-3); margin:0 0 12px; line-height:1.5}
.data-card dl{margin:0; display:flex; flex-direction:column; gap:6px}
.data-card dl div{display:grid; grid-template-columns:92px 1fr; gap:10px; font-size:13.5px}
.data-card dt{color:var(--ink-4); font-weight:500}
.data-card dd{margin:0; color:var(--ink-2)}
@media (max-width:640px){.data-cards{grid-template-columns:1fr}}
.foot-links a[href^="mailto:"]{color:var(--ink-2); font-weight:500}

/* the header carries logo, links and account; keep air between them on narrower screens */
.nav-in{gap:16px}
/* the brand and the two right-hand groups keep their size; only the links give way */
.brand,.lang-switch,.nav-auth{flex:0 0 auto}
@media (max-width:1140px){.nav-links{gap:0} .nav-links a{font-size:12.5px; padding:5px 7px}
  .nav-auth{gap:8px}
  /* a full name is the longest thing in the bar and the least load-bearing */
  .nav-auth .who{max-width:13ch; overflow:hidden; text-overflow:ellipsis}}
/* Below this the five links cannot share a row with the brand, the language switch and
   the account, so they take a row of their own. Measured, not guessed: at 1024 the bar
   still fits exactly, at 1010 it was 2 px short and at 900 it overflowed by 127. The
   threshold sits above the measured edge, not on it, because the account name on the
   right is a different length for every visitor. */
@media (max-width:1060px){
  .nav-in{flex-wrap:wrap; height:auto; padding:10px 0; gap:10px 12px}
  .nav-auth{margin-left:auto}
  .nav-auth .btn{height:32px; padding:0 12px; font-size:13px}
  .nav-links{order:3; flex:1 0 100%; gap:2px; overflow-x:auto; scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
}

/* password requirements, ticking as they are met */
.pw-rules{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px;
  font-size:12.5px; color:var(--ink-4)}
.pw-rules li::before{content:"○"; margin-right:5px}
.pw-rules li.met{color:var(--pos)}
.pw-rules li.met::before{content:"✓"}

/* account deletion: available, but not an invitation */
.acc-single{margin-top:20px}
.acc-foot{display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:24px 0 12px}
.link-quiet{background:none; border:0; padding:0; font-size:12.5px; color:var(--ink-4);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.link-quiet:hover{color:var(--ink-3)}
.acc-delete{margin:0 0 48px auto; max-width:420px; font-size:13px; color:var(--ink-3)}
.acc-delete p{margin:0 0 10px; line-height:1.5}
.acc-delete-row{display:flex; gap:8px}
.acc-delete-row input{height:38px; flex:1; font-size:14px}
.btn-quiet-danger{background:none; border:1px solid var(--line-2); color:var(--neg);
  border-radius:var(--r-sm); padding:0 14px; font-size:13px; cursor:pointer; white-space:nowrap}
.btn-quiet-danger:hover{border-color:var(--neg)}
.acc-delete .form-err{margin-top:8px}
.acc-links a{color:var(--ink-2)} .acc-links a:hover{color:var(--ink)}

.tax-notes{margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-3); line-height:1.5}
.tax-notes li + li{margin-top:4px}

.cgt-card{margin-top:20px}
.cgt-both{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.cgt-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 36px}
.cgt-row{display:flex; justify-content:space-between; gap:16px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:14px}
.cgt-row b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.cgt-row.sub span{color:var(--ink-3); padding-left:12px}
.cgt-row.total{border-bottom:0; border-top:1px solid var(--ink-4)}
.cgt-row.total span,.cgt-row.total b{font-weight:600}
@media (max-width:760px){.cgt-grid{grid-template-columns:1fr}}

/* which series are carried flat past their last published reading */
.held-note { margin-top: 6px; font-size: 12.5px; line-height: 1.5; }
.held-note b { color: var(--ink-2); font-weight: 600; }

/* the verdict's own link sits on a tinted card, so it needs its own weight */
.verdict .cf-link { margin-top: 10px; opacity: .85; }
.verdict .cf-link:hover { opacity: 1; }

/* FR / EN switch in the header. Small and quiet: the default is right for almost
   everyone, so it should be findable without competing with the navigation. */
.lang-switch { display:flex; gap:2px; margin-left:auto; margin-right:14px;
  border:1px solid var(--line-2); border-radius:99px; padding:2px; }
.lang-switch button { border:0; background:none; cursor:pointer; border-radius:99px;
  padding:3px 9px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-4); font-family:inherit; }
.lang-switch button:hover { color:var(--ink-2); }
.lang-switch button.on { background:var(--ink); color:#fff; }
@media (max-width:680px) { .lang-switch { margin-right:8px; } }