/* ============================================================================
   Farul, the shared stylesheet.

   Lifted verbatim out of the <style> block in index.html on 25 August 2026,
   when the calculator moved to its own page and two pages needed the same
   design. One copy, so the two cannot drift apart.

   THE GOOGLE FONTS @import IS NOT HERE ANY MORE. It was the first line of this
   block, which meant the browser had to fetch and parse this file before it
   even learned the fonts existed. It is a <link> in each page's <head> now, one
   round trip earlier, and visible in the HTML rather than buried in CSS: it is
   this site's only third party request and it should be somewhere a person
   looking at the page can see it.

   The page specific patches, the reveal animation and the phone mockups, stay
   inline in index.html. They belong to the homepage and the calculator page
   does not use them.
   ============================================================================ */

  :root{
    /* professional, calm , blues lifted with a light tint background like FreeAgent/Xero */
    --navy:#0E2A47;--navy-2:#15395f;--blue:#2563B0;--blue-bright:#3B82D6;
    --sky:#EAF1FB;--sky-2:#F4F8FD;
    --beam:#F2B433;--beam-soft:#FBE3A0;
    --bg:#FBFCFE;--surface:#FFFFFF;
    /* --ink-3 darkened from #6B7C8F (4.17:1 on the page background, under the
       WCAG AA 4.5 floor for small text) to #5F7185 (4.89:1). It carries the
       hero's "not a guarantee" qualifier and the reviews placeholder, and a
       qualifier nobody can read is not a qualifier. */
    --ink:#0E2A47;--ink-2:#3F5267;--ink-3:#5F7185;--ink-faint:#667586;
    --line:#E5EBF1;--line-2:#EEF2F7;
    --clear:#1F9D6B;
    --r:16px;--r-lg:24px;--r-xl:32px;
    --sh-sm:0 2px 8px rgba(14,42,71,.05);
    --sh:0 12px 32px -12px rgba(14,42,71,.16);
    --sh-lg:0 30px 70px -24px rgba(14,42,71,.30);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
  @media(max-width:600px){.wrap{padding:0 20px}}

  /* NAV */
  nav{position:sticky;top:0;z-index:60;background:rgba(251,252,254,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{display:flex;align-items:center}
  /* The real wordmark (src/assets/farul-wordmark.svg in the app repo), inlined
     rather than linked because this page is a standalone file. The SVG paths use
     fill:currentColor, so colour comes from `color` here. Amber everywhere, which
     is the app's rule: one consistent mark rather than a per-surface tone.
     Replaces the old CSS drawn lamp dot plus "Farul" set in Fraunces. */
  .wordmark{display:inline-flex;align-items:center;color:var(--beam);line-height:0}
  /* The mark is about 2.28:1, so height drives width. Each placement sets its
     own height, the same approach the app uses. */
  .wordmark svg{display:block;height:22px;width:auto;aspect-ratio:876/385}
  .foot-brand .wordmark svg{height:26px}
  .nav-links{display:flex;align-items:center;gap:34px;font-size:15px;font-weight:500;color:var(--ink-2)}
  .nav-links a:not(.btn):hover{color:var(--navy)}
  .nav-right{display:flex;align-items:center;gap:22px}
  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;border-radius:100px;transition:transform .15s,box-shadow .2s,background .2s;cursor:pointer;border:0}
  .btn-primary{background:var(--navy);color:#fff;padding:12px 22px;font-size:15px;box-shadow:0 8px 20px -8px rgba(14,42,71,.5)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(14,42,71,.6)}
  .btn-lg{padding:16px 30px;font-size:16.5px}
  .link-login{font-size:15px;font-weight:600;color:var(--navy)}
  /* THE LANGUAGE SWITCH, added 15 September 2026 with the English page.

     IT NAMES THE OTHER LANGUAGE, not the current one. A RO/EN pair with one of
     them lit is four characters plus a state to read, and the nav above is
     already fitting 335px into 335px on a small phone. One two letter pill that
     says where it goes needs no state and no explanation.

     A PILL, NOT A LINK, because it sits beside a link (.link-login) and a
     button, and a third bare link there reads as a second sign in. Outlined
     rather than filled: .btn-primary next to it is the thing to press.

     --ink-2 on --bg is 8.4:1 IN THE HEADER, which is where this was designed and
     the only place it was checked. The border is --line, decoration, no meaning.

     THE FOOTER IS A DIFFERENT GROUND AND THE FIRST VERSION FORGOT IT. The same
     rule was left to apply there, putting --ink-2 on --navy at 1.81:1, which is
     barely a shade darker than the background it sits on. Written and shipped
     on 15 September 2026, found the same evening by running axe over the new
     English page, and not by reading this file: the number in the comment above
     was true and the sentence around it was not, because it never said WHERE.

     So the footer takes the footer's own colours. #A9BFD3 is what every other
     link down there uses, 7.69:1 on navy, and the hover is the amber the rest
     of the footer hovers to rather than a navy that would vanish. */
  .lang-switch{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink-2);
    border:1.5px solid var(--line);border-radius:100px;padding:5px 10px;line-height:1;
    transition:color .15s,border-color .15s}
  .lang-switch:hover{color:var(--navy);border-color:var(--navy)}
  .foot-bot .lang-switch{font-size:12.5px;color:#A9BFD3;border-color:#2B4A6B}
  .foot-bot .lang-switch:hover{color:var(--beam-soft);border-color:var(--beam-soft)}
  @media(max-width:600px){.lang-switch{font-size:12px;padding:5px 8px;letter-spacing:.02em}}
  @media(max-width:820px){.nav-links{display:none}}
  /* Small phones: the wordmark, "Autentificare" and the CTA needed 335px in
     exactly 335px, so the brand and the login link ended up touching and read as
     one word ("FarulAutentificare"). It is the first thing a visitor sees.
     Nothing is removed; the three just stop fighting for the same pixels. */
  @media(max-width:600px){
    .nav-in{gap:12px}
    .nav-right{gap:14px}
    .wordmark svg{height:20px}
    .link-login{font-size:14px}
    /* 12px vertical keeps the button on the 44px tap-target floor without
       widening it, which is what caused the collision in the first place. */
    nav .btn-primary{padding:12px 16px;font-size:14px}
  }

  /* HERO */
  .hero{position:relative;padding:80px 0 0;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:48px}}
  .pill-row{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink-2);
    background:var(--surface);border:1px solid var(--line);padding:7px 14px;border-radius:100px;box-shadow:var(--sh-sm)}
  .pill svg{flex-shrink:0}
  h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(38px,5.4vw,60px);line-height:1.05;letter-spacing:-.8px;margin-bottom:22px;color:var(--navy)}
  /* THE BRAND AMBER, AND A DELIBERATE CONTRAST EXCEPTION.

     #F2B433 on this background measures 1.79:1. WCAG asks 3:1 for large text,
     so the second line of the headline is below the floor and this is a choice
     rather than an oversight. It was measured and raised before being made.

     Amber is safe as a BACKGROUND with dark text on it: navy on amber is
     7.88:1, which is what .btn-beam and .ccta-btn use. It is as a FOREGROUND on
     near white that it fails. Do not take this line as a precedent for amber
     text anywhere else on the page. See TODO.md. */
  /* NAVY ON THE AMBER, NOT AMBER ON THE WHITE.

     Amber text on an off white ground is 1.8 to 1. WCAG AA asks for 3 even at
     this size, so the headline of the whole site was failing by a wide margin,
     and it is the line a man reads on a phone outdoors. Measured with axe, not
     guessed.

     The colour still does the work; it just moved behind the words. Navy on
     amber is 7.9 to 1, which is the same decision the buttons already make and
     the reason the amber button is allowed to exist.

     box-decoration-break is what keeps the highlight whole when the line wraps
     on a phone. Without it the second line loses its padding and the block ends
     flush against the letters. */
  h1 .accent{
    color:var(--ink);
    background:var(--beam);
    padding:.02em .16em;
    border-radius:5px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  /* Room for the block so wrapped lines do not touch. */
  h1:has(.accent){line-height:1.28}
  /* The old headline, kept as a secondary line under the money one. */
  .hero-second{font-family:'Fraunces',serif;font-size:clamp(19px,2.1vw,23px);font-weight:600;
    color:var(--ink-2);line-height:1.3;margin:-8px 0 20px}
  .lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:500px;margin-bottom:32px}
  /* The figure in the headline is typical, not promised. This lives INSIDE the
     lede, not as a separate block after the CTA, so the qualifier can never be
     scrolled away from the claim it qualifies. */
  .lede-caveat{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-3);margin-top:12px}
  /* Small phones (iPhone SE and similar, 667px tall). The hero grew when it
     started leading with the refund figure, which pushed the "not a guarantee"
     qualifier just under the fold. The qualifier has to stay with the claim, so
     tighten the hero rather than let the two separate. */
  @media(max-width:600px){
    .hero{padding-top:44px}
    .pill-row{margin-bottom:18px}
    .lede{margin-bottom:24px}
  }
  .cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
  .play{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;font-weight:600;color:var(--navy)}
  .play .pc{width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm);transition:transform .15s}
  .play:hover .pc{transform:scale(1.08)}
  .micro{display:flex;align-items:center;gap:18px;font-size:13.5px;color:var(--ink-3);flex-wrap:wrap}
  .micro-i{display:flex;align-items:center;gap:7px}
  .micro-i svg{color:var(--clear);flex-shrink:0}

  /* hero product visual */
  .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;padding:20px 0 50px;min-height:640px}

  /* ===== alternating feature rows (left-right-left) ===== */
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:64px}
  .frow:last-child{margin-bottom:0}
  .frow.right .frow-media{order:2}
  .frow.right .frow-copy{order:1}
  /* WHERE ONE TOOL ENDS AND THE NEXT BEGINS.

     Side by side, the boundary is obvious: the columns end. Stacked, it was
     not. Measured on a 375px screen, the gap INSIDE a row (phone to its copy)
     was 32px and the gap BETWEEN rows was 48px. A ratio of 1.5 to 1 is not a
     boundary, and six tools read as one continuous column of screenshots and
     paragraphs.

     A rule does the work that whitespace could not. 40px of margin, a hairline,
     then 40px of padding: 80px between rows against 32px inside, with an
     explicit line at the midpoint saying a new thing starts here.

     .states + .frow IS IN THE SELECTOR AND .frow + .states IS NOT, on purpose.
     The colour states block explains the fiscal health screen directly above
     it, so a line between them would cut a tool in half. A line after it is
     right, because what follows is a different tool. */
  @media(max-width:880px){
    .frow{grid-template-columns:1fr;gap:32px;margin-bottom:40px}
    .frow.right .frow-media{order:0}
    .frow + .frow,
    .states + .frow{border-top:1px solid var(--line);padding-top:40px}
  }
  .frow-copy .quote{font-size:16px;color:var(--ink-3);font-style:italic;margin-bottom:14px;padding-left:15px;border-left:3px solid var(--beam)}

  /* ===== fiscal health status states ===== */
  .states{margin-top:64px;margin-bottom:64px}
  .states-head{text-align:center;max-width:640px;margin:0 auto 40px}
  /* CENTRED IS FINE UNTIL IT IS FIVE LINES. On a phone this paragraph runs to
     five centred lines directly under a left aligned heading in the row above
     it, which reads as a mistake rather than a choice, and centred body text of
     that length is genuinely harder to follow: every line starts in a different
     place. Left aligned below the width where it stops being short. */
  /* 880px, THE SAME BREAKPOINT THE FEATURE ROWS STACK AT, on purpose. The
     complaint was a centred heading sitting directly under a left aligned one,
     and picking a narrower breakpoint here would have left that mismatch alive
     between 700 and 880 instead of removing it. The whole feature area changes
     rhythm at one width or the reader sees the seam. */
  @media(max-width:880px){.states-head{text-align:left;margin-bottom:28px}}
  .states-head h3{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3vw,32px);color:var(--navy);margin-bottom:14px;line-height:1.15}
  .states-head p{font-size:16.5px;color:var(--ink-2);line-height:1.65}
  .states-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:860px){.states-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
  .state-card{background:linear-gradient(165deg,#123356,#0E2A47);border-radius:20px;padding:26px 24px 24px;position:relative;overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column}
  .state-bar{height:4px;border-radius:100px;margin-bottom:22px}
  .state-eye{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;margin-bottom:12px;display:flex;align-items:center}
  .state-dot{width:8px;height:8px;border-radius:50%;margin-right:9px;flex-shrink:0}
  .state-title{font-family:'Fraunces',serif;font-weight:600;font-size:23px;color:#fff;margin-bottom:9px;line-height:1.15}
  .state-sub{font-size:14px;color:#A9BFD3;line-height:1.55;margin-bottom:18px;flex:1 0 auto}
  .state-pill{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:100px;align-self:flex-start;margin-top:auto}
  .frow-copy h3{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3vw,30px);color:var(--navy);margin-bottom:12px;line-height:1.2}
  .frow-copy p{font-size:16.5px;color:var(--ink-2);line-height:1.65;max-width:430px}
  /* .frow-step, the uppercase eyebrow above each feature headline, was REMOVED
     from all eight blocks on 23 August 2026 and its rule deleted with it. It
     restated the headline one size smaller ("Cand primesti o scrisoare" above
     "Explica scrisoarea") in the blue used for links everywhere else on this
     page, so it read as clickable and was not. Do not reinstate it without
     something to say that the headline does not already say. */

  /* ===== tool steps (pain → what → steps) ===== */
  .tsteps{margin-top:16px;max-width:430px}
  .tstep{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--ink-2);line-height:1.5;margin-bottom:9px}
  .tstep-n{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
  /* The outcome line is the LAST ROW OF THE STEP LIST, not a panel beside it.
     It used to carry a fill, a border, a radius and 12px of padding, all
     announcing a second time what the green tick already says. What marks it
     out is the tick and the weight; the box was the third and fourth voice.
     The 2px margin on the SVG centres an 18px tick in the same 22px column
     the numbered circles occupy, so every row's text starts on one edge. */
  .tstep-get{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--navy);font-weight:600;line-height:1.5;margin-top:3px}
  .tstep-get svg{flex-shrink:0;margin:2px 2px 0}


  /* clean media area , no panel/box around the phone */
  .frow-media{display:flex;justify-content:center;align-items:center;padding:0}

  /* ===== realistic iPhone silhouette ===== */
  .miniphone{position:relative;width:286px;height:586px;background:#0B1B2E;border-radius:46px;padding:7px;
    box-shadow:0 50px 90px -30px rgba(14,42,71,.55),box-shadow:0 50px 90px -30px rgba(14,42,71,.55),0 0 0 2px #233a55,inset 0 0 0 1px rgba(255,255,255,.04)}
  .miniphone::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:120px;height:26px;background:#0B1B2E;border-radius:0 0 16px 16px;z-index:10}
  .mp-scr{position:relative;border-radius:40px;overflow:hidden;background:var(--bg);flex:1;display:flex;flex-direction:column;height:100%}
  /* the app screen background is LIGHT, like a real running app */
  .mp-app{flex:1;display:flex;flex-direction:column;background:#F4F7FB;overflow:hidden}

  /* status bar */
  .mp-status{padding:14px 22px 6px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
  .mp-time{font-size:12px;color:#0E2A47;font-weight:700}
  .mp-dots{display:flex;gap:5px;align-items:center}
  .mp-dots svg{opacity:.85}

  /* app header , navy bar with title */
  .mp-head{padding:8px 18px 18px;background:#fff;border-bottom:1px solid #eef2f6;flex-shrink:0;position:relative;overflow:hidden}
  .mp-head.plain{display:flex;align-items:center;gap:11px;padding-top:34px}
  .mp-head.dark{background:radial-gradient(130% 110% at 50% -25%,#1d456e,#102C49 65%);border-bottom:0;padding:34px 18px 22px;text-align:center}
  .mp-back{width:30px;height:30px;border-radius:50%;background:#F0F4F8;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .mp-head.dark .mp-back{background:rgba(255,255,255,.12)}
  .mp-htitle{font-family:'Fraunces',serif;color:#0E2A47;font-size:17px;font-weight:600}
  .mp-htitle small{display:block;font-family:'Inter',sans-serif;font-size:11px;color:#7C8C9C;font-weight:400;margin-top:2px}
  .mp-beam{position:absolute;top:-26%;left:50%;width:230px;height:260px;transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0,transparent 72deg,rgba(242,180,51,.18) 84deg,rgba(242,180,51,.3) 90deg,rgba(242,180,51,.18) 96deg,transparent 108deg);pointer-events:none}
  .mp-lamp{width:44px;height:44px;border-radius:50%;margin:6px auto 12px;position:relative;z-index:2;background:radial-gradient(circle at 50% 40%,#fff,#FBE3A0 42%,#F2B433 82%);box-shadow:0 0 0 6px rgba(242,180,51,.14),0 0 32px 9px rgba(242,180,51,.55)}
  .mp-eye{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--beam-soft);font-weight:600;margin-bottom:7px;position:relative;z-index:2}
  .mp-stat{font-family:'Fraunces',serif;color:#fff;font-size:20px;font-weight:600;margin-bottom:6px;position:relative;z-index:2}
  .mp-sub{font-size:11px;color:#A9BFD3;line-height:1.5;padding:0 10px;position:relative;z-index:2}
  .mp-pill{display:inline-flex;align-items:center;gap:6px;margin-top:13px;background:rgba(31,157,107,.2);border:1px solid rgba(31,157,107,.55);color:#7EE0B0;padding:6px 13px;border-radius:100px;font-size:10.5px;font-weight:600;position:relative;z-index:2}
  .mp-pill .d{width:6px;height:6px;border-radius:50%;background:var(--clear)}

  /* app body , light, fills remaining space */
  .mp-body{padding:16px;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:13px}
  .mp-sectlabel{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#667586;font-weight:700;margin:2px 2px -4px}

  .mp-card{background:#fff;border-radius:16px;padding:15px 15px;box-shadow:0 4px 14px -8px rgba(14,42,71,.18)}
  /* THE LIBRARY LIST, mirroring .lib-card / .lib-title / .lib-summary and
     h2.section-title in the app, scaled down for the phone mockup. Separate
     cards rather than rows inside one card, because that is what the app does:
     each guide is its own tappable card with a title and a summary, and the
     category heading is a serif line above the group rather than the small grey
     uppercase label the other mockups use for sections. */
  /* The estimates line under the money cards, and the "N in total" row that
     closes the deadline card. Both exist on the real Home screen; see
     HomeScreen.jsx .disclaimer and the total row at the foot of .next-card. */
  .scr-disc{font-size:9px;line-height:1.45;color:#8194A6;margin:-4px 2px 0}
  .mp-disc{font-size:9px;line-height:1.45;color:#8194A6;margin:-6px 2px 0}
  .mp-vital .vn small,.scr-vital .vn small{font-size:.5em;font-weight:600;opacity:.7;letter-spacing:0}

  .mp-libsect{font-family:'Fraunces',serif;font-size:13px;font-weight:600;color:#3F5267;margin:4px 2px -6px}
  .mp-libcard{background:#fff;border:1px solid #E5EBF1;border-radius:14px;padding:11px 12px;box-shadow:0 4px 14px -10px rgba(14,42,71,.18)}
  .mp-libcard .t{font-size:12px;font-weight:600;color:#0E2A47;line-height:1.3}
  .mp-libcard .s{font-size:10.5px;color:#3F5267;line-height:1.45;margin-top:2px}
  .mp-ct{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:#667586;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
  .mp-ct .badge{color:#B5851C;background:#FCEFD4;padding:3px 8px;border-radius:6px;font-size:9px}
  .mp-dl{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f3f6}
  .mp-dl:last-child{border-bottom:0}
  .mp-ring{width:40px;height:40px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
  .mp-ring .n{font-size:15px;line-height:1}.mp-ring .l{font-size:7px;text-transform:uppercase;margin-top:2px}
  .r-amber{background:#FCEFD4;color:#B5851C}.r-grey{background:#EEF1F4;color:#8194A6}.r-green{background:#E4F3EC;color:#1F9D6B}
  .mp-dt{flex:1}.mp-dt .t{font-size:12.5px;font-weight:600;color:#0E2A47;line-height:1.3}.mp-dt .m{font-size:10.5px;color:#6B7C8F;margin-top:1px}

  .mp-letter{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px -8px rgba(14,42,71,.18)}
  .mp-lt{display:flex;align-items:center;gap:11px;padding:14px 15px;border-bottom:1px solid #f0f3f6}
  .mp-lth{width:30px;height:38px;border-radius:5px;background:linear-gradient(160deg,#fff,#eef2f6);border:1px solid #e4ebf1;flex-shrink:0}
  .mp-ln{font-size:12.5px;font-weight:700;color:#0E2A47;line-height:1.2}.mp-lf{font-size:10px;color:#6B7C8F;margin-top:2px}
  .mp-ltag{font-size:9.5px;font-weight:700;color:#B5851C;background:#FCEFD4;padding:4px 8px;border-radius:6px;flex-shrink:0}
  .mp-lrow{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid #f5f7f9}
  .mp-lrow:last-child{border-bottom:0}
  .mp-li{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px}
  .mp-ll{font-size:8.5px;text-transform:uppercase;letter-spacing:.5px;color:#667586;font-weight:700;margin-bottom:3px}
  .mp-lv{font-size:11.5px;color:#0E2A47;line-height:1.4}.mp-lv b{color:#0E2A47}

  .mp-vitals{display:flex;gap:11px}
  .mp-vital{flex:1;background:#0E2A47;border-radius:16px;padding:14px 13px}
  .mp-vital.alt{background:#173A5C}
  .mp-vital .vl{font-size:9px;color:#9DB3C7;text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:6px}
  .mp-vital .vn{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:#fff}
  .mp-vital .vn small{font-size:11px;color:#A9BFD3}
  .mp-vital .vf{font-size:8.5px;color:#7E96AC;margin-top:3px}

  .mp-mail{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px -8px rgba(14,42,71,.18)}
  .mp-mhead{padding:13px 15px;border-bottom:1px solid #f0f3f6;display:flex;align-items:center;justify-content:space-between}
  .mp-mhead .t{font-size:12px;font-weight:700;color:#0E2A47}
  .mp-mhead .b{font-size:9px;font-weight:700;color:#B5851C;background:#FCEFD4;padding:4px 8px;border-radius:6px}
  .mp-mail-item{padding:13px 15px;border-bottom:1px solid #f5f7f9}
  .mp-mail-item:last-child{border-bottom:0}
  .mp-mtop{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .mp-mdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .mp-msub{font-size:12px;font-weight:700;color:#0E2A47;line-height:1.3}
  .mp-mprev{font-size:10.5px;color:#6B7C8F;line-height:1.45;padding-left:16px}
  .mp-mtag{display:inline-block;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 7px;border-radius:5px;margin-top:7px;margin-left:16px}

  /* ONE AMBER SOURCE IN THIS CORNER, NOT TWO.

     This carried its own amber radial at 70% 18%, and `.fx-blob.b2` is a 360px
     amber circle at the top right. Their centres landed at almost the same
     height, x 1146 and x 1413 at a 1440 viewport, so the corner had two amber
     glows side by side: the doubled beam.

     The blob is the one kept. b1, b2 and b3 are a deliberate trio, blue amber
     green, and pulling one out would leave the composition lopsided. This
     element keeps its BLUE lower radial, which is what gives the phone depth
     and does not compete with anything. */
  .glow{position:absolute;inset:-6% -10% 0 -10%;background:
    radial-gradient(70% 60% at 30% 80%,rgba(59,130,214,.12),transparent 70%);z-index:0}
  .device{position:relative;z-index:2;width:300px;height:610px;background:#0B1B2E;border-radius:46px;padding:7px;box-shadow:0 50px 90px -30px rgba(14,42,71,.55),0 0 0 2px #233a55,inset 0 0 0 1px rgba(255,255,255,.04)}
  .device::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:122px;height:26px;background:#0B1B2E;border-radius:0 0 16px 16px;z-index:10}
  .device-scr{border-radius:40px;overflow:hidden;background:#F4F7FB;position:relative;height:100%;display:flex;flex-direction:column}
  .scr-statusbar{padding:14px 22px 8px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:radial-gradient(130% 110% at 50% -25%,#1d456e,#102C49 65%)}
  .scr-statusbar .t{font-size:12px;color:#fff;font-weight:700}
  /* flex-end, matching the real app's .home-topbar: the actions sit right and
     there is nothing on the left. */
  .scr-topbar{display:flex;align-items:center;justify-content:flex-end;padding:20px 18px 14px;flex-shrink:0;background:radial-gradient(130% 110% at 50% -25%,#1d456e,#102C49 65%);position:relative;border-bottom:3px solid #2FA36B}
  .scr-icons{display:flex;gap:8px}
  .scr-ic{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
  .scr-hero{padding:6px 22px 24px;text-align:center;background:radial-gradient(130% 120% at 50% -20%,#1d456e,#102C49 62%);flex-shrink:0;position:relative;overflow:hidden}
  .scr-beam{position:absolute;top:-16%;left:50%;width:300px;height:360px;transform:translateX(-50%);
    background:conic-gradient(from 180deg at 50% 0,transparent 70deg,rgba(242,180,51,.16) 82deg,rgba(242,180,51,.28) 90deg,rgba(242,180,51,.16) 98deg,transparent 110deg);pointer-events:none}
  .scr-lamp{width:46px;height:46px;border-radius:50%;margin:6px auto 14px;position:relative;z-index:2;
    background:radial-gradient(circle at 50% 40%,#fff,#FBE3A0 42%,#F2B433 82%);box-shadow:0 0 0 6px rgba(242,180,51,.14),0 0 32px 9px rgba(242,180,51,.55)}
  .scr-eye{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--beam-soft);font-weight:600;margin-bottom:8px;position:relative;z-index:2}
  .scr-status{font-family:'Fraunces',serif;color:#fff;font-size:21px;font-weight:600;margin-bottom:6px;position:relative;z-index:2}
  .scr-sub{font-size:11.5px;color:#A9BFD3;line-height:1.5;padding:0 10px;position:relative;z-index:2}
  .scr-pill{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:rgba(31,157,107,.2);border:1px solid rgba(31,157,107,.55);color:#7EE0B0;padding:6px 14px;border-radius:100px;font-size:10.5px;font-weight:600;position:relative;z-index:2}
  .scr-pill .d{width:6px;height:6px;border-radius:50%;background:var(--clear)}
  .scr-body{padding:16px;background:#F4F7FB;flex:1;display:flex;flex-direction:column;gap:13px}
  .scr-bodylabel{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#667586;font-weight:700;margin:2px 2px -4px}
  .scr-vitals{display:flex;gap:11px}
  .scr-vital{flex:1;background:#0E2A47;border-radius:16px;padding:14px 13px}
  .scr-vital.alt{background:#173A5C}
  .scr-vital .vl{font-size:9px;color:#9DB3C7;text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:6px}
  .scr-vital .vn{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:#fff}
  .scr-vital .vn small{font-size:10px;color:#A9BFD3}
  .scr-vital .vf{font-size:8.5px;color:#7E96AC;margin-top:3px}
  .scr-card{background:#fff;border-radius:16px;padding:15px;box-shadow:0 4px 14px -8px rgba(14,42,71,.18)}
  .scr-card-t{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#667586;font-weight:700;margin-bottom:12px}
  .scr-dl{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #f0f3f6}
  .scr-dl:last-child{border-bottom:0}
  .scr-ring{width:40px;height:40px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
  .ring-a{background:#FCEFD4;color:#B5851C}.ring-g{background:#EEF1F4;color:#8194A6}
  .scr-ring .n{font-size:15px;line-height:1}.scr-ring .l{font-size:7px;text-transform:uppercase;margin-top:2px}
  .scr-dt{flex:1;text-align:left}.scr-dt .t{font-size:12.5px;font-weight:600;color:#0E2A47}.scr-dt .m{font-size:10.5px;color:#6B7C8F;margin-top:1px}
  .float-card{position:absolute;z-index:14;background:#fff;border-radius:16px;box-shadow:0 18px 44px -16px rgba(14,42,71,.4);padding:13px 15px;border:1px solid var(--line)}
  /* MOVED RIGHT, NOT DOWN, and the first attempt got that wrong. The card's
     left edge sat at 1124 while the phone's text runs to 1135, so it covered
     the end of "Ești în regulă, Andrei.". Dropping it 30px lower cleared the
     headline and landed it on the line underneath instead: the overlap is
     HORIZONTAL, so only a horizontal move fixes it.

     At right:-50 the card starts past every text line in the screen and still
     sits over the phone's right edge, which is the effect the card is for.
     Overlapping the EDGE is design; overlapping the TEXT is hiding content, and
     it is worse in any language wordier than Romanian. */
  .fc-letter{right:-50px;top:120px;width:198px}
  /* BELOW 900 IT STOPS FLOATING AND SITS UNDER THE PHONE.

     The card is there to make the mockup feel alive where there is room beside
     it. On a phone there is none: measured at 375, a 198px card over a 300px
     phone covered 146px of the screen's text width and crossed all three lines,
     and no position fixes that. Clearing text that ends at 309 needs the card
     to start at 309, which puts its right edge at 507 on a 375 screen, and the
     only clear band inside the phone is 66px against a card 113px tall.

     Covering the mockup's text to decorate the mockup is backwards, and what it
     covered was "Ești în regulă, Andrei.", which is the whole emotional point
     of the picture.

     STATIC RATHER THAN HIDDEN, because the card is not only decoration: it is
     the letter explanation, the flagship feature, shown rather than described.
     Losing it on the screen most readers use would cost more than the overlay
     effect is worth. Hiding it instead is one line, `display:none`, if that
     trade is ever judged differently.

     position:static also cancels the float, so the entrance animation is left
     alone: it fades and lifts in place, which reads correctly for a block. */
  @media(max-width:900px){
    /* .hero-visual is a flex ROW. Making the card static without this put it
       BESIDE the phone as a flex item rather than under it, which widened the
       container to 401px on a 375 screen and pushed it off the edge. Stacking
       the container is what actually moves the card underneath. */
    .hero-visual{flex-direction:column}
    .fc-letter{position:static;width:100%;max-width:300px;margin:18px auto 0;right:auto;top:auto}
  }
  .fc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .fc-ic{width:26px;height:26px;border-radius:8px;background:#FCEFD4;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .fc-name{font-size:11px;font-weight:700;color:var(--navy)}.fc-from{font-size:9px;color:var(--ink-3)}
  .fc-body{font-size:10.5px;color:var(--ink-2);line-height:1.5}
  .fc-body b{color:var(--navy)}

  /* TRUST BAR */
  /* A NAVY BAND, SO THE AMBER CAN ACTUALLY BE AMBER.
     
     The bold runs used to be navy on a near white strip, which read as generic.
     The obvious fix, amber bold on the same strip, does not survive contact
     with the contrast numbers: --beam on --sky-2 measures 1.73:1, and these
     runs are 14.5px bold, which needs 4.5:1. Darkening the amber until it
     passed produced #956709, a mustard that reads as brown next to the brand
     colour rather than as it.
     
     Turning the band navy solves it the other way round, and it is the rule
     this page already states about itself in the accountant section: amber
     works as a foreground on dark, not on light. Measured on #0E2A47, --beam is
     7.88:1 and the body text at #B9C8D8 is 8.55:1. Both pass comfortably.
     
     It also earns its place on the page. Between a light hero and a light
     features section, a dark band is a deliberate divider rather than a pale
     strip that looks like an afterthought. */
  .trustbar{border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);background:var(--navy);padding:26px 0}
  /* THREE STATEMENTS, THREE COLUMNS, AND NO SEPARATORS AT ALL.

     This was a centred flex row with flex-wrap and two 4px dots between the
     items. The dots are children, so they wrapped like children: on a phone one
     of them sat alone, centred, on its own line, and the other landed beside
     the last statement on a different baseline. Five visual lines for three
     sentences.

     THE PART THAT WAS NOT OBVIOUS is that the row NEVER fitted. Measured with
     flex-wrap forced to nowrap, the three statements plus their gaps and dots
     need 1200px of content width. .wrap is max-width 1200 with 32px of padding
     each side, so the content box is capped at 1136px at every viewport size,
     however wide the screen. It is 64px short and always was, so the one line
     layout the dots were designed for has never once rendered. A first attempt
     at this fix put a breakpoint at 1180px to "preserve" that layout, which
     would have preserved nothing: the measurement behind it copied the markup
     into a bare div, where .trust-in b never applied and every bold run was
     measured at normal weight.

     A grid cannot wrap, so nothing can be orphaned. Three equal columns on a
     wide screen, one column stacked below 880px, and the gap does the
     separating that the dots were there for. */
  .trust-in{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;gap:14px 32px;text-align:center;font-size:14.5px;color:var(--beam)}
  /* THE BOLD PHRASE STAYS IN ONE PIECE. With balanced wrapping, column two
     broke as "cu un / contabil": the amber phrase split across two lines, which
     is the one thing on this band the eye goes to. Measured with nowrap forced,
     the widest of the three is 183px against a 357px column on desktop and
     roughly 280px on a 320px phone, so keeping them whole cannot overflow. */
  /* NO BOLD RUNS ANY MORE. The items are three or four words, and bolding half
     of a four word phrase is noise rather than emphasis. The amber does the
     work; measured on #0E2A47 it is 7.88:1, well clear of the 4.5 these need.
     
     nowrap on the whole item instead of on a fragment of it: a mark that breaks
     across two lines stops reading as a mark. Measured at a 320px viewport, the
     widest of the three is 193px against 280px of column, and the shortest, the
     one in the middle, is 144px. Nothing overflows and the body does not scroll
     sideways. Lengthen any of the three and re-measure. */
  .trust-in > span{white-space:nowrap;font-weight:600}
  @media(max-width:880px){
    .trust-in{grid-template-columns:1fr;gap:10px}
  }

  /* SECTIONS */
  section{padding:96px 0}
  .kick{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:14px}
  .sec-head{max-width:640px;margin:0 auto 56px;text-align:center}
  h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4.2vw,44px);line-height:1.12;letter-spacing:-.5px;color:var(--navy);margin-bottom:16px}
  .sec-sub{font-size:18px;color:var(--ink-2);line-height:1.6}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:880px){.grid3{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .2s,border-color .2s}
  .card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:#d7e0ea}
  .card-ic{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
  .ic-a{background:#FCEFD4}.ic-b{background:#E4F3EC}.ic-c{background:#E7F0FB}
  .card h3{font-family:'Fraunces',serif;font-weight:600;font-size:21px;margin-bottom:10px;color:var(--navy)}
  .card p{font-size:14.5px;color:var(--ink-2);line-height:1.65}
  .card .quote{font-size:14px;color:var(--ink-3);font-style:italic;margin-bottom:14px;padding-left:13px;border-left:2px solid var(--beam)}

  /* STAT */
  .statband{background:var(--navy);border-radius:var(--r-xl);padding:44px 40px;text-align:center;position:relative;overflow:hidden}
  @media(max-width:600px){.statband{padding:32px 20px}}
  .statband::after{content:"";position:absolute;top:-30%;left:50%;width:560px;height:560px;transform:translateX(-50%);background:radial-gradient(circle,rgba(242,180,51,.14),transparent 60%)}

  /* ===== all-in-one intro ===== */
  .allin-intro{max-width:760px;margin:0 auto}
  .allin-intro .kick{margin-bottom:14px}

  /* ===== get in touch (soft, secondary) ===== */
  .touch-band{background:radial-gradient(120% 140% at 100% 0%,#15395f,var(--navy) 60%);border-radius:var(--r-xl);padding:52px 48px;color:#fff;position:relative;overflow:hidden;text-align:center}
  .touch-band::after{content:"";position:absolute;top:-30%;right:-6%;width:420px;height:420px;background:radial-gradient(circle,rgba(242,180,51,.14),transparent 62%);pointer-events:none}
  .touch-inner{position:relative;z-index:2;max-width:600px;margin:0 auto}
  .touch-h{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(26px,3.4vw,36px);line-height:1.14;color:#fff;margin-bottom:16px}
  .touch-lede{font-size:16.5px;color:#C7D6E4;line-height:1.65;margin-bottom:28px}
  /* The address under the contact button. Same family as .touch-lede, which is
     the other body text on this navy band, and the link itself is amber because
     that is what a link is on a dark ground here. */
  .touch-mail{margin-top:18px;font-size:15px;color:#C7D6E4}
  .touch-mail a{color:var(--beam);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(242,180,51,.4)}
  .touch-mail a:hover{border-bottom-color:var(--beam)}
  /* .touch-cta went with the mailto: button it centred. */
  /* THE CONTACT FORM, on the dark band. Solid white fields rather than
     translucent ones: on a gradient a translucent input changes contrast across
     its own width, and these are fields somebody types an email address into.
     White gives the label inside the field the same 13.67:1 the rest of the
     page's body text has. The labels above the fields sit on the band, so they
     use the same #C7D6E4 as .touch-lede beside them, measured at 8.9:1. */
  /* THE DISCLOSURE. The summary is the amber call to action it replaced, so
     the section still offers one obvious thing to do; the form is what appears
     when you take it.

     list-style:none plus the webkit marker rule removes the default triangle,
     which would otherwise sit inside a pill button. Both are needed: Safari
     ignores the first and Firefox ignores the second. */
  /* THE SUMMARY KEEPS ITS DEFAULT display AND THE PILL SITS INSIDE IT. Styling
     the <summary> itself as inline-flex works in Chromium, which is how it was
     written first and how it tested clean. Safari drops the element's disclosure
     semantics when its display is changed away from list-item, so a screen
     reader there stops announcing it as an expandable control and the keyboard
     behaviour goes with it. Nothing in a Chromium test would have shown that.
     The marker is removed with both rules because Safari ignores ::marker here
     and Firefox ignores the webkit one. */
  .touch-reveal > summary{list-style:none;cursor:pointer}
  .touch-reveal > summary::-webkit-details-marker{display:none}
  .touch-reveal > summary::marker{content:""}
  .touch-open{display:inline-flex;align-items:center;gap:9px}
  .touch-reveal > summary:focus-visible{outline:none}
  .touch-reveal > summary:focus-visible .touch-open{outline:2px solid #fff;outline-offset:3px}
  /* The chevron points down when closed and up when open, which is the only
     thing on the control that changes: the label stays put so the button does
     not resize under the cursor mid click. */
  .touch-chev{transition:transform .18s ease}
  .touch-reveal[open] > summary .touch-chev{transform:rotate(180deg)}
  .touch-reveal[open] > .touch-form{margin-top:26px}
  @media(prefers-reduced-motion:reduce){.touch-chev{transition:none}}

  .touch-form{max-width:520px;margin:0 auto;text-align:left}
  .touch-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:600px){.touch-row{grid-template-columns:1fr}}
  .touch-field{display:block;margin-bottom:12px}
  .touch-field > span{display:block;font-size:13px;color:#C7D6E4;margin-bottom:6px;font-weight:500}
  .touch-field input,.touch-field textarea{
    width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
    border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:12px 14px;resize:vertical}
  .touch-field textarea{min-height:96px;line-height:1.55}
  /* #667586 measured 2.43:1 on white. A placeholder is not body text, but this
     one is the only thing in an empty field and somebody has to read it to know
     what goes there. #5F7185 is 4.89:1, the same token the page uses for its
     smallest readable text. */
  .touch-field input::placeholder,.touch-field textarea::placeholder{color:#5F7185}
  /* Guidance that survives typing. It used to be inside the textarea's
     placeholder, which vanishes the moment somebody starts writing, taking the
     one instruction on the form with it. */
  .touch-hint{display:block;font-size:12.5px;color:#A9BFD3;margin-top:6px;line-height:1.5}
  .touch-field input:focus,.touch-field textarea:focus{outline:2px solid var(--beam);outline-offset:1px;border-color:var(--beam)}
  .touch-form button{margin-top:4px;cursor:pointer;border:0}
  .touch-form button[disabled]{opacity:.6;cursor:default}
  /* Holds its line whether or not there is a message, so the address below does
     not jump the moment somebody submits. */
  .touch-msg{min-height:22px;margin-top:12px;font-size:14.5px;line-height:1.5;color:#C7D6E4}
  .touch-msg-good{color:#7EE0B0;font-weight:600}
  .touch-msg-bad{color:#FFB4AE;font-weight:600}

  /* ===== refund comparison ===== */
  .refund-band{background:radial-gradient(120% 130% at 100% 0%,#15395f,var(--navy) 62%);border-radius:var(--r-xl);padding:56px 48px;position:relative;overflow:hidden}
  .refund-band::after{content:"";position:absolute;top:-25%;right:-6%;width:420px;height:420px;background:radial-gradient(circle,rgba(242,180,51,.14),transparent 62%);pointer-events:none}
  .refund-head{text-align:center;max-width:640px;margin:0 auto 34px;position:relative;z-index:2}
  .refund-head h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:12px}
  .refund-lede{font-size:16px;color:#C7D6E4;line-height:1.55}
  .refund-compare3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:2}
  @media(max-width:820px){.refund-compare3{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
  .rc3{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px 24px}
  .rc3-us{background:rgba(255,255,255,.07);border:2px solid var(--beam)}
  .rc3-lab{font-size:14px;font-weight:600;color:#C7D6E4;margin-bottom:16px;display:flex;align-items:center;gap:8px}
  .rc3-badge{display:inline-block;font-size:12.5px;font-weight:700;color:var(--navy);background:var(--beam);padding:5px 14px;border-radius:100px;margin-bottom:16px}
  .rc3-amt{font-family:'Fraunces',serif;font-size:34px;font-weight:600;line-height:1;margin-bottom:10px}
  .rc3-bad{color:#F2A6A5}
  .rc3-neutral{color:#fff}
  .rc3-good{color:#7EE0B0}
  .rc3-note{font-size:13.5px;color:#A9BFD3;line-height:1.5;margin-bottom:16px}
  .rc3-tag{display:inline-block;font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px}
  .rc3-tag-bad{background:rgba(224,86,84,.18);color:#F2A6A5}
  .rc3-tag-warn{background:rgba(239,166,55,.18);color:#F5C97A}
  .rc3-tag-good{background:rgba(242,180,51,.2);color:#FBE3A0}
  .rc3-price{border-top:1px solid rgba(242,180,51,.25);padding-top:12px;margin-top:2px}
  .rc3-price-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
  .rc3-price-lab{font-size:13px;color:#C7D6E4}
  .rc3-price-val{font-size:15px;font-weight:700;color:#FBE3A0}
  .rc3-price-muted{color:#9FB3C8;text-decoration:line-through;text-decoration-color:rgba(159,179,200,.5)}
  .refund-net{margin:24px auto 0;max-width:820px;background:rgba(59,130,214,.14);border:1px solid rgba(59,130,214,.3);border-radius:14px;padding:16px 20px;font-size:15px;color:#D3E3F4;line-height:1.55;position:relative;z-index:2}
  .refund-net b{color:#fff}
  .refund-mtd{margin:14px auto 0;max-width:820px;background:rgba(242,180,51,.1);border:1px solid rgba(242,180,51,.3);border-radius:14px;padding:16px 20px;font-size:14.5px;color:#E8D9B4;line-height:1.55;position:relative;z-index:2;display:flex;gap:14px;align-items:flex-start}
  .refund-mtd b{color:#FBE3A0}
  .refund-mtd-ic{width:34px;height:34px;border-radius:10px;background:rgba(242,180,51,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .refund-disc{text-align:center;font-size:12px;color:#8FA6BE;margin-top:18px;position:relative;z-index:2;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.55}
  /* Sized down deliberately: this opener used to dominate the section and pull
     attention away from the penalty breakdown under it, which is the part that
     actually tells the reader what it costs them. */
  /* A normal paragraph, not a display headline. "Un milion" used to be set at up
     to 52px above this line, which made the opener shout louder than the figures
     it was introducing. */
  .stat-l{font-size:17px;color:#D4DFEC;max-width:560px;margin:0 auto;line-height:1.6;position:relative}
  /* THE FIGURE IN AMBER, not white. It is the number the whole section is
     about, and white made it the same weight as the words around it. Amber on
     this navy measures 7.88:1, comfortably past AA: the brand amber is only
     unsafe as a FOREGROUND on the near white page background, which is recorded
     against the hero headline. On navy it is the safe direction. `.pen-t b`
     already uses it for "de la £1.600", so this makes the two agree. */
  .stat-l b{color:var(--beam);font-weight:600}
  /* Inline with the statement rather than a line of its own. */
  .stat-src{display:inline;font-size:12.5px;color:#7C93AA;letter-spacing:.3px;white-space:nowrap}

  /* the penalty ladder */
  .pen{position:relative;margin:26px auto 0;max-width:430px;text-align:left}
  .pl{display:flex;align-items:baseline;justify-content:space-between;
    padding:11px 0;border-bottom:1px solid rgba(255,255,255,.10)}
  /* TWO LINES SAT BETWEEN THE LAST ROW AND THE SUMMARY: this row's own bottom
     border and the border-top on .pen-t below. The row's is the one to drop
     rather than the summary's, because the two are not the same weight on
     purpose. Rows divide at .10 and the summary is set off at .22, which is the
     stronger break the content actually calls for. */
  .pl:last-of-type{border-bottom:none}
  .pl-w{font-size:14.5px;color:#9FB6CC;padding-right:16px}
  /* The qualifier under each label. The 6 and 12 month charges are "5% of the
     tax due or £300, whichever is greater", and the £900 is £10 a day capped,
     not an automatic charge. The number stays the headline; this carries the
     condition, so the row is accurate without losing the escalation. */
  .pl-w small{display:block;font-size:12.5px;color:#7C93AA;line-height:1.45;margin-top:3px}
  .pl-a{font-family:'Fraunces',serif;font-weight:600;color:#fff;
    font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
  /* Keyed to the rows themselves. These used to start at nth-child(2) because a
     subheading was the first child; it is gone, so they start at 1. */
  .pl:nth-child(1) .pl-a{font-size:22px}
  .pl:nth-child(2) .pl-a{font-size:30px}
  .pl:nth-child(3) .pl-a{font-size:24px}
  .pl:nth-child(4) .pl-a{font-size:24px}

  /* The total, one line. It used to be a 92px amber number with a separate
     paragraph under it, which took 298px to say what fits on a line. */
  .pen-t{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);
    font-size:14px;color:#9FB6CC;line-height:1.6}
  .pen-t b{color:var(--beam);font-weight:600;white-space:nowrap}
  /* The MTD note sits outside .pen so it is not held to the 430px row column,
     which had it running to four lines. Quieter than the rows because it does
     not apply to most readers yet, but it has to be here: the regime changes as
     the threshold drops. */
  /* The answer to the table above it. Set apart from .pen-t, which is the last
     row of the problem, by a rule and a little air: they are different kinds of
     sentence and running them together read as one long caveat. */
  .pen-fix{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);
    font-size:15.5px;color:#D4DFEC;line-height:1.65;max-width:620px;margin-left:auto;margin-right:auto;text-align:left}
  .pen-fix b{color:var(--beam);font-weight:600;white-space:nowrap}
  .pen-mtd{position:relative;font-size:12.5px;color:#7C93AA;line-height:1.6;
    max-width:620px;margin:22px auto 0;text-align:left}
  .pen-mtd b{color:#9FB6CC;font-weight:600}

  /* PRICING */
  .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
  @media(max-width:880px){.prices{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
  .price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;display:flex;flex-direction:column;box-shadow:var(--sh-sm)}
  .price.best{border:2px solid var(--navy);box-shadow:var(--sh);position:relative}
  .price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--beam);color:var(--navy);font-size:11.5px;font-weight:700;padding:6px 16px;border-radius:100px;letter-spacing:.3px}
  .price-n{font-family:'Fraunces',serif;font-weight:600;font-size:20px;margin-bottom:8px;color:var(--navy)}
  .price-t{font-family:'Fraunces',serif;font-size:44px;font-weight:600;color:var(--navy);line-height:1}
  .price-t small{font-size:15px;color:var(--ink-faint);font-weight:400}
  .price-save{font-size:12.5px;color:var(--clear);font-weight:700;margin-top:7px;min-height:18px}
  .price-d{font-size:13.5px;color:var(--ink-3);margin:8px 0 22px;min-height:40px}
  /* billing toggle */
  .billtoggle{display:inline-flex;gap:4px;background:var(--sky-2);border:1px solid var(--line);border-radius:100px;padding:4px;margin-top:18px}
  .bt-opt{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink-2);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;padding:9px 20px;border-radius:100px;cursor:pointer;transition:background .15s,color .15s}
  .bt-opt.on{background:var(--navy);color:#fff}
  .bt-save{font-size:11px;font-weight:700;background:var(--beam);color:var(--navy);padding:2px 8px;border-radius:100px}
  .bt-opt.on .bt-save{background:var(--beam)}
  .price ul{list-style:none;margin-bottom:24px;flex:1}
  .price li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);padding:6px 0;align-items:flex-start;line-height:1.4}
  .price li.grp{color:var(--ink-3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:14px 0 4px;display:block}
  .price li.grp:first-child{padding-top:0}
  .price li.bonus{color:var(--ink);font-weight:600}
  .price li.bonus svg{color:var(--beam)}
  .price li.bonus .bonus-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#B5851C;background:#FCEFD4;padding:2px 7px;border-radius:5px;margin-left:6px;align-self:center}
  .price li svg{flex-shrink:0;color:var(--clear);margin-top:2px}
  .price .pbtn{text-align:center;padding:14px;border-radius:100px;font-weight:600;font-size:15px}
  /* The trial terms and the one business rule, under all three cards rather
     than repeated in each. Wide but capped, so it reads as a footnote to the
     row and not as a fourth column. */
  .price-foot{max-width:760px;margin:20px auto 0;text-align:center;font-size:14px;line-height:1.6;color:var(--ink-2)}
  .pbtn-dark{background:var(--navy);color:#fff}.pbtn-dark:hover{background:var(--navy-2)}
  .pbtn-ghost{background:var(--sky-2);color:var(--navy);border:1px solid var(--line)}

  /* CLOSING */
  .closing{text-align:center}
  .closing h2{margin-bottom:18px}
  .closing .ro{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--blue);margin-bottom:32px;font-weight:500}

  /* ===== ACCOUNTANT SERVICES (dark feature band) ===== */
  .acc-band{background:radial-gradient(120% 140% at 100% 0%,#15395f,var(--navy) 60%);border-radius:var(--r-xl);padding:52px 52px;color:#fff;position:relative;overflow:hidden}
  .acc-band::after{content:"";position:absolute;top:-30%;right:-6%;width:420px;height:420px;background:radial-gradient(circle,rgba(242,180,51,.14),transparent 62%);pointer-events:none}
  .acc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start;position:relative;z-index:2}
  @media(max-width:880px){.acc-grid{grid-template-columns:1fr;gap:36px}}
  .acc-kick{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--beam);font-weight:700;margin-bottom:14px}
  .acc-h{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,3.6vw,36px);line-height:1.12;letter-spacing:-.4px;margin-bottom:16px}
  .acc-lede{font-size:16.5px;color:#C7D6E4;line-height:1.6;max-width:440px;margin-bottom:28px}
  .acc-cta{display:flex;gap:14px;flex-wrap:wrap}
  .btn-beam{background:var(--beam);color:var(--navy);padding:15px 26px;border-radius:100px;font-weight:700;font-size:15.5px;display:inline-flex;align-items:center;gap:9px;transition:transform .15s,box-shadow .2s;box-shadow:0 12px 26px -10px rgba(242,180,51,.5)}
  .btn-beam:hover{transform:translateY(-2px);box-shadow:0 18px 32px -10px rgba(242,180,51,.6)}
  .btn-outline{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22);padding:15px 26px;border-radius:100px;font-weight:600;font-size:15.5px;display:inline-flex;align-items:center;gap:9px;transition:background .2s}
  .btn-outline:hover{background:rgba(255,255,255,.13)}

  .acc-values{display:flex;flex-direction:column;gap:14px}
  .val{display:flex;gap:15px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:18px 20px;position:relative}
  .val.primary{background:rgba(242,180,51,.1);border-color:rgba(242,180,51,.35)}
  .val-no{font-family:'Fraunces',serif;font-size:26px;font-weight:600;color:var(--beam);line-height:1;flex-shrink:0;width:34px}
  .val.primary .val-no{color:var(--beam)}
  .val-b .vt{font-size:15.5px;font-weight:700;color:#fff;margin-bottom:4px;display:flex;align-items:center;gap:9px}
  .val-b .vt .tagn{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);background:var(--beam);padding:3px 8px;border-radius:5px}
  .val-b .vd{font-size:13.5px;color:#A9BFD3;line-height:1.55}

  /* ===== CALCULATOR ===== */
  .calc-wrap{max-width:720px;margin:0 auto}
  .calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh);overflow:hidden;margin-top:8px}
  .calc-body{padding:34px}
  @media(max-width:560px){.calc-body{padding:22px}}
  .cstep{margin-bottom:26px}.cstep:last-of-type{margin-bottom:0}
  /* UN PAS LA CARE S-A RĂSPUNS SE STRÂNGE ÎNTR-UN RÂND.

     Carduri de alegere rămâneau deschise după ce alegeai, la pasul 1 și la
     pasul 2, deci formularul creștea cu fiecare răspuns și ajungeai să derulezi
     pe lângă două întrebări deja rezolvate ca să ajungi la cea la care lucrezi.

     Eticheta pasului rămâne, ca să știi unde ești. Ce dispare sunt cele două
     carduri, înlocuite cu răspunsul tău și cu un fel de a te întoarce la el. */
  .cstep.folded .choices{display:none}
  .cstep-done{display:none}
  .cstep.folded .cstep-done{
    display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;
    font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);cursor:pointer;text-align:left
  }
  .cstep.folded .cstep-done:hover{border-color:var(--navy)}
  .cstep-done-v{font-weight:600}
  .cstep-done-a{font-size:13.5px;font-weight:600;color:#2563B0;text-decoration:underline;text-underline-offset:3px;flex:0 0 auto}
  .cstep-label{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:13px}
  .choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:480px){.choices{grid-template-columns:1fr}}
  .choice{border:2px solid var(--line);border-radius:var(--r);padding:17px;cursor:pointer;transition:border-color .15s,background .15s;display:flex;gap:13px;align-items:flex-start;background:var(--surface)}
  .choice:hover{border-color:#c5d3e2}
  .choice.sel{border-color:var(--navy);background:var(--sky-2)}
  .choice-ic{width:38px;height:38px;border-radius:11px;background:var(--sky);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .choice.sel .choice-ic{background:var(--navy)}
  .choice.sel .choice-ic svg *{stroke:#fff}
  .choice-t{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:2px}
  .choice-d{font-size:12.5px;color:var(--ink-3);line-height:1.4}
  .cfield{margin-bottom:18px}.cfield:last-child{margin-bottom:0}
  .cfield label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:7px}
  .cfield .chint{font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:5px;line-height:1.5}
  .imoney{position:relative;display:flex;align-items:center}
  .imoney .cur{position:absolute;left:16px;font-size:17px;color:var(--ink-3);font-weight:600;pointer-events:none}
  .imoney input{width:100%;padding:14px 16px 14px 36px;font-size:17px;font-family:'Inter',sans-serif;font-weight:600;color:var(--navy);border:2px solid var(--line);border-radius:13px;outline:none;transition:border-color .15s;background:var(--surface)}
  .imoney input:focus{border-color:var(--blue)}
  .chelp-link{font-size:12.5px;color:var(--blue);font-weight:600;cursor:pointer;margin-top:9px;display:inline-block}
  .chelp-box{display:none;margin-top:10px;background:var(--sky-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--ink-2);line-height:1.6}
  .chelp-box.show{display:block}.chelp-box b{color:var(--navy)}
  .calc-btn{width:100%;background:var(--navy);color:#fff;border:0;border-radius:100px;padding:16px;font-size:16px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;margin-top:24px;transition:background .15s,transform .12s}
  .calc-btn:hover{background:var(--navy-2)}.calc-btn:active{transform:scale(.99)}
  .calc-btn:disabled{background:#c5d3e2;cursor:not-allowed}
  .calc-btn.reset{background:var(--surface);color:var(--navy);border:2px solid var(--line)}
  /* Save as PDF. Same shape as the app's, which is deliberate: one product. */
  /* ---- The written part of the calculator page --------------------------
     Every other section on this site uses purpose built classes that carry
     their own spacing. This one was written with bare h2 and p, and the reset
     at the top zeroes every margin, so the paragraphs ran into each other with
     no gap and the subheadings arrived at clamp(30px, 4.2vw, 44px): the size
     built for a centred section title with a kicker above it, landing in the
     middle of an article.

     An article subheading should be a step above its body text, not four. */
  #explicatii h2{font-size:clamp(21px,2.5vw,27px);line-height:1.25;letter-spacing:-.2px;margin:40px 0 14px}
  #explicatii h2:first-of-type{margin-top:8px}
  #explicatii p{font-size:17px;line-height:1.72;color:var(--ink-2);margin-bottom:15px}
  #explicatii p:last-of-type{margin-bottom:0}

  /* Save as PDF. AMBER OUTLINE, NOT AMBER FILLED, and the reason is the button
     18mm below it. Filled, this and "Începe proba gratuită" were two amber
     pills stacked on one card, and the wrong one was the easier click: saving a
     number you are already looking at costs nothing, starting a trial costs
     something. Two controls cannot both be the primary action, and the trial is
     the one that matters. Same accent, one step down.

     CONTRAST. Amber on this card is 7.88:1 over the navy body and 6.37:1 at the
     lighter top right corner of the gradient, which is the worst case a border
     and its label have to survive. Both pass AA for normal text. The filled
     version was 7.88:1 everywhere because the fill covered the gradient, so
     this does give up AAA at that corner; the hierarchy is worth more than the
     margin above a threshold it already clears.

     NO LIFT ON HOVER. translateY is the trial button's gesture and it should
     stay that button's. This washes instead. */
  .cpdf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;border-radius:100px;padding:11px 20px;font-size:14.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;background:transparent;color:var(--beam);border:1.5px solid var(--beam);transition:background .15s,border-color .15s,color .15s}
  /* The label and the icon carry the colour explicitly so nothing inherited
     from the card, which sets color:#fff, can reach them. */
  .cpdf-btn>span,.cpdf-btn>svg{color:var(--beam)}
  .cpdf-btn:hover{background:rgba(242,180,51,.14)}
  .cpdf-btn:active{transform:translateY(1px)}
  /* WHILE IT LOADS, the paler amber on border and text rather than opacity.
     Opacity would composite against the navy gradient behind it by an amount
     that depends where the button sits on it, which is not a contrast anyone
     has measured. beam-soft is flat: 9.31:1 at the gradient's worst point. */
  .cpdf-btn[disabled]{background:transparent;border-color:var(--beam-soft);cursor:progress;transform:none}
  .cpdf-btn[disabled]>span,.cpdf-btn[disabled]>svg{color:var(--beam-soft)}
  .calc-btn.reset:hover{background:var(--sky-2);border-color:#c5d3e2}
  .cresult{display:none;background:radial-gradient(120% 130% at 100% 0%,#15395f,var(--navy) 60%);color:#fff;padding:32px;position:relative;overflow:hidden}
  .cresult.show{display:block;animation:crise .4s cubic-bezier(.2,.7,.3,1)}
  @keyframes crise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .cresult::after{content:"";position:absolute;top:-30%;right:-8%;width:320px;height:320px;background:radial-gradient(circle,rgba(242,180,51,.16),transparent 62%);pointer-events:none}
  .cres-label{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--beam-soft);font-weight:700;margin-bottom:10px;position:relative}
  .cres-big{font-family:'Fraunces',serif;font-size:clamp(40px,8vw,56px);font-weight:600;line-height:1;margin-bottom:8px;position:relative}
  .cres-big.refund{color:#7EE0B0}
  .cres-sub{font-size:14.5px;color:#C7D6E4;line-height:1.5;position:relative;max-width:440px}
  .cres-break{margin-top:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 18px;position:relative}
  .cres-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:14px;border-bottom:1px solid rgba(255,255,255,.08)}
  .cres-row:last-child{border-bottom:0}
  .cres-row .l{color:#A9BFD3}.cres-row .v{font-weight:600;color:#fff}
  .cres-row.total .l{color:#fff;font-weight:600}.cres-row.total .v{color:var(--beam)}
  .csave{display:none;margin-top:18px;background:rgba(242,180,51,.12);border:1px solid rgba(242,180,51,.35);border-radius:14px;padding:16px 18px;position:relative}
  .csave.show{display:block}
  .csave-t{font-size:14px;color:#FBE3A0;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
  .csave-d{font-size:13.5px;color:#E8EFF6;line-height:1.55}
  .csave-d b{color:#fff}
  .cres-cta-t{font-size:15px;color:#E8EFF6;line-height:1.5;margin-bottom:14px}.cres-cta-t b{color:#fff}
  .cres-cta{margin-top:24px;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .ccta-btn{display:inline-flex;align-items:center;gap:9px;background:var(--beam);color:var(--navy);padding:14px 24px;border-radius:100px;font-weight:700;font-size:15px;cursor:pointer;border:0;font-family:'Inter',sans-serif;transition:transform .15s;text-decoration:none}
  .ccta-btn:hover{transform:translateY(-2px)}
  .cres-reset{display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:none;border:0;color:#A9BFD3;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;padding:0;text-decoration:underline;text-underline-offset:3px}
  .cres-reset:hover{color:#fff}
  .cdisc{font-size:12px;color:var(--ink-faint);text-align:center;margin-top:18px;line-height:1.6;max-width:580px;margin-left:auto;margin-right:auto}
  .chidden{display:none}

  /* ===== REVIEWS ===== */
  .rev-top{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:44px;text-align:center}
  .rev-stars{display:flex;gap:4px}
  .rev-rating{font-size:15px;color:var(--ink-2)}
  .rev-rating b{color:var(--navy)}
  /* horizontal scroller , scrolls both directions */
  .rev-scroller{display:flex;align-items:stretch;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 22px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rev-scroller::-webkit-scrollbar{display:none}
  /* bleed the row to the screen edges so it feels like a carousel */
  .rev-bleed{}
  .rev{flex:0 0 320px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
  @media(max-width:560px){.rev{flex-basis:280px}}
  .rev-stars-sm{display:flex;gap:2px;margin-bottom:12px}
  .rev-q{font-size:14.5px;color:var(--ink);line-height:1.6;margin-bottom:18px;flex:1}
  .rev-p{display:flex;align-items:center;gap:11px;margin-top:auto}
  .rev-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
  .rev-name{font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap}
  .rev-role{font-size:12px;color:var(--ink-3);white-space:nowrap}
  .rev-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--ink-faint);margin-top:6px}
  /* Placeholder shown while there are no real reviews. Quiet on purpose: it is
     an honest absence, not a feature. Delete this block when real .rev cards
     go back into .rev-scroller. */
  .rev-empty{max-width:520px;margin:34px auto 0;text-align:center;padding:34px 26px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
  .rev-empty-ic{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
    display:grid;place-items:center;background:rgba(37,99,176,.09)}
  .rev-empty-l{font-size:16px;color:var(--ink);line-height:1.6}

  /* FOOTER */
  footer{background:var(--navy);color:#A9BFD3;padding:64px 0 40px;margin-top:40px}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
  .foot-brand p{font-size:14px;line-height:1.65;margin-top:16px;color:#7E96AC;max-width:280px}
  .foot-col h5{color:#fff;font-size:12.5px;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
  .foot-col a{display:block;font-size:14.5px;padding:6px 0;color:#A9BFD3}.foot-col a:hover{color:var(--beam-soft)}
  /* #9DB3C7 rather than #6d839a. On the navy footer the old grey measured
     3.72:1, which fails AA for normal text, and the two things it coloured are
     the tax disclaimer and now the trading disclosure: the two lines in the
     footer that exist to be READ rather than skimmed past. This repo already
     took that position on .calc-disclaimer, whose comment says a caveat that
     fails contrast is a caveat nobody reads. 6.74:1. */
  .foot-bot{border-top:1px solid #1d3a57;padding-top:26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#9DB3C7}
  .foot-bot .disc{max-width:680px;line-height:1.55}
  /* The trading disclosure. Same muted treatment as the marketing disclaimer
     above it, but its own class: a required legal particular should be findable
     by name, not by being the second grey line in the footer. */
  /* The trading disclosure: its own full width block above the bottom strip,
     with the same small heading treatment the footer columns use. It is not in
     the Companie column because that column is 203px on desktop and the
     registered office needs 380px, which turned four particulars into six
     wrapped lines. Full width, every particular on one line. */
  .foot-legal{border-top:1px solid #1d3a57;padding-top:24px;margin-bottom:8px;font-size:12.5px;line-height:1.5;color:#9DB3C7}
  .foot-legal h5{color:#fff;font-size:12.5px;font-weight:700;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px}
  .foot-legal div{margin-bottom:3px}
  .foot-legal b{color:#C7D6E6;font-weight:600}

  /* --------------------------------------------------------------------------
     OUTCOME PAGES (/abonat/, /dezabonat/)

     The far end of a link in somebody's inbox. No nav, no footer and no other
     link than the one back to the site: a person arriving here has one question,
     did it work, and every extra thing on the page is between them and the
     answer. Here rather than inline in the two pages because they are the same
     layout twice, which is the reason this stylesheet exists.
     -------------------------------------------------------------------------- */
  .outcome{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:40px 20px;text-align:center}
  .outcome .wordmark svg{height:30px}
  .outcome-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:38px 32px;max-width:520px}
  .outcome-card h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3.4vw,30px);line-height:1.25;color:var(--navy)}
  .outcome-card p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:14px 0 24px}

  /* --------------------------------------------------------------------------
     NEWSLETTER SIGN UP (#newsletter on both pages)

     One block, used twice, which is the reason it is in this file. The only
     difference between the two placements is the data-source on the form.
     -------------------------------------------------------------------------- */
  /* A BAND, NOT A FULL SECTION, and it is the last thing before the footer.
     At the page's 96px section rhythm plus the footer's own 40px margin and
     64px of padding, there were 201px between the fine print and the first line
     of the footer, most of it empty. Worse, the 40px margin put a stripe of
     page background between this band's bottom border and the navy, so two
     adjacent blocks read as two blocks with a gap rather than one edge.

     72px here, and the footer margin removed where it follows this band, so the
     navy starts at the border. 136px between the two texts now. */
  .nlsub{background:var(--sky-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:72px;padding-bottom:72px}
  .nlsub + footer{margin-top:0}
  /* NO VERTICAL PADDING OF ITS OWN. section already carries 96px top and
     bottom on this page, and adding 64px here made it 160px each side: the
     empty half screen between the fine print and the footer. Every other
     section leaves its .wrap at zero and lets the section rule set the rhythm,
     and now so does this one. */
  .nlsub-in{max-width:640px;text-align:center}
  .nlsub h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(23px,3vw,29px);line-height:1.25;color:var(--navy)}
  .nlsub-lead{font-size:16px;line-height:1.7;color:var(--ink-2);margin:12px auto 22px;max-width:520px}
  .nlsub form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .nlsub input[type=email]{
    flex:1 1 280px;max-width:340px;font:inherit;font-size:16px;color:var(--ink);
    background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:14px 20px}
  .nlsub input[type=email]:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
  .nlsub button{flex:0 0 auto;cursor:pointer;border:0}
  .nlsub button[disabled]{opacity:.6;cursor:default}

  /* THE HONEYPOT. Off screen rather than display:none, because a bot that
     bothers to check computed styles skips a hidden field and fills an off
     screen one. aria-hidden and tabindex -1 keep it away from screen readers
     and from anybody tabbing through the form. */
  .nlsub-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* Reserves its own line whether or not there is a message, so the fine print
     below does not jump up the page the moment somebody submits. */
  .nlsub-msg{min-height:22px;margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
  .nlsub-msg-good{color:var(--clear);font-weight:600}
  .nlsub-msg-bad{color:#B4342B;font-weight:600}
  .nlsub-fine{font-size:13px;line-height:1.6;color:var(--ink-3);margin-top:6px;max-width:460px;margin-left:auto;margin-right:auto}


  /* --------------------------------------------------------------------------
     BACK TO TOP

     The page is around ten thousand pixels tall and the nav, while sticky, only
     offers the brand link, which navigates rather than scrolls.

     QUIET, NOT A BADGE. Same treatment as the nav itself: a translucent panel,
     a blur behind it, a hairline border. It belongs to the page furniture
     rather than sitting on top of it, which is what a filled circle with a drop
     shadow would do.

     44px is the tap target floor, so the box is that even though the arrow
     inside it is 17px. The visual weight comes from the arrow, not the box.

     HIDDEN MEANS HIDDEN, and the `hidden` attribute is what does it. Opacity
     alone leaves a link in the tab order and in the accessibility tree, so a
     keyboard user would tab into an invisible control sitting over the page.
     -------------------------------------------------------------------------- */
  .totop{
    position:fixed;right:20px;bottom:20px;z-index:70;
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:14px;
    color:var(--ink-2);
    background:rgba(251,252,254,.85);backdrop-filter:blur(16px);
    border:1px solid var(--line);
    box-shadow:0 2px 10px -6px rgba(14,42,71,.25);
    opacity:0;transform:translateY(6px);
    transition:opacity .22s ease,transform .22s ease,color .2s,border-color .2s;
  }
  .totop[hidden]{display:none}
  .totop.is-in{opacity:1;transform:none}
  .totop:hover{color:var(--navy);border-color:#D7E0EA}
  .totop:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  @media(prefers-reduced-motion:reduce){.totop{transition:none;transform:none}}

/* ==========================================================================
   The VAT scheme calculator's own pieces. Everything else on that page reuses
   the tax calculator's classes.
   ========================================================================== */
.cq {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #fff;
}
.cq.on { border-color: var(--navy); }
.cq-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cq-state { font-size: 13px; color: var(--ink-2); }
/* An .imoney with no currency symbol. The shared rule reserves 36px on the
   left for one, which leaves a percentage floating in the middle of nowhere. */
.imoney:not(:has(.cur)) input { padding-left: 16px; }
.cnote {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sky-2, #f4f8fd);
}
/* The reverse charge panel. Amber rather than red: it is not an error, it is
   the most important thing on the page. */
.cnote-warn {
  background: #FDF6E7;
  border: 1px solid #F0DFB4;
  color: var(--ink);
}
/* THE SAME PANEL, INSIDE THE DARK RESULT, AND IT HAD TO BE SAID SEPARATELY.

   The cream above is built for the white card. The result panel is navy, and it
   already has its own two boxes: .cres-break, translucent white, and .csave,
   amber tinted. Dropping an opaque cream block between them was the only thing
   on that panel that came from the light half of the page, which is exactly how
   it read: a colour from somewhere else.

   So it borrows .csave's treatment rather than inventing a third. Same amber,
   same tint, same border weight. It stays the most important thing on the panel
   because amber on navy is the loudest thing there, which is the whole reason
   .csave uses it. */
.cresult .cnote-warn {
  background: rgba(242, 180, 51, .12);
  border: 1px solid rgba(242, 180, 51, .35);
  color: #E8EFF6;
}
.cresult .cnote-warn b {
  /* The lead sentence, in the same soft amber .csave-t uses for its title, so
     the two boxes agree about what a heading looks like on this panel. */
  color: #FBE3A0;
}
.cres-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.cres-verdict { margin: 14px 0 6px; font-size: 16px; }

/* A link out to another page's tool. Reads as a row rather than a card: it is a
   door, not a thing to admire. */
.xlink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.55;
  transition: border-color .15s ease;
}
.xlink:hover { border-color: var(--navy); }
.xlink b { display: block; color: var(--navy); margin-bottom: 2px; }
.xlink svg { flex: none; color: #8194A6; }

/* The way between the quick answer and the four quarters. A link and not a
   button: it is not the action of the page, it is the other version of it. */
.clink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #2563B0;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Sliders on the VAT calculator.

   A SLIDER AND A BOX FOR THE SAME VALUE, and only one is shown at a time. The
   slider is the default because the question is usually "roughly, which way
   does this go", and moving it until the answer flips shows where the tipping
   point is. The box is for somebody with £47,350 in front of them, who should
   not have to nudge anything.
   ========================================================================== */
.vslide {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* THE TRACK AND THE THUMB, because a range input left alone renders as the
   browser's own control and looked nothing like the rest of the page. Same
   shape as the app's wage slider. */
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background: var(--sky);
  margin: 10px 0;
  outline: none;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--beam);
  border: 3px solid #fff;
  box-shadow: var(--sh-sm);
  cursor: pointer;
}
.calc-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--beam);
  border: 3px solid #fff;
  box-shadow: var(--sh-sm);
  cursor: pointer;
}
.vslide-val {
  flex: none;
  min-width: 92px;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* The two modes. Default: sliders. .typed on the form swaps them, and neither
   is ever removed from the DOM, so the value survives the switch. */
.cfield[data-key] .imoney { display: none; }
.cfield[data-key] .vslide { display: flex; }
.typed .cfield[data-key] .imoney { display: flex; }
.typed .cfield[data-key] .vslide { display: none; }

/* Ce lipsește, spus sub formular. Nu e o eroare și nu e un răspuns: e o
   propoziție liniștită acolo unde s-ar fi dus răspunsul. */
.cprompt {
  padding: 22px 34px 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.cprompt[hidden] { display: none; }
@media (max-width: 560px) { .cprompt { padding: 18px 22px 22px; } }

/* Butonul de sub răspuns e centrat și singur, ca să se vadă că e pasul
   următor, nu unul din două lucruri la fel. */
.cnext { text-align: center; padding-bottom: 26px; }
/* Șterge. Discret pe fond alb, la fel cum .cres-reset e discret pe navy: e o
   ieșire, nu o acțiune pe care o vrea cineva des, și nu are voie să arate ca un
   al doilea buton lângă pasul următor. */
/* Cele două acțiuni de sub cifre, pe un rând. */
.vfig-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.cclear {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cclear:hover { color: var(--navy); }

/* Un câmp pe care îl așteaptă răspunsul. Nu o eroare: nu e nimic greșit, doar
   nu e încă acolo, deci culoarea farului, nu roșu. */
.imoney input.input-wanted { border-color: var(--beam); background: #FFFBF2; }
.field-wanted {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink-2);
}

/* Bara cu răspunsul, cât timp panoul e sub ecran. Fixă jos, peste tot ce e sub
   ea, și dispare singură când se vede panoul adevărat. */
.csticky {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 60;
  width: calc(100% - 32px);
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border: 0;
  border-radius: 100px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 30px rgba(14, 42, 71, .28);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-align: left;
}
.csticky[hidden] { display: none; }
.csticky-text { font-size: 15px; font-weight: 700; }
.csticky-go {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--beam);
  white-space: nowrap;
}

/* Un procent, cu semnul în casetă. O casetă goală cu % în ea se vede că e
   goală; un "9,5" gri se vede ca o cifră deja pusă. */
.imoney.ipct .suf {
  position: absolute;
  right: 16px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-3);
  pointer-events: none;
}
.imoney.ipct input { padding-right: 38px; }

/* ============================================================================
   Cele două scheme una lângă alta.

   PANOUL E ÎNCHIS LA CULOARE, deci cardurile sunt albe translucide pe el, nu
   albe pe alb ca în aplicație. Aceleași nume de clase, ca să se citească la fel
   în ambele locuri, dar culorile sunt ale panoului.
   ============================================================================ */
.cmp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
}
.cmp-card {
  position: relative;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 22px 12px 16px;
  text-align: center;
}
.cmp-card.win {
  border-color: rgba(126, 224, 176, .55);
  background: rgba(126, 224, 176, .10);
}
.cmp-best {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #7EE0B0;
  color: #0E2A47;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.cmp-card-name {
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #A9BFD3;
}
.cmp-card-keep {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  margin: 8px 0 3px;
}
/* Un interval e două cifre și un cuvânt, iar la mărimea unei singure cifre
   trecea pe trei rânduri și lăsa cardurile inegale. */
.cmp-card-keep.range { font-size: 17px; line-height: 1.3; }
.cmp-card.win .cmp-card-keep { color: #7EE0B0; }
.cmp-card-sub { font-size: 12px; color: #A9BFD3; line-height: 1.35; }
.cmp-table { width: 100%; border-collapse: collapse; position: relative; }
.cmp-table th,
.cmp-table td {
  padding: 11px 8px;
  text-align: right;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cmp-table th:first-child,
.cmp-table td:first-child { text-align: left; color: #A9BFD3; font-weight: 400; }
.cmp-table thead th {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #A9BFD3;
  font-weight: 700;
}
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td { color: #fff; font-weight: 600; }
.cmp-table tr.keep td { font-weight: 700; }
.cmp-table tr.keep td:not(:first-child) { color: var(--beam); }

/* ============================================================================
   ÎNTREBĂRILE DE SUB CALCULATOR.

   Erau <details> nestilizate: triunghiul browserului, fontul browserului,
   mărimea browserului, aliniate la stânga într-o pagină centrată. Acum sunt
   carduri ca restul site-ului, cu titlul în Fraunces și o săgeată care se
   întoarce la deschidere.
   ============================================================================ */
.faq {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: #d7e0ea; box-shadow: var(--sh); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-lg); }
/* Săgeata, făcută din două laturi ale unui pătrat, ca să nu ceară un fișier. */
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.faq details p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
@media (max-width: 560px) {
  .faq summary { padding: 17px 18px; font-size: 17.5px; }
  .faq details p { padding: 0 18px 18px; font-size: 15.5px; }
}

/* ============================================================================
   PASUL 4: TVA, ÎN ACELAȘI CARD.

   A fost o vreme un al doilea card sub calculator, cu un link către pagina de
   TVA. Acum e pasul patru al aceluiași calculator: închis până când e deschis,
   pentru că majoritatea nu sunt înregistrați în scopuri de TVA și patru cifre
   în plus ar face calculatorul de taxe să pară mai lung decât e.
   ============================================================================ */
.cvat { border-top: 1px solid var(--line); }
/* Cardul de TVA e un .choice ca cele de la pasul 1, deci ia toate regulile lor
   și adaugă doar ce diferă: e pe toată lățimea, e un <button>, și are o săgeată
   la capăt care se întoarce când e deschis. */
.cvat-open {
  width: 100%;
  align-items: center;
  text-align: left;
  font-family: inherit;
  margin-top: 2px;
}
.cvat-txt { flex: 1; }
/* .choice-t și .choice-d sunt <div> în pasul 1 și <span> aici, în interiorul
   unui <button>. Fără asta, titlul și explicația curgeau pe același rând. */
.cvat-open .choice-t,
.cvat-open .choice-d { display: block; }
.cvat-open .choice-t { font-size: 15.5px; }
.cvat-chev {
  flex: none;
  display: inline-flex;
  color: var(--ink-3);
  transition: transform .18s;
}
.cvat.on .cvat-open { border-color: var(--navy); background: var(--sky-2); }
.cvat.on .cvat-chev { transform: rotate(180deg); color: var(--navy); }
.cvat-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
#vatBody { margin-top: 22px; }
#vatBody[hidden] { display: none; }