*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Token superset shared conceptually with index.html and treaty-rates.html - keep the three :root blocks in sync. */ :root { --blue: #1a4b8c; --blue-mid: #2563b0; --blue-deep: #0d2d5e; --blue-light: #e8f0fb; --gold: #c9a227; --gold-light: #fdf6e3; --green: #15803d; /* dark enough for 4.5:1 text contrast on --green-light */ --green-light: #dcfce7; --amber: #b45309; /* dark enough for 4.5:1 text contrast on --amber-light */ --amber-light: #fef3c7; --text: #1e2330; --muted: #5a6275; --border: #d4dae6; --white: #ffffff; --bg: #f7f9fc; --radius: 10px; --shadow-sm: 0 1px 2px rgba(26,75,140,.05), 0 2px 8px rgba(26,75,140,.06); --shadow: 0 2px 4px rgba(26,75,140,.05), 0 6px 24px rgba(26,75,140,.09); --shadow-lg: 0 4px 8px rgba(26,75,140,.06), 0 16px 48px rgba(26,75,140,.14); } html { scroll-behavior: smooth; } body { font-family: system-ui, "Segoe UI Variable Text", "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; } /* Sticky-footer min-height is viewport-relative (100vh), which is exactly what makes it dangerous inside an iframe embed that resizes itself to fit its content: grow the iframe → 100vh grows → the flexed .page stretches to fill it → reported content height grows → iframe grows again, forever. The frame-ancestor guard adds this class to only when legitimately embedded in a trusted parent, so the sticky footer still works normally for direct/standalone viewing. */ html.zwco-embedded body { min-height: 0; } /* Form controls don't inherit the body font by default */ input, select, button { font-family: inherit; } /* Keyboard navigation - visible focus on links (controls have their own rings) */ a:focus-visible { outline: 3px solid rgba(37,99,176,.35); outline-offset: 2px; border-radius: 4px; } /* CONSULTATION PROMPT Modal invitation to book a consultation, shown once per session after the visitor has actually run a calculation (never before content, never repeatedly - see the trigger logic in calculator2.html). */ .consult-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(15,20,32,.55); backdrop-filter: blur(3px); } .consult-overlay[data-open="true"] { display: flex; } .consult-modal { position: relative; width: 100%; max-width: 30rem; max-height: 90vh; overflow-y: auto; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.75rem 1.5rem 1.5rem; text-align: center; border-top: 4px solid var(--gold); } .consult-modal h2 { font-size: 1.15rem; font-weight: 700; color: var(--blue); margin-bottom: .6rem; line-height: 1.4; } .consult-modal p { font-size: .9rem; color: var(--text); line-height: 1.6; } .consult-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; } .consult-actions .cta-btn { width: 100%; } .consult-dismiss { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 600; min-height: 44px; border-radius: 7px; } .consult-dismiss:hover { color: var(--blue); background: var(--bg); } .consult-close { position: absolute; inset-inline-end: .5rem; top: .5rem; width: 44px; height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.5rem; line-height: 1; border-radius: 8px; } .consult-close:hover { color: var(--text); background: var(--bg); } .consult-fineprint { font-size: .74rem !important; color: var(--muted) !important; margin-top: 1rem; line-height: 1.55 !important; } /* SURTAX NOTICE - deliberately prominent. The engine never computes mas yesef (disclosure only, per the project rule), and the disclosure used to live in the small grey footnote at the bottom of each section - invisible in practice. On amounts like a ₪900k+ dividend distribution the surtax is close to certain, so the notice sits right under the results, styled to be read. */ .surtax-note { max-width: 900px; margin: 1rem auto 0; background: var(--amber-light); border: 1px solid #fcd34d; border-inline-start: 4px solid var(--amber); border-radius: 8px; padding: .7rem 1rem; font-size: .875rem; line-height: 1.55; color: #7a4a08; text-align: start; } .surtax-note strong { font-weight: 800; } /* The escalation sentence stays hidden until the watched figure crosses the threshold (see the watcher script in calculator2.html). */ .surtax-note .surtax-hot { display: none; } .surtax-note--hot { border-color: var(--amber); } .surtax-note--hot .surtax-hot { display: inline; font-weight: 800; } /* CONTACT CTA (shown after calculator results) */ .contact-cta { max-width: 900px; margin: 2rem auto 0; background: var(--blue-light); border: 1px solid #bfcfe8; border-radius: var(--radius); padding: 1.5rem 1.75rem; text-align: center; } .contact-cta p { color: var(--text); font-size: .95rem; margin-bottom: .75rem; } /* Not scoped to .contact-cta: the same button is reused in the consultation modal, and a scoped rule left it with no padding (a 27px-tall tap target) there. */ a.cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--blue); color: var(--white); padding: .6rem 1.4rem; border-radius: 7px; text-decoration: none; font-weight: 600; font-size: .9rem; } a.cta-btn:hover { background: var(--blue-mid); } /* ── PWA APP SHELL: bottom tab bar ────────────────────────────── Shown on narrow screens and whenever the site is running as an installed app. Deliberately hidden inside the Wix iframe embed (the host page has its own navigation there), reusing the .zwco-embedded flag the frame-ancestor guard already sets. */ .app-tabbar { display: none; /* top:auto is load-bearing: the bare `nav` rule sets top:0 for the sticky header, and without resetting it a fixed element with both top:0 and bottom:0 stretches over the whole viewport. */ position: fixed; inset-inline: 0; top: auto; bottom: 0; z-index: 150; background: var(--white); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 8px rgba(26,75,140,.08); } .app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 56px; padding: .4rem .2rem; text-decoration: none; color: var(--muted); font-size: .68rem; font-weight: 600; text-align: center; } .app-tab .tab-icon { font-size: 1.15rem; line-height: 1; } .app-tab[aria-current="page"] { color: var(--blue); } .app-tab:focus-visible { outline: 3px solid rgba(37,99,176,.35); outline-offset: -3px; border-radius: 6px; } @media (max-width: 820px) { .app-tabbar { display: flex; } body { padding-bottom: 64px; } } @media (display-mode: standalone) { .app-tabbar { display: flex; } body { padding-bottom: 64px; } } /* Higher specificity than the media rules above - no !important needed. */ html.zwco-embedded .app-tabbar { display: none; } html.zwco-embedded body { padding-bottom: 0; } /* ── Contact page options ── */ .contact-list { display: flex; flex-direction: column; gap: .6rem; } .contact-option { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .85rem 1rem; border: 1.5px solid var(--border); border-radius: 8px; background: var(--white); text-decoration: none; color: var(--text); transition: border-color .2s, background .2s; } .contact-option:hover, .contact-option:focus-visible { border-color: var(--blue-mid); background: var(--blue-light); } .contact-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; } .contact-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .contact-text strong { font-size: .95rem; color: var(--blue); } .contact-sub { font-size: .8rem; color: var(--muted); } /* SKIP LINK */ .skip-link { position: absolute; top: -3rem; left: 1rem; z-index: 200; background: var(--blue); color: var(--white); padding: .6rem 1.1rem; border-radius: 6px; font-size: .9rem; font-weight: 600; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 1rem; } /* NAV */ nav { background: var(--white); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; } .nav-inner { /* 1100px, matching the guide and treaty pages: the sticky bar must not change width as you move between pages, even though page content containers differ. */ max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.5rem; } /* Brand lockup: firm logo + site name + beta marker + outbound links. The logo is the primary identity here; it must stay a local asset. */ .nav-brand-group { display: flex; align-items: center; gap: .55rem; min-width: 0; } .nav-brand { text-decoration: none; display: flex; align-items: center; gap: .55rem; min-width: 0; } .nav-logo { height: 34px; width: auto; display: block; flex-shrink: 0; } .nav-title { font-weight: 700; font-size: .95rem; color: var(--blue); white-space: nowrap; padding-left: .55rem; border-left: 1px solid var(--border); } .beta-badge { flex-shrink: 0; background: var(--amber-light); color: var(--amber); border: 1px solid #fcd34d; border-radius: 4px; padding: .1rem .38rem; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .nav-social { display: flex; align-items: center; gap: .1rem; padding-left: .4rem; border-left: 1px solid var(--border); } .nav-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--muted); transition: color .2s, background .2s; } .nav-social a:hover { color: var(--blue); background: var(--blue-light); } .nav-social svg { width: 17px; height: 17px; fill: currentColor; display: block; } @media (max-width: 820px) { /* Outbound icons drop out of the crowded mobile bar - the footer keeps them */ .nav-social { display: none; } } @media (max-width: 600px) { /* The site name drops out, which frees the width the logo needs. At 28px the Hebrew line and "CERTIFIED PUBLIC ACCOUNTANTS" rendered around 4px tall - below legibility. 44px is the largest that still leaves room for the Beta chip and the menu. */ .nav-title { display: none; } .nav-logo { height: 44px; } .nav-inner { padding: .6rem 1rem; } } @media (max-width: 360px) { .nav-logo { height: 38px; } } /* ── PHONE ───────────────────────────────────────────────────────── On a 390px screen the beta strip, the gradient hero and the steps bar together pushed the first form field below the fold - the visitor reached the calculator without seeing a single input. These trim the chrome rather than the content. */ @media (max-width: 700px) { .beta-bar { font-size: .78rem; padding: .5rem 1rem; text-align: start; } .hero { padding: 1.4rem 1.2rem 1.2rem; text-align: start; } .hero h1 { font-size: 1.45rem; line-height: 1.2; } .hero p { font-size: .9rem; margin-top: .35rem; } .steps-bar { padding: .5rem 1rem; } .steps-inner { font-size: .78rem; } .page { padding: 1rem; } .card { padding: 1.1rem 1rem; } .card-header h2 { font-size: 1.15rem; } .card-header p { font-size: .86rem; } } @media (max-width: 430px) { /* The subtitle restates the heading; the tab bar already names the page. */ .hero p { display: none; } } /* BETA NOTICE BAR - a one-line disclosure. It used to print its full paragraph inline, which ran to five lines on a phone and took a large share of the first screen. Same wording, one tap away. */ .beta-bar { background: var(--amber-light); border-bottom: 1px solid #fcd34d; color: #7a4a08; font-size: .85rem; line-height: 1.5; } .beta-bar > summary { padding: .55rem 1.5rem; cursor: pointer; text-align: center; list-style: none; display: block; } .beta-bar > summary::-webkit-details-marker { display: none; } /* A caret rather than the native triangle, so it centres with the text. */ .beta-bar > summary::after { content: " ▾"; font-size: .9em; opacity: .75; } .beta-bar[open] > summary::after { content: " ▴"; } .beta-bar > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .beta-bar strong { font-weight: 800; } .beta-bar > p { margin: 0; padding: 0 1.5rem .7rem; max-width: 60rem; margin-inline: auto; text-align: start; } /* Shared four-item primary nav (Guide · Treaty Rates · Contact · Calculator) */ .nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; } .nav-links a { text-decoration: none; color: var(--muted); font-size: .875rem; padding: .4rem .75rem; border-radius: 6px; transition: all .2s; display: block; } .nav-links a:hover { color: var(--blue); background: var(--blue-light); } .nav-links a[aria-current="page"] { color: var(--blue); font-weight: 600; } a.nav-cta { background: var(--blue); color: var(--white); font-weight: 600; padding: .45rem 1rem; border-radius: 50px; margin-left: .35rem; } .nav-links a.nav-cta { color: var(--white); } .nav-links a.nav-cta:hover { background: var(--blue-mid); color: var(--white); } .nav-links a.nav-cta[aria-current="page"] { background: var(--blue-mid); color: var(--white); } @media (max-width: 820px) { /* The bottom tabbar takes over cross-page nav at this width; brand-only top bar. Inside the Wix embed the tabbar is hidden, so keep the links (they may wrap onto a second line). */ html:not(.zwco-embedded) .nav-links { display: none; } .nav-inner { flex-wrap: wrap; row-gap: .4rem; } } /* HERO - same gradient, pattern, and gold keyline as the guide's hero so every page reads as one designed site. */ .hero { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: var(--white); padding: 3rem 1.5rem 2.5rem; text-align: center; position: relative; overflow: hidden; border-bottom: 3px solid var(--gold); } .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero > * { position: relative; } .hero-badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: .3rem .95rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; color: rgba(255,255,255,.9); } .hero h1 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; line-height: 1.2; margin-bottom: .5rem; letter-spacing: -.015em; } .hero p { font-size: .95rem; color: rgba(255,255,255,.75); max-width: 480px; margin: 0 auto; } /* STEPS */ .steps-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: .85rem 1.5rem; } .steps-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: .5rem; font-size: .82rem; } .step { display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 20px; font-weight: 600; } .step.done { color: var(--green); } .step.active { background: var(--blue); color: var(--white); } .step.pending{ color: var(--muted); } .step-num { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; } .step.done .step-num { background: var(--green-light); color: var(--green); } .step.active .step-num { background: rgba(255,255,255,.25); } .step.pending .step-num{ background: var(--border); color: var(--muted); } .step-sep { color: var(--border); font-size: 1rem; } /* PAGE */ .page { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; flex: 1; } /* CARD / RESULT PANEL - shared shell so inputs and results read as one system */ .card, .track-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.25rem 2.5rem; } .card { margin-bottom: 1.5rem; } .track-section { margin-top: 1.5rem; } @media (max-width: 580px) { .card, .track-section { padding: 1.5rem 1.25rem; } } .card-header, .track-section-header { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .card-header h2, .track-section-header h2 { font-size: 1.15rem; font-weight: 700; color: var(--blue); margin-bottom: .25rem; } .card-header p, .track-section-header p { font-size: .87rem; color: var(--muted); } /* FIELDS */ .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; } @media (max-width: 560px) { .fields { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .4rem; } .field.full { grid-column: 1 / -1; } .field label { font-size: .84rem; font-weight: 600; color: var(--text); } .field select { width: 100%; border: 1.5px solid var(--border); border-radius: 7px; padding: .65rem .9rem; font-size: .94rem; color: var(--text); background: var(--white); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235a6275' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; transition: border-color .2s, box-shadow .2s; } .field select:hover { border-color: var(--blue-mid); } .field select:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(37,99,176,.12); } .field select.filled { border-color: #86efac; background-color: #f0fdf4; } /* INCOME INPUT */ .income-wrap { display: flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: 7px; background: var(--white); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .income-wrap:focus-within { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(37,99,176,.12); } .income-wrap.filled { border-color: #86efac; background-color: #f0fdf4; } .income-prefix { display: flex; align-items: center; padding: 0 .5rem 0 .9rem; color: var(--muted); font-size: .95rem; user-select: none; flex-shrink: 0; } .income-wrap input { border: none; outline: none; background: transparent; padding: .65rem .5rem .65rem .2rem; font-size: .94rem; color: var(--text); flex: 1; min-width: 0; } .income-wrap input::-webkit-inner-spin-button { opacity: .4; } /* BRACKET TABLE */ .bracket-table-wrap { grid-column: 1 / -1; overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); } .bracket-table-wrap table { width: 100%; border-collapse: collapse; font-size: .88rem; } .bracket-table-wrap thead th { background: var(--blue); color: var(--white); padding: .6rem 1rem; text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .04em; } .bracket-table-wrap thead th:first-child { border-radius: 0; } .bracket-table-wrap tbody td { padding: .55rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); } .bracket-table-wrap tbody tr:last-child td { border-bottom: none; } .bracket-table-wrap tbody tr:nth-child(even) { background: var(--bg); } /* slide-in */ @keyframes slideIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* TWO-COLUMN LAYOUT */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } } /* METRICS GRID - auto-fit keeps 2 or 3 metrics on one scannable row */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-top: 1.5rem; animation: slideIn .2s ease; } .metric { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem; border-top: 3px solid var(--blue-mid); } .metric-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .metric-val { font-size: 1.25rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; min-width: 0; } .metric-val.accent { color: var(--blue); font-size: 1.45rem; } /* CHECKBOX ROW */ .checkbox-row { display: flex; align-items: center; gap: .55rem; font-size: .875rem; font-weight: 600; color: var(--text); cursor: pointer; margin-top: .75rem; } .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--blue); } /* Residency echoed read-only in Step 2 (the question is asked in Step 1). Matches select height/weight so the field row keeps its rhythm. */ .residency-locked { font-weight: 600; font-size: .92rem; color: var(--text); padding: .5rem 0 .1rem; } /* hint text below input */ .input-hint { font-size: .78rem; color: var(--muted); margin-top: .4rem; } .input-hint a { color: var(--blue); font-weight: 600; } /* INPUT TABLE */ .input-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .input-table th { background: var(--blue); color: var(--white); padding: .55rem 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-align: center; } .input-table th:first-child { text-align: left; } .input-table td { padding: .5rem .75rem; border: 1px solid var(--border); vertical-align: middle; } .input-table tbody tr:nth-child(even) { background: var(--bg); } .input-row-label { font-weight: 600; font-size: .87rem; color: var(--text); white-space: nowrap; width: 220px; } .input-table input[type="text"] { width: 100%; border: 1.5px solid var(--border); border-radius: 6px; padding: .5rem .65rem; font-size: .9rem; color: var(--text); background: var(--white); outline: none; transition: border-color .2s, box-shadow .2s; } .input-table input[type="text"]:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(37,99,176,.12); } .input-row-disabled { opacity: .4; } .input-row-disabled input { background: var(--bg); cursor: not-allowed; } .table-checkboxes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.5rem; align-items: center; margin-top: .9rem; } .table-checkboxes .checkbox-row { margin-top: 0; } /* TRACK COMPARISON SECTION (shell styles shared with .card above) */ .track-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 720px) { .track-cards { grid-template-columns: 1fr; } } .track-cards-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px) { .track-cards-2 { grid-template-columns: 1fr; } } .track-card.track-ineligible { opacity: .55; } .track-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .6rem; } .track-card-name { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .track-letter { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--blue-light); color: var(--blue); font-size: .68rem; font-weight: 800; line-height: 1; } .track-letter-c { background: var(--amber-light); color: var(--amber); } .track-card-rate { font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1.1; } .track-divider { border: none; border-top: 1px solid var(--border); margin: .25rem 0; } .track-result-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; gap: .5rem; } .track-result-label { color: var(--muted); } .track-result-val { font-weight: 700; color: var(--text); } .track-badge-area { min-height: 1.75rem; margin-top: .25rem; } /* The verdict is the calculator's answer - a proper callout, not an italic afterthought. :empty hides the pill until there is content. */ .track-verdict { margin-top: 1.25rem; font-size: .92rem; color: var(--text); text-align: center; font-style: normal; background: var(--blue-light); border: 1px solid #bfcfe8; border-radius: 8px; padding: .75rem 1.1rem; overflow-wrap: anywhere; min-width: 0; } .track-verdict:empty { display: none; } .badge { display: inline-block; padding: .25rem .65rem; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .03em; } .badge-recommended { background: var(--green-light); color: var(--green); border: 1px solid #86efac; } .badge-close { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .badge-warning { background: var(--amber-light); color: var(--amber); border: 1px solid #fcd34d; } .track-card.track-recommended { border-color: var(--green); background: #f7fdf9; box-shadow: 0 2px 12px rgba(22,163,74,.10); } .track-card.track-recommended .track-card-rate { color: var(--green); } .bl-note { font-size: .74rem; color: var(--amber); line-height: 1.4; background: var(--amber-light); border: 1px solid #fcd34d; border-radius: 6px; padding: .4rem .65rem; margin-top: .25rem; } /* Ownership flag badge */ .cg-flag { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; padding: .25rem .7rem; border-radius: 20px; margin-left: .5rem; } .cg-flag-yes { background: var(--green-light); color: var(--green); border: 1px solid #86efac; } .cg-flag-no { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } .cg-flag-na { background: var(--bg); color: var(--muted); border: 1px solid var(--border); font-weight: 400; font-style: italic; } /* Foreign-owner notice box */ .foreign-notice { background: var(--amber-light); border: 1px solid #fcd34d; border-radius: var(--radius); padding: .9rem 1.1rem; margin-top: 1rem; font-size: .875rem; color: var(--text); line-height: 1.55; } .foreign-notice strong { color: var(--amber); } /* CG extras area below the input table */ .cg-extras { margin-top: 1.25rem; } /* OPTION GRID - two-column option fields that stack on small screens */ .opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin-top: 1.5rem; align-items: start; } @media (max-width: 560px) { .opt-grid { grid-template-columns: 1fr; } } /* MOBILE - keep input tables usable on ~375px screens */ @media (max-width: 580px) { .input-row-label { white-space: normal; width: 38%; min-width: 100px; } .input-table td { padding: .45rem .5rem; } .input-table input[type="text"] { padding: .6rem .55rem; } } /* FALLBACK */ .fallback { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; text-align: center; color: var(--muted); box-shadow: var(--shadow-sm); } .fallback p { margin-bottom: 1rem; } .fallback a { color: var(--blue-mid); text-decoration: none; font-weight: 600; } .fallback a:hover { text-decoration: underline; } /* FOOTER */ footer { background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue) 120%); color: rgba(255,255,255,.82); text-align: center; padding: 2.5rem 1.5rem 2rem; font-size: .84rem; border-top: 3px solid var(--gold); } footer strong { color: var(--white); } footer a { color: var(--white); text-decoration: none; text-underline-offset: 3px; } footer a:hover { text-decoration: underline; } /* The footer link row is a