/*
   The public page only.

   Everything here reads the theme's custom properties from theme.css and
   names no colour of its own — the landing page is Meenakari today, and if
   that changes it changes in one place.
*/

/*  THE BAR FOLLOWS ON THE PUBLIC PAGE ONLY. It is a long page with five
    places to get to, and a nav that scrolls away is a nav that is only usable
    from the top. The counter screens keep their own bar where it is - a till
    does not scroll.  */
html.landing { scroll-behavior: smooth; scroll-padding-top: 68px; }

.landing .topbar { position: sticky; top: 0; z-index: 40; }

@media (prefers-reduced-motion: reduce) {
    html.landing { scroll-behavior: auto; }
}

.topbar-in { display: flex; align-items: center; gap: 14px; width: 100%; }

.topnav { display: flex; gap: 14px; white-space: nowrap; }

.topnav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
}

.topnav a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════ hero ══ */
.hero {
    background: var(--sunken);
    border-bottom: 1px solid var(--line);
}

/*  TWO COLUMNS DOWN TO TABLET, one below it. The picture goes UNDER the words
    on a phone rather than beside them, because a 300px-wide bill panel is not
    a picture of anything.  */
.hero-in {
    padding: 76px 22px 84px;
    max-width: 1240px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

@media (max-width: 960px) {
    .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

.hero-copy { min-width: 0; }

.hero-note {
    margin: 22px 0 0;
    font-size: .84rem;
    color: var(--ink-faint);
}

.btn-lg { padding: 11px 22px; font-size: .98rem; }

/* ────────────────────────────────────────── the picture of the counter ── */
/*  A DRAWING, NOT A SCREENSHOT. A screenshot is out of date the day the screen
    changes and nobody remembers to retake it; this is built from the same
    tokens the real screen uses, so it ages with the theme instead.  */
.hero-shot { position: relative; min-width: 0; }

/*  The panel sits ABOVE the ornament behind it. Both are in the same corner
    and a positioned ornament would otherwise paint over the bill, which reads
    as scratches on the screen rather than as decoration.  */
.shot {
    position: relative;
    z-index: 1;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--raised);
    box-shadow: 0 22px 48px rgb(0 0 0 / .28);
    overflow: hidden;
}

.shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--sunken);
    border-bottom: 1px solid var(--line);
}

.shot-bar .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
}

.shot-url {
    margin-left: 10px;
    font-size: .76rem;
    letter-spacing: .04em;
    color: var(--ink-faint);
}

/*  Room at the foot for the chip that hangs off the corner - without it the
    chip sits on the Due line, which is the one figure on the panel a jeweller
    reads first.  */
.shot-body { padding: 14px 16px 42px; }

.shot-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 4.5rem 5.5rem minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    font-size: .82rem;
    border-bottom: 1px solid var(--line);
}

.shot-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-row .r { text-align: right; }

.shot-head {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom-color: var(--line-strong);
}

/*  Old metal comes off the bill, and it reads that way here too.  */
.shot-row.is-old { color: var(--ink-soft); }
.shot-row.is-old .r { color: var(--bad); }

.shot-tot { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }

.shot-tot div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .82rem;
    color: var(--ink-soft);
}

.shot-tot .is-sum {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line-strong);
    font-size: 1rem;
    color: var(--ink);
}

.shot-tot .is-sum b { color: var(--accent); }

/*  The two chips sit ON the panel, half off its edge - the thing a jeweller
    looks for, pulled out of the picture so it is read before the picture is.  */
.shot-chip {
    position: absolute;

    /*  Above the panel, which is itself above the ornament behind it. Three
       things in one corner is three layers, and the order has to be said
       rather than left to who was written last.  */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--raised);
    box-shadow: 0 10px 26px rgb(0 0 0 / .3);
}

.shot-chip .ico { width: 20px; height: 20px; color: var(--accent); flex: none; }
.shot-chip div { display: flex; flex-direction: column; line-height: 1.25; }
.shot-chip b { font-size: .88rem; }
.shot-chip span { font-size: .7rem; color: var(--ink-faint); }

.chip-a { top: -18px; right: -14px; }
.chip-b { bottom: -18px; left: 14px; }

/*  Off on a phone: they would sit over the panel they are pointing at.  */
@media (max-width: 700px) {
    .shot-chip { display: none; }
}

/* ═══════════════════════════════════════════════════ the figures strip ══ */
/*  FOUR THINGS THAT ARE TRUE. The strip is deliberately quiet - a row of huge
    numbers making claims is the part of a landing page nobody believes.  */
.facts { background: var(--raised); border-bottom: 1px solid var(--line); }

.facts-in {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    padding: 26px 22px;
}

.fact { display: flex; flex-direction: column; gap: 2px; }

.fact b {
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}

.fact span { font-size: .84rem; color: var(--ink-soft); }

.eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 16px;
}

.hero h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.03;
    letter-spacing: -.01em;
    margin: 0 0 18px;
    max-width: 20ch;
    text-wrap: balance;
}

/* ──────────────────────────────────────────────────────────── the tagline ── */
/*
    "JewelDesk thinks in milligrams" - the owner's line of 4 Sep 2026, sitting
    between the heading and the shop's own standfirst.

    TWO WEIGHTS ON ONE LINE, and that is the whole design: the claim in the ink
    colour and the proof beside it in the soft one. A tagline set at the same
    weight as the paragraph under it is a paragraph; set louder than the H1 it
    fights the heading. This sits between them and reads as neither.

    IT WRAPS ONTO TWO LINES ON A PHONE, which is why the proof is its own
    element rather than a dash inside the same sentence - a break mid-clause
    reads as a mistake, a break between two clauses reads as layout.
*/
.tagline {
    margin: 0 0 16px;
    max-width: 62ch;
    font-size: 1.02rem;
    line-height: 1.5;
}

.tagline b {
    font-family: var(--serif);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--accent);
}

.tagline span {
    display: inline-block;
    color: var(--ink-soft);
}

.standfirst {
    margin: 0 0 28px;
    max-width: 62ch;
    font-size: 1.06rem;
    color: var(--ink-soft);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ══════════════════════════════════════════════════════════════ bands ══ */
.band.alt { background: var(--sunken); border-block: 1px solid var(--line); }

.band { padding: 68px 0; }

/*  ONE HEADING BLOCK for every band, so the eye finds the same three things in
    the same order down the whole page: what this is, what it says, and the one
    line that qualifies it.  */
.band-head { max-width: 62ch; margin: 0 0 30px; }

.kicker {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-h {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    font-weight: 600;
    line-height: 1.12;
    margin: 0 0 10px;
    text-wrap: balance;
}

.section-sub { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.about-in { max-width: 76ch; }
.prose.lead { font-size: 1.1rem; line-height: 1.65; }

/* ══════════════════════════════════════════════ arriving on the scroll ══ */
/*  The class that hides is added BY SCRIPT and only when motion is welcome, so
    a page whose JavaScript never ran is a page that shows everything.  */
.reveal { transition: opacity .45s ease, transform .45s ease; }

.reveal.is-shy { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; }
    .reveal.is-shy { opacity: 1; transform: none; }
}

.prose { max-width: 68ch; color: var(--ink-soft); font-size: 1.02rem; margin: 0; }

.two-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

/* ═════════════════════════════════════════════════════════── features ══ */
/*  THREE ACROSS AT MOST. Four narrow columns leave five features as a row of
    four and one orphan, which reads as a card somebody forgot to finish.  */
/*  COMPACT (22 Sep 2026) - the owner's word, "compact sizes": four across
    on a desk, the picture a short 16:9 band rather than a 4:3 poster, and
    tighter words under it. Five features now sit as a row of four and one
    on the next line, which at this size reads as a grid, not an orphan.  */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.feature {
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 22px 24px;
    transition: border-color .18s ease, transform .18s ease;
}

/*  It lifts a little under the pointer. Enough to say the card is a thing;
    not so much that a grid of them looks like it is breathing.  */
.feature:hover { border-color: var(--accent); transform: translateY(-2px); }

.feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}

.feature-ico .ico { width: 20px; height: 20px; }

.feature h3 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.feature p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }

/* ═══════════════════════════════════════════════════ the three screens ══ */
.screens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.screen {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 28px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius);
}

.screen-ico { color: var(--accent); }
.screen-ico .ico { width: 26px; height: 26px; }

.screen h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.screen p { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }

/*  A tick list, drawn rather than bulleted - the marker is the same accent as
    everything else on the page and needs no font to arrive.  */
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.ticks li {
    position: relative;
    padding-left: 24px;
    font-size: .88rem;
    color: var(--ink-soft);
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .32em;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════ how it starts ══ */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    counter-reset: step;
}

.steps li {
    position: relative;
    padding: 22px 20px 24px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.step-no {
    display: block;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .14em;
    color: var(--accent);
    margin-bottom: 10px;
}

.steps h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.steps p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }

/* ════════════════════════════════════════════════════════════── plans ══ */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    align-items: start;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 22px;
}

/*  The plan most shops take is the one to make obvious. One ring, no second
    colour — the emphasis is spent here and nowhere else on the page. */
.plan.is-picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.plan-flag { position: absolute; top: -10px; left: 22px; background: var(--raised); }

.plan h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.plan-tag { margin: -8px 0 0; color: var(--ink-faint); font-size: .88rem; }

.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.plan-price b { font-size: 2rem; font-weight: 500; color: var(--accent); }
.plan-price span { color: var(--ink-faint); font-size: .82rem; }

.plan-limits {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 13px 0;
    border-block: 1px solid var(--line);
}

.plan-limits div { display: flex; justify-content: space-between; gap: 12px; }
.plan-limits dt { color: var(--ink-faint); font-size: .82rem; }
.plan-limits dd { margin: 0; font-size: .86rem; }

.plan-features { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.plan-features li { color: var(--ink-soft); font-size: .89rem; }

.plan .btn { margin-top: auto; justify-content: center; }

/* ═════════════════════════════════════════════ upcoming / what's new ══ */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.timeline li {
    padding-left: 16px;
    border-left: 2px solid var(--line-strong);
}

.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 3px; }
.tl-head b { font-size: 1rem; }
.timeline p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

/* ══════════════════════════════════════════════════════════── contact ══ */
/*  DETAILS BESIDE THE FORM, not above it. A visitor who wants to telephone
    should not have to scroll past a form to find the number.  */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.contact-grid .card { padding: 26px 24px; }

.form-h {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 16px;
}

.contact-name { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 12px; }

.contact-list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.contact-list div { display: flex; gap: 14px; }
.contact-list dt { min-width: 6.5rem; color: var(--ink-faint); font-size: .82rem; }
.contact-list dd { margin: 0; }

.enquiry { display: flex; flex-direction: column; gap: 12px; }
.enquiry .note { font-size: .82rem; margin: 0; }
.enquiry .btn { align-self: flex-start; }

.notice {
    margin: 0 0 14px;
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
    background: var(--sunken);
    font-size: .92rem;
}

.notice.ok  { border-left-color: var(--ok);  color: var(--ok); }
.notice.bad { border-left-color: var(--bad); color: var(--bad); }

/* ══════════════════════════════════════════════════════ the closing ask ══ */
/*  The last thing on the page is the first thing to do. Somebody who read this
    far has decided; sending them back to the top to find the button is the
    page losing them at the end.  */
.closer {
    background: var(--sunken);
    border-top: 1px solid var(--line);
}

.closer-in { padding: 64px 22px; text-align: center; }

.closer h2 {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 600;
    margin: 0 0 10px;
    text-wrap: balance;
}

.closer p { margin: 0 0 24px; color: var(--ink-soft); }
.closer .hero-actions { justify-content: center; }

.footer-in { display: flex; width: 100%; align-items: center; gap: 14px; }

@media (max-width: 640px) {
    .topnav { display: none; }
    .hero-in { padding: 56px 22px 48px; }
}

/* ═══════════════════════════════════════════════════ sign in / sign up ══ */
/*
    TWO PANELS, NOT A CARD IN A FIELD OF GREEN.

    The sign-in was one small card floating in the middle of an empty page -
    correct, and it looked like a page that had failed to load the rest of
    itself. A sign-in is the FIRST thing a customer sees of this product and
    for a fortnight of a trial it is the only thing they see twice a day.

    So the page is split: what this is on the left, the form on the right. The
    left panel does the work an empty half-screen was not doing - it says whose
    software this is and what it does - and the right stays exactly as narrow as
    a form should be, because a wide text box invites a long answer and none of
    these answers is long.

    IT NAMES NO COLOUR. Every value here is a theme token, so the page is
    Meenakari, Assay, Sindoor or Showroom without a second stylesheet - which is
    the rule this file has followed since it was written.
*/
.auth {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: stretch;
    gap: 0;
    /*  A GUTTER OF ITS OWN. @RenderBody() is bare on this layout - there is no
        .wrap around it - so a block with only a max-width sits edge to edge on
        a phone. 22px each side is what .wrap gives everything else.  */
    width: min(100% - 44px, 66rem);
    margin: 40px auto 56px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--raised);
}

/* ------------------------------------------------- the left panel --- */
/*  A WELL, NOT A SECOND CARD. It is the same sunken ground the grids use, so
    the form beside it reads as the thing lifted off the page - which is the
    thing being asked for.  */
.auth-say {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 40px 38px;
    background:
        radial-gradient(120% 100% at 0% 0%, var(--accent-soft) 0%, transparent 58%),
        var(--sunken);
    border-right: 1px solid var(--line);
}

/*  THE LOGO LEADS THE SIGN-IN (22 Sep 2026): the owner's word, "on login
    screen use logo of JewelDesk". Big, on its white plate, centred in the
    panel - the first thing that says which product this is, the way the
    phone app's sign-in opens on the JD mark.  */
.auth-say .brandmark { align-self: center; }
.auth-say .brandmark img,
.auth-say > img {
    height: 150px; width: auto;
    padding: 10px 22px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

@media (max-width: 640px) {
    .auth-say .brandmark img, .auth-say > img { height: 110px; }
}

.auth-say h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.85rem;
    line-height: 1.15;
    font-weight: 600;
    color: var(--ink);
}

.auth-say p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

/*  THE WAY HOME, IN THE PANEL. Quiet until it is looked for: it is not what
    the page is for, and a second button competing with Sign in would be.  */
.auth-back {
    align-self: flex-start;
    margin-top: -4px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 500;
}

.auth-back:hover { color: var(--accent); text-decoration: underline; }

/*  THE ARROW MOVES, NOT THE WORDS. Shifting the whole link makes the text jump
    under the pointer, which reads as the page having twitched.  */
.auth-back:hover::first-letter { margin-right: 3px; }

/*  THE GOLD RULE IS THE ONE FLOURISH. One accent on a page whose only job is
    to be got past - more than one and the eye stops looking for the boxes.  */
.auth-say .rule {
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
}

.auth-say ul {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.auth-say li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.5;
}

/*  A tick drawn in CSS rather than fetched: three lines of border, no request,
    and it takes the accent in every palette.  */
.auth-say li::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 12px;
    margin: 3px 2px 0 0;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-say .fine {
    margin-top: 4px;
    color: var(--ink-faint);
    font-size: .82rem;
}

/* ------------------------------------------------ the right panel --- */
.auth-do {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 38px;
}

/*  THE CARD IS GONE INSIDE THE SPLIT. Two borders and two shadows one inside
    the other is a box in a box; the panel is the card now.  */
.auth-do .card {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.auth-do .card-head { padding: 0 0 4px; border: 0; }
.auth-do h1 { margin: 0; font-size: 1.5rem; }

.auth-do .enquiry { display: grid; gap: 14px; margin-top: 18px; }
.auth-do .field { width: 100%; }

/*  FULL WIDTH, and the type big enough to read a password back at arm's
    length on a shop counter.  */
.auth-do .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: .98rem;
}

.auth-do .muted { margin: 14px 0 0; font-size: .9rem; }
.auth-do .muted + .muted { margin-top: 6px; }

/* -------------------------------------------------- and on a phone --- */
/*  ONE COLUMN, and the panel's list goes. On a 360px screen the only thing
    wanted is the three boxes; a page of reasons above them is a page to
    scroll past twice a day.  */
@media (max-width: 900px) {
    .auth {
        grid-template-columns: 1fr;
        width: min(100% - 32px, 34rem);
        margin: 24px auto 40px;
    }

    .auth-say {
        gap: 12px;
        padding: 26px 24px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .auth-say h2 { font-size: 1.45rem; }
    .auth-say ul, .auth-say .fine { display: none; }
    .auth-do { padding: 26px 24px; }
}

.signout { display: inline; }

/*  An empty validation summary must not draw a box. Razor renders the element
    whether or not there is anything in it. */
.notice:empty { display: none; }

/* ══════════════════════════════════════════════ offer / festival strip ══ */
/*  Above everything, and both disappear on their own when their dates run
    out. The offer carries the accent because it asks for an action; the
    greeting is quieter because it asks for nothing. */
.strip { border-bottom: 1px solid var(--line); }

.strip-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 11px 22px;
}

.strip b { font-weight: 700; }
.strip span { color: var(--ink-soft); font-size: .92rem; }
.strip .btn { margin-left: auto; }

.strip.offer { background: var(--accent-soft); }
.strip.offer b { color: var(--accent); }

.strip.festival { background: var(--sunken); }
.strip.festival b { font-family: var(--serif); font-size: 1.15rem; color: var(--second); }

/* ══════════════════════════════════════════════════ waiting for approval ══ */
.waiting { max-width: 40rem; margin: 64px auto; text-align: center; }
.waiting .card { padding: 34px 30px; }
.waiting h1 { margin-bottom: 8px; }
.waiting .pill { margin-bottom: 14px; }

/*  The validation summary renders an empty <ul> when there is nothing wrong,
    so it is not `:empty` and the red box showed on a form nobody had submitted
    yet. The tag helper marks that state itself - hide it by the class it sets
    rather than trying to detect emptiness.  */
.validation-summary-valid { display: none; }

/* ══════════════════════════════════════════════════ the bar on a phone ══ */
/*  THE BAR WRAPS RATHER THAN OVERFLOWS. A brandmark, two sign-in links and a
    Register button do not fit across 375px, and the browser's answer to that
    is to let the page scroll sideways - which pushes Register off the screen
    and makes every band on the page shift under the thumb.

    Landing only: the counter's own bar carries different things and is never
    read on a phone.  */
@media (max-width: 760px) {
    .landing .topbar {
        height: auto;
        padding: 8px 14px;
    }

    .landing .topbar-in {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    /*  The spacer would otherwise push the buttons onto a line of their own
        with a hole above them.  */
    .landing .topbar-in .spacer { display: none; }

    .landing .topbar .btn {
        padding: 7px 12px;
        font-size: .82rem;
    }
}

/* ══════════════════════════════════════════════════ the jewellery dress ══ */
/*
    THE PUBLIC PAGE LOOKS LIKE THE TRADE IT IS FOR - gold, stones and a little
    ornament - and it does it WITHOUT NAMING A SINGLE COLOUR. Everything below
    is mixed out of --accent, so the page is right in all four palettes rather
    than in the one it was drawn against.

    color-mix is what makes that possible. Where a browser is too old for it the
    plain --accent declared first still stands, and the page is a shade flatter
    rather than broken.
*/
.landing {
    --gold-lit:  var(--accent);
    --gold-lit:  color-mix(in srgb, var(--accent) 62%, #FFF6DC 38%);
    /*  THE DEEP STOP IS THE ACCENT ITSELF, not a darkened version of it. The
       theme guarantees the accent is legible on its own ground; anything
       mixed away from it is a guess that holds on the dark palettes and goes
       pale on the light ones. So the sheen is the only thing the gradient
       adds, and the worst a gold heading can read as is the accent.  */
    --gold-deep: var(--accent);
    --gold-film: var(--accent-soft);
    --gold-film: color-mix(in srgb, var(--accent) 12%, transparent);
}

/*  A GOLD RULE ACROSS THE TOP OF THE PAGE. One line, three stops - the way
    light runs along a polished band.  */
.landing body::before,
.landing .topbar { position: relative; }

.landing .topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--gold-deep) 18%,
        var(--gold-lit) 50%,
        var(--gold-deep) 82%,
        transparent);
}

/* ─────────────────────────────────────────────────────── drawn artwork ── */
.motif {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--accent);
}

/*  THE ORNAMENTAL RULE under a heading. Its own colour, quieter than the
    heading it follows - it is punctuation, not a sentence.  */
.filigree {
    display: block;
    width: 200px;
    max-width: 60%;
    height: 20px;
    margin: 14px 0 0;
    color: var(--accent);
    opacity: .55;
}

/* ─────────────────────────────────────────── the picture beside the head ── */
/*  The hero gets EITHER the shop's photograph or a drawn ornament, never both:
    two pictures fighting for the same corner is what a page looks like when
    nobody chose.  */
.hero-photo {
    position: relative;
    margin-bottom: 18px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    box-shadow: 0 22px 48px rgb(0 0 0 / .3);
}

.hero-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/*  A wash of gold over the photograph, so a picture shot in any light still
    belongs to this page.  */
.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, transparent 55%, var(--gold-film));
    pointer-events: none;
}

/*  THE ORNAMENT, when there is no photograph. Behind the bill panel and turned
    a little, so it reads as decoration rather than as a diagram.  */
.hero-orn {
    position: absolute;
    top: -46px;
    right: -18px;
    width: 190px;
    height: 190px;
    opacity: .16;
    transform: rotate(-8deg);
    pointer-events: none;
}

/* ────────────────────────────────────────────── pictures on the banners ── */
.strip-art {
    flex: none;
    width: 34px;
    height: 34px;
    display: block;
}

.strip-art img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.strip.festival .strip-art { color: var(--second); }

/* ──────────────────────────────────────────── the picture on a feature ── */
.feature { padding: 0; overflow: hidden; }

.feature-pic {
    position: relative;
    border-bottom: 1px solid var(--line);
    background: var(--sunken);
}

.feature-pic img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/*  THE DRAWN STAND-IN is given the same height a photograph would take, so a
    row of cards lines up whether the shop has supplied pictures for all of
    them, some of them or none.  */
.feature-pic.is-drawn {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--gold-film), transparent 70%),
        var(--sunken);
}

.feature-pic.is-drawn .motif {
    width: 44%;
    height: 70%;
    opacity: .85;
}

.feature-say { padding: 14px 16px 16px; }
.feature-say h3 { font-size: 1.1rem; margin-bottom: 4px; }
.feature-say p { font-size: .88rem; line-height: 1.45; }

/*  The icon tile sits half over the picture, the way a stamp sits on a box.  */
.feature-say .feature-ico { margin-top: -34px; margin-bottom: 8px; width: 38px; height: 38px; }
.feature-say .feature-ico .ico { width: 18px; height: 18px; }

.feature-ico {
    position: relative;
    background: var(--raised);
    border: 1px solid var(--gold-deep);
    box-shadow: var(--shadow-sm);
}

/* ────────────────────────────────────────── artwork on the three screens ── */
.screen { position: relative; overflow: hidden; }

/*  A WATERMARK, not a picture: it sits behind the words at the corner and must
    never win against them.  */
.screen-art {
    position: absolute;
    top: -26px;
    right: -26px;
    width: 148px;
    height: 148px;
    opacity: .09;
    transform: rotate(9deg);
    pointer-events: none;
}

/* ──────────────────────────────────────────── artwork on the roadmap ── */
/*  A picture beside every line, because a roadmap is the part of a page nobody
    reads and a picture is what turns it back into something worth reading.  */
.timeline li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tl-art {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background:
        radial-gradient(100% 100% at 50% 0%, var(--gold-film), transparent 72%),
        var(--sunken);
    overflow: hidden;
}

.tl-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-art .motif { width: 68%; height: 68%; }

.tl-say { min-width: 0; }

/* ───────────────────────────────────────────────── ornament at the close ── */
.closer-in { position: relative; }

.closer-orn {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 6px;
    opacity: .5;
}

/*  THE GOLD HEADING, and only here. A page where every heading shimmers is a
    page where nothing does - this is the last thing read and the one that asks
    for something.  */
.closer h2 {
    background: linear-gradient(100deg, var(--gold-deep), var(--gold-lit) 45%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/*  A heading painted with a gradient is invisible if the clip is not honoured,
    so the fallback colour is put back wherever it might not be.  */
@supports not (background-clip: text) {
    .closer h2 { color: var(--ink); background: none; }
}

/* ─────────────────────────────────────────────────── on a small screen ── */
@media (max-width: 700px) {
    .hero-orn { display: none; }
    .screen-art { width: 110px; height: 110px; }
    .filigree { max-width: 45%; }
}

/* ═══════════════════════════════════════════════════ the screen posters ══ */
/*
    SIX TILES, ALL THE SAME SHAPE. The picture area is 16:10 whether it holds a
    screenshot or a wireframe, so a shop that supplies two pictures and leaves
    four drawn still gets a straight row. A gallery that changes height as
    pictures arrive is a gallery nobody dares add to.
*/
.posters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.poster {
    margin: 0;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}

.poster:hover { border-color: var(--accent); transform: translateY(-2px); }

.poster-pic {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--sunken);
    border-bottom: 1px solid var(--line);
}

/*  THE WIREFRAME SIDE: a wash of gold behind it so the tile is not a grey
    rectangle, and the drawing given room to breathe inside it.  */
.poster-pic.is-drawn {
    display: grid;
    place-items: center;
    padding: 14px;
    background:
        radial-gradient(120% 100% at 50% 0%, var(--gold-film), transparent 72%),
        var(--sunken);
}

.poster-art { width: 100%; height: 100%; color: var(--accent); opacity: .8; }

/*  THE SCREENSHOT SIDE. The whole tile is the button, because a small
    magnifier in a corner is a target people miss.  */
.poster-open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    color: inherit;
}

.poster-open img { width: 100%; height: 100%; object-fit: cover; display: block; }

.poster-zoom {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    font-size: .8rem;
    color: var(--accent);
    background: linear-gradient(transparent, rgb(0 0 0 / .55));
    opacity: 0;
    transition: opacity .18s ease;
}

.poster-zoom .ico { width: 15px; height: 15px; }

/*  Shown on hover, and always shown to a keyboard - somebody tabbing to the
    tile has to be told it does something.  */
.poster:hover .poster-zoom,
.poster-open:focus-visible .poster-zoom { opacity: 1; }

.poster figcaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px 16px;
}

.poster figcaption b { font-size: .98rem; }
.poster figcaption span { font-size: .84rem; color: var(--ink-soft); }

/*  THE SCREENSHOT, FULL SIZE. Wider than any other dialog in the application,
    because it is the one dialog whose whole job is to be looked at.  */
#shotbox {
    max-width: min(94vw, 1200px);
    width: auto;
}

#shotbox img {
    display: block;
    max-width: 100%;
    max-height: 74vh;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
}

/* ═════════════════════════════════════════════════════ the offer banner ══ */
/*
    THE POSTER, not the ticker. It sits immediately above the plans because
    that is where somebody decides, and it is deliberately the loudest thing on
    the page after the headline - an offer that whispers is a discount nobody
    took.
*/
.banner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 0;
    background: var(--raised);
    border: 1px solid var(--gold-deep);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

@media (max-width: 860px) {
    .banner { grid-template-columns: minmax(0, 1fr); }
}

.banner-pic {
    position: relative;
    min-height: 260px;
    background: var(--sunken);
}

.banner-pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*  A gold wash over whatever picture arrives, so a poster made in any program
    on any day still belongs to this page.  */
.banner-pic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 45%, var(--gold-film));
    pointer-events: none;
}

.banner-pic.is-drawn {
    display: grid;
    place-items: center;
    padding: 30px;
    background:
        radial-gradient(90% 80% at 50% 20%, var(--gold-film), transparent 70%),
        var(--sunken);
}

.banner-pic.is-drawn .motif { width: 150px; height: 150px; }
.banner-pic.is-drawn::after { content: none; }

.banner-say { padding: 34px 34px 36px; }

.banner-say h2 {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 12px;
    text-wrap: balance;

    /*  The one other gold heading on the page. It has earned it: this band is
        the offer.  */
    background: linear-gradient(100deg, var(--gold-deep), var(--gold-lit) 45%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not (background-clip: text) {
    .banner-say h2 { color: var(--accent); background: none; }
}

.banner-lead { margin: 0 0 10px; font-size: 1.06rem; color: var(--ink); }
.banner-more { margin: 0 0 20px; color: var(--ink-soft); font-size: .95rem; }
.banner-say .hero-actions { margin-top: 18px; }

.banner-until {
    margin: 16px 0 0;
    font-size: .84rem;
    color: var(--ink-faint);
}

@media (max-width: 700px) {
    .banner-say { padding: 26px 22px 28px; }
    .banner-pic { min-height: 180px; }
}

/* ══════════════════════════════════════════ the announcement popup ══ */
/*
    THE ONE THING ON THE PAGE THAT INTERRUPTS, so it is built to be read and
    left: big enough to say something, with the way out in the corner where a
    hand goes first.
*/
#hello {
    max-width: min(94vw, 44rem);
    width: auto;
    padding: 0;
    overflow: hidden;
    border-color: var(--gold-deep);
    box-shadow: 0 30px 70px rgb(0 0 0 / .45);
}

.hello {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

@media (max-width: 640px) {
    .hello { grid-template-columns: minmax(0, 1fr); }
}

.hello-pic { position: relative; min-height: 200px; background: var(--sunken); }

.hello-pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hello-pic.is-drawn {
    display: grid;
    place-items: center;
    padding: 26px;
    background:
        radial-gradient(90% 80% at 50% 20%, var(--gold-film), transparent 72%),
        var(--sunken);
}

.hello-pic.is-drawn .motif { width: 120px; height: 120px; }

.hello-say { padding: 26px 28px 28px; }

.hello-say h2 {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3vw, 1.95rem);
    font-weight: 600;
    line-height: 1.12;
    margin: 0 0 10px;
    text-wrap: balance;
    color: var(--accent);
}

.hello-lead { margin: 0 0 8px; font-size: 1rem; color: var(--ink); }
.hello-more { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.hello-say .hero-actions { margin-top: 20px; }

.hello-until { margin: 14px 0 0; font-size: .8rem; color: var(--ink-faint); }

/*  THE WAY OUT, in the corner. A modal whose only exit is a button below the
    fold on a phone is the reason people learn to hate them.  */
.hello-shut {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-soft);
    background: var(--raised);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}

.hello-shut:hover { color: var(--accent); border-color: var(--accent); }

/*  It arrives rather than appearing. Slamming onto the first paint reads as an
    advertisement; a moment of movement reads as the page telling you
    something.  */
@media (prefers-reduced-motion: no-preference) {
    #hello[open] { animation: hello-in .26s ease-out; }
}

@keyframes hello-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════ satisfied clients ══ */
/*  A ROW OF NAMES, not a wall of logos. Every one is a shop that signed, and
    the section is not on the page until at least one has.  */
.clients {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.client {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.client-mark {
    flex: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--gold-deep);
    background: var(--sunken);
    overflow: hidden;
}

.client-mark img { width: 100%; height: 100%; object-fit: cover; }

/*  THE MONOGRAM. Two letters in the page's own serif - honest about being a
    stand-in, where a drawn mark would be pretending to be somebody's brand.  */
.client-mark b {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .02em;
}

.client-say { display: flex; flex-direction: column; min-width: 0; }
.client-say b { font-size: .96rem; }
.client-say span { font-size: .82rem; color: var(--ink-soft); }

/* ═════════════════════════════════════════════════════════ how to pay ══ */
/*  Three across once there is a pay panel, two without it. The form keeps the
    most room either way - it is the thing being filled in.  */
.contact-grid.has-pay {
    grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.3fr);
}

@media (max-width: 1080px) {
    .contact-grid.has-pay { grid-template-columns: minmax(0, 1fr); }
}

.pay { display: flex; flex-direction: column; gap: 16px; }

.pay-list dt { min-width: 6.5rem; }

/*  EVERY FIGURE COPIES ITSELF. Sixteen digits retyped by hand is a payment that
    reaches somebody else, so the whole value is a click target and says so.  */
.pay-list [data-copy] {
    position: relative;
    cursor: copy;
    border-bottom: 1px dashed var(--line-strong);
}

.pay-list [data-copy]:hover { border-bottom-color: var(--accent); color: var(--accent); }

.pay-list [data-copy][data-said]::after {
    content: attr(data-said);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    padding: 3px 8px;
    font-family: var(--sans, inherit);
    font-size: .76rem;
    white-space: nowrap;
    color: var(--accent-ink);
    background: var(--accent);
    border-radius: var(--radius-sm);
}

.pay-qr {
    margin: 0;
    align-self: flex-start;
    text-align: center;
}

.pay-qr img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
    padding: 8px;
    background: #FFFFFF;   /* a QR is read off white; a tinted one may not scan */
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.pay-qr figcaption {
    margin-top: 7px;
    font-size: .78rem;
    color: var(--ink-faint);
}

.pay-tap { margin-top: 16px; }
.pay-card .note { margin-top: 14px; font-size: .82rem; }

/*  Side by side once the card is wide enough for both.  */
@media (min-width: 1081px) {
    .pay { flex-direction: row; justify-content: space-between; align-items: flex-start; }
    .pay-qr img { width: 132px; height: 132px; }
}

/* ═══════════════════════════════════════════════════ try a palette ══ */
/*
    FOUR SWATCHES IN THE BAR. A visitor deciding whether to buy wants to know
    what this looks like on the counter all day, and four words describing a
    colour is not that - so they get to put it on.

    IT IS A LOOK, NOT A SETTING. Nothing reaches the server; it lives in the
    visitor's own browser and goes when they clear it.
*/
.looks {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
}

.looks-say {
    font-size: .76rem;
    letter-spacing: .04em;
    color: var(--ink-faint);
    margin-right: 2px;
}

/*  Each swatch is its own palette: the ground it sits on, with a wedge of the
    accent across the corner. Half a coin of each, which is the smallest thing
    that reads as two colours rather than one muddy one.  */
.look {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    background:
        linear-gradient(135deg,
            var(--sw-ground) 0 50%,
            var(--sw-accent) 50% 100%);
    transition: transform .14s ease, box-shadow .14s ease;
}

.look:hover { transform: scale(1.15); }

/*  The one in use wears a ring in the CURRENT accent, so the mark moves with
    the page rather than sitting in a colour the page is not wearing.  */
.look.is-on {
    box-shadow: 0 0 0 2px var(--raised), 0 0 0 3px var(--accent);
}

.look:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.look-off {
    margin-left: 4px;
    padding: 3px 8px;
    font-size: .76rem;
    color: var(--ink-soft);
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.look-off:hover { color: var(--accent); border-color: var(--accent); }

/*  ON A PHONE THE WORDS GO AND THE SWATCHES STAY. The bar already wraps to two
    rows there, and "Try a palette" spelled out is the line that pushes it to
    three - while the swatches themselves are the part that is actually
    used.  */
/*  THE WORDS GO FIRST, and earlier than you would think. Four swatches, a
    nav of five and three buttons is a lot of bar: at 1360 - an ordinary
    laptop - the label was what pushed "At the counter" onto two lines. The
    swatches themselves are the part that is used.  */
@media (max-width: 1200px) {
    .looks-say { display: none; }
    .looks { padding-left: 0; }
}

/* ══════════════════════ offer banners · posters · feedback ══ */
/*
    THREE BANDS ADDED 3 Sep 2026, and every value here is a theme token - the
    rule this file has followed since it was written. The page is Meenakari,
    Assay, Sindoor or Showroom without a second stylesheet.

    ALL THREE HIDE THEMSELVES when there is nothing to show. That is decided in
    the view, not here: an empty gallery is worse than no gallery, and a band
    with a heading and no content reads as a page that failed to load.
*/

/* --------------------------------------------- the offer banners --- */
/*  A ROW THAT WRAPS, not a carousel. A shop runs two or three offers, not ten,
    and a thing that moves on its own is a thing a reader waits for instead of
    reading.  */
.banners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.bnr {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/*  THE PICTURE KEEPS ITS SHAPE whatever was uploaded. A banner of three cards
    where one is tall and two are square reads as three mistakes.  */
.bnr-pic { aspect-ratio: 16 / 9; background: var(--sunken); }
.bnr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bnr-say { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.bnr-say h3 { margin: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.bnr-say p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

/*  The button and the end date on one line, and the date is the quiet half:
    an offer with no end date is just a price, and nobody hurries for a price. */
.bnr-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; }
.bnr-foot .muted { font-size: .82rem; }

/* ------------------------------------------------- the posters --- */
/*  BIGGER THAN THE OFFER CARDS, because a photograph of the work is the one
    thing on this page that is not about software - and a jewellery picture
    printed at the size of a thumbnail is a jewellery picture nobody looks at. */
.posters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.poster {
    margin: 0;
    overflow: hidden;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.poster img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--sunken);
}

.poster figcaption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px 14px;
}

.poster figcaption b { font-size: .95rem; }
.poster figcaption span { color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }

/* ------------------------------------------------ the feedback --- */
.says {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.say {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 20px 22px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}

/*  THE STARS ARE DRAWN AND THE COUNT IS SAID. Five characters read as a rating
    at a glance where "4/5" has to be parsed - and the aria-label carries the
    number for a reader who cannot see them.  */
.say-stars { display: flex; gap: 2px; font-size: .95rem; line-height: 1; color: var(--line-strong); }
.say-stars .on { color: var(--accent); }

.say blockquote {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--ink);
}

.say-more { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }

.say figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
    color: var(--ink-soft);
    font-size: .88rem;
}

.say figcaption img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

/*  A MONOGRAM WHERE THERE IS NO PHOTOGRAPH - not a fake face, which is what a
    stock avatar is. The same decision the client list already made.  */
.say-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--serif);
    font-size: .9rem;
}

/* ------------------------------ and the thumbnail in SuperAdmin --- */
/*  A PATH IS A STRING SOMEBODY TYPED, and a string reads as correct. A broken
    thumbnail does not - so the editor shows the picture rather than the path. */
.thumb {
    display: block;
    max-width: 120px;
    max-height: 70px;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* ═════════════════════════════════ the policy pages (20 Sep 2026) ═══ */
/*
    PRIVACY, DATA SAFETY, DELETE ACCOUNT - the three plain pages Google Play
    links to. Prose, a table or two, one form: the landing's type and colours,
    measured for reading rather than for selling.
*/
.policy { max-width: 60rem; padding-top: 32px; padding-bottom: 48px; }
.policy h1 { margin: 0 0 6px; }
.policy h2 { margin: 28px 0 8px; font-size: 1.25rem; }
.policy p, .policy li { line-height: 1.6; }
.policy ul, .policy ol { padding-left: 1.4rem; }
.policy .tbl { margin: 8px 0 4px; }
.policy .tbl td, .policy .tbl th { vertical-align: top; }
.policy .notice { padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.policy .notice.ok  { color: var(--ok);  background: var(--ok-soft);  border-color: var(--ok); }
.policy .notice.bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); }
.policy-form { max-width: 34rem; display: grid; gap: 10px; }
.policy-form .row { display: flex; gap: 10px; }
.policy-form .row > .field { flex: 1 1 0; }
.policy-form textarea { width: 100%; }
.footer .foot-links { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; margin-left: 18px; }
.footer .foot-links a { color: inherit; }

/*  ON A PHONE THE FOOTER WRAPS (23 Sep 2026, the mobile check). Copyright,
    tagline and five links on one unbreakable line made the whole landing page
    461px wide on a 375px phone - it scrolled sideways, and the announcement
    popup, centred on that wider page, hung off the right edge.  */
.footer .footer-in { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 640px) {
    .footer .footer-in { flex-direction: column; align-items: flex-start; }
    .footer .footer-in .spacer { display: none; }
    .footer .foot-links { margin-left: 0; }
}


/* ─────────────────────────────────────────────── the phone strip (21 Sep 2026) ── */
/*  Portrait tiles. On a desk they sit in a row; on a phone the strip scrolls
    sideways with snap points, which is what a phone screenshot deserves. */
.phones {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.phone {
    flex: 0 0 210px;
    margin: 0;
    scroll-snap-align: start;
}

.phone-screen {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 20;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: #111;
    box-shadow: 0 0 0 6px #111, 0 14px 30px rgba(0, 0, 0, .28);
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
    transition: transform .18s ease;
}

.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.phone:hover .phone-screen { transform: translateY(-3px); }

.phone figcaption { margin: 14px 4px 0; display: grid; gap: 3px; }
.phone figcaption b { font-size: 16px; }
.phone figcaption span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; }

.phones-note { margin: 18px 0 0; color: var(--ink-soft); font-size: 15px; }

@media (min-width: 1100px) {
    .phones { overflow: visible; justify-content: center; flex-wrap: wrap; }
    .phone { flex-basis: 196px; }
}

/*  ── A MODULE TILE WITH NOTHING BUT ITS NAME (23 Sep 2026) ──
    The owner's word on his own dashboard: *"remove description from here,
    only keep header tags"*. The paragraph is gone from the view, and a card
    padded for three lines of copy around one line of heading is a card that
    is mostly air - so the bare one is sized for what it now holds.

    NARROWER, TOO. `.cards` asks for 240px columns because a feature card on
    the shop window carries a sentence; a name does not need a quarter of the
    screen, and five of them should read as one row of chips rather than five
    panels. The grid this sits in is told so by the panel below.  */
.feature.is-bare { padding: 12px 16px; }
.feature.is-bare h3 { margin: 0; font-size: 1.1rem; }
.cards:has(.feature.is-bare) { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/*  THE WAY TO THE APP, under the phones (23 Sep 2026). Centred under the
    strip because it belongs to all seven screens above it, not to the last
    one; the note keeps its place directly under them.  */
.phones-get { margin: 14px 0 0; text-align: center; }

/* ═════════════════════════════════════ the owner's mock-up, 24 Sep 2026 ══ */
/*  "Do landing page layout like this": a white header with three doors, a
    cream hero with the serif line and the dashboard on a laptop, the features
    as a gold-ringed icon grid, a navy band for the dashboard and the app, the
    "built for jewellery retailers" figures, and a navy call to action.

    FIXED COLOURS, ON PURPOSE. The mock-up is one look - navy, gold and cream -
    and the theme option is gone from the product (same day), so these are
    named once here as tokens and not per component.  */
.landing {
    --lp-navy: #0E2240; --lp-navy-2: #16345F; --lp-gold: #B8862F; --lp-gold-2: #D6A548;
    --lp-cream: #FBF5EA; --lp-ink: #1B2233; --lp-soft: #5B6272; --lp-line: #E7DFD0;
    --lp-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
}

/*  THE BUTTONS - gold filled, and a navy outline.  */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border-radius: 8px; font-weight: 800; font-size: .9rem;
    text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
    transition: transform .12s ease, filter .12s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-lg { padding: 13px 24px; font-size: 1rem; }
.lp-btn-gold { background: linear-gradient(180deg, var(--lp-gold-2), var(--lp-gold)); color: #fff; }
.lp-btn-gold:hover { color: #fff; filter: brightness(1.05); }
.lp-btn-line { background: #fff; color: var(--lp-navy); border-color: var(--lp-navy); }
.lp-btn-line:hover { background: var(--lp-navy); color: #fff; }

/*  THE HEADER.  */
.lp-top { background: #fff; border-bottom: 1px solid var(--lp-line); }
.lp-top .topbar-in { gap: 14px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--lp-ink); }
.lp-brand img { height: 42px; width: auto; }
.lp-brand b { display: block; font-family: var(--lp-serif); font-size: 1.45rem; line-height: 1; color: var(--lp-navy); }
.lp-brand small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-soft); margin-top: 3px; }
.lp-nav { gap: 22px; margin-left: 24px; }
.lp-nav a { color: var(--lp-ink); font-weight: 600; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.lp-nav a.on, .lp-nav a:hover { color: var(--lp-gold); border-bottom-color: var(--lp-gold); }
@media (max-width: 1100px) { .lp-nav { display: none; } }
@media (max-width: 700px) {
    .lp-top .topbar-in { flex-wrap: wrap; row-gap: 8px; }
    .lp-top .lp-btn-line { order: 5; flex: 1 1 40%; }
    .lp-brand small { display: none; }
    .lp-top .lp-btn { padding: 8px 12px; font-size: .82rem; }
}

/*  THE HERO.  */
.lp-hero { background: linear-gradient(100deg, var(--lp-cream) 0%, #F6EAD4 55%, #EBD6AE 100%); overflow: hidden; }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; align-items: center; padding-top: 56px; padding-bottom: 60px; }
@media (max-width: 960px) { .lp-hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 36px; padding-bottom: 36px; } }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--lp-gold); }
.lp-eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--lp-gold); }
.lp-h1 { font-family: var(--lp-serif); font-weight: 700; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.08; color: var(--lp-navy); margin: 0 0 18px; letter-spacing: -.01em; }
.lp-h1 em { font-style: normal; color: var(--lp-gold); }
.lp-lead { font-size: 1.08rem; line-height: 1.6; color: var(--lp-soft); max-width: 34rem; margin: 0 0 24px; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.lp-ticks-row { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0; font-size: .88rem; color: var(--lp-soft); }
.lp-ticks-row li::before, .lp-ticks li::before { content: "\2713"; color: var(--lp-gold); font-weight: 800; margin-right: 8px; }

.lp-hero-art { position: relative; min-height: 380px; }
.lp-jewel { position: absolute; left: 0; bottom: 0; width: 42%; max-width: 250px; z-index: 2; }
.lp-jewel img { width: 100%; border-radius: 14px; box-shadow: 0 18px 40px rgba(14,34,64,.25); }
.lp-jewel svg { width: 100%; height: auto; color: var(--lp-gold); filter: drop-shadow(0 12px 24px rgba(14,34,64,.18)); }
.lp-laptop { position: absolute; right: 0; top: 10px; width: 78%; z-index: 1; }
.lp-screen { background: #111; border-radius: 12px 12px 0 0; padding: 10px; aspect-ratio: 16 / 10; box-shadow: 0 24px 50px rgba(14,34,64,.28); }
.lp-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 4px; display: block; }
.lp-base { height: 14px; margin: 0 -6%; background: linear-gradient(180deg, #D9DCE2, #A9AEB8); border-radius: 0 0 12px 12px; }
.lp-dash { display: grid; grid-template-columns: 26% 1fr; height: 100%; background: #F5F6F8; border-radius: 4px; overflow: hidden; font-size: 9px; }
.lp-dash-side { background: var(--lp-navy); color: #C9D3E3; display: grid; align-content: start; gap: 6px; padding: 10px 8px; }
.lp-dash-side b { color: #E9C27A; font-family: var(--lp-serif); font-size: 11px; margin-bottom: 4px; }
.lp-dash-side .on { background: rgba(230,184,92,.2); color: #fff; border-radius: 4px; padding: 2px 5px; }
.lp-dash-main { padding: 10px; display: grid; gap: 8px; align-content: start; }
.lp-dash-h { font-size: 11px; color: var(--lp-ink); }
.lp-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lp-dash-kpis div { background: #fff; border-radius: 4px; padding: 6px; display: grid; gap: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.lp-dash-kpis small { color: var(--lp-soft); }
.lp-dash-kpis b { color: var(--lp-ink); font-size: 10px; }
.lp-dash-bars { display: flex; align-items: flex-end; gap: 5%; height: 70px; background: #fff; border-radius: 4px; padding: 8px; }
.lp-dash-bars i { flex: 1; background: linear-gradient(180deg, var(--lp-gold-2), var(--lp-navy-2)); border-radius: 2px 2px 0 0; }
.lp-seal {
    position: absolute; right: -6px; bottom: -8px; z-index: 3; width: 112px; height: 112px; border-radius: 50%;
    display: grid; place-items: center; text-align: center; background: var(--lp-navy); color: #fff;
    border: 4px solid var(--lp-gold-2); box-shadow: 0 10px 24px rgba(14,34,64,.3);
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35;
}
.lp-seal b { color: var(--lp-gold-2); font-size: .82rem; }
@media (max-width: 960px) { .lp-hero-art { min-height: 300px; } }
@media (max-width: 520px) { .lp-hero-art { min-height: 230px; } .lp-seal { width: 84px; height: 84px; font-size: .55rem; right: 0; } }

/*  THE FEATURES.  */
.lp-band { padding: 64px 0; background: #fff; }
.lp-feat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .lp-feat { grid-template-columns: minmax(0, 1fr); } }
.lp-h2 { font-family: var(--lp-serif); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; color: var(--lp-navy); margin: 0 0 12px; }
.lp-h3 { font-family: var(--lp-serif); font-weight: 700; font-size: 1.6rem; line-height: 1.2; margin: 0 0 12px; }
.lp-rule { display: block; width: 44px; height: 2px; background: var(--lp-gold); margin: 6px 0 18px; }
.lp-feat-intro p { color: var(--lp-soft); line-height: 1.6; margin: 0 0 22px; }
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 0; }
@media (max-width: 720px) { .lp-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .lp-feat-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-feat-item { padding: 0 22px; border-left: 1px solid var(--lp-line); }
.lp-feat-item:nth-child(3n+1) { border-left: 0; }
@media (max-width: 720px) { .lp-feat-item { border-left: 0; padding: 0 10px; } }
.lp-feat-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #FBEFD9; color: var(--lp-gold); margin-bottom: 12px; }
.lp-feat-ico svg { width: 24px; height: 24px; }
.lp-feat-item h3 { font-family: var(--lp-serif); font-size: 1.12rem; color: var(--lp-navy); margin: 0 0 6px; }
.lp-feat-item p { color: var(--lp-soft); font-size: .9rem; line-height: 1.5; margin: 0; }

/*  THE NAVY BAND - dashboard, phones, the app.  */
.lp-dark { background: radial-gradient(circle at 70% 40%, var(--lp-navy-2) 0%, var(--lp-navy) 70%); color: #D6DEEB; padding: 60px 0; overflow: hidden; }
.lp-dark-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap: 30px; align-items: center; }
@media (max-width: 1000px) { .lp-dark-in { grid-template-columns: minmax(0, 1fr); } }
.lp-on-dark { color: #fff; }
.lp-eyebrow.lp-on-dark { color: var(--lp-gold-2); }
.lp-eyebrow.lp-on-dark::after { background: var(--lp-gold-2); }
.lp-dark-copy p { line-height: 1.6; margin: 0 0 16px; }
.lp-ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.lp-phones { position: relative; height: 420px; }
.lp-phone { position: absolute; left: 50%; top: 0; transform: translateX(-60%); width: 200px; border: 8px solid #0B0B0F; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 24px 50px rgba(0,0,0,.45); z-index: 2; }
.lp-phone img { display: block; width: 100%; }
.lp-phone-back { transform: translateX(-5%) scale(.86); top: 26px; z-index: 1; opacity: .92; }
@media (max-width: 1000px) { .lp-phones { height: 380px; } }
.lp-store { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 8px; background: #000; color: #fff; border: 1px solid #8a8a8a; text-decoration: none; }
.lp-store:hover { color: #fff; border-color: #fff; }
.lp-store small { display: block; font-size: .56rem; letter-spacing: .08em; }
.lp-store b { display: block; font-size: 1rem; }

/*  BUILT FOR JEWELLERY RETAILERS.  */
.lp-built { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); background: #fff; border-bottom: 1px solid var(--lp-line); }
@media (max-width: 860px) { .lp-built { grid-template-columns: minmax(0, 1fr); } .lp-built-art { display: none; } }
.lp-built-art { background: linear-gradient(135deg, #F7ECD8, #EAD2A6); display: grid; place-items: center; padding: 20px; }
.lp-built-art img { width: 100%; height: 100%; object-fit: cover; }
.lp-built-art svg { width: 70%; height: auto; color: var(--lp-gold); }
.lp-built-in { padding: 40px 32px; }
.lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
@media (max-width: 700px) { .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; } }
.lp-stats > div { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 0 12px; border-left: 1px solid var(--lp-line); }
.lp-stats > div:first-child { border-left: 0; }
.lp-stat-ico svg { width: 34px; height: 34px; color: var(--lp-gold); }
.lp-stats b { font-size: 1.6rem; color: var(--lp-navy); }
.lp-stats span:last-child { font-size: .88rem; color: var(--lp-soft); }

/*  THE CALL TO ACTION.  */
.lp-cta { background: var(--lp-navy); color: #D6DEEB; padding: 30px 0; position: relative; overflow: hidden; }
.lp-cta-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
@media (max-width: 800px) { .lp-cta-in { grid-template-columns: minmax(0, 1fr); text-align: center; } .lp-cta-orn { display: none; } }
.lp-cta-orn svg { width: 110px; height: auto; color: var(--lp-gold-2); opacity: .8; }
.lp-cta h2 { font-family: var(--lp-serif); color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 6px; }
.lp-cta p { margin: 0; }
.lp-cta-go { display: grid; justify-items: center; gap: 6px; }
.lp-cta-go small { color: #AEB9CC; }

/*  THE FOOTER.  */
.lp-foot { background: #fff; border-top: 1px solid var(--lp-line); }
.lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 18px 0; }
.lp-foot-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 auto; }
.lp-foot-nav a { color: var(--lp-ink); text-decoration: none; font-size: .9rem; }
.lp-foot-nav a:hover { color: var(--lp-gold); }
.lp-copy { flex-basis: 100%; font-size: .8rem; color: var(--lp-soft); }

/*  The section headings further down take the same serif and navy, so the
    page reads as one piece past the new bands.  */
.landing .section-h { font-family: var(--lp-serif); color: var(--lp-navy); }
.landing .kicker { color: var(--lp-gold); letter-spacing: .16em; }

/*  THE PHONE STRIP'S ROWS OVERLAPPED (24 Sep 2026). The screen box was held
    at 9:20 while the picture inside it asked for its own height, so each box
    came out taller than the row allowed for and sat over the captions of the
    row below. The picture now sets the height, cropped to the same 9:20.  */
.phone-screen { aspect-ratio: auto; height: auto; }
.phones { align-items: flex-start; }
.phone-screen img { height: auto; aspect-ratio: 9 / 20; }
/*  The logo carries the name already, so it stands alone and a little larger.  */
.lp-brand img { height: 52px; }

/*  BLACK TEXT WHERE IT WAS GREY (24 Sep 2026, the owner, of What's new: "font
    visibility issue - do black font"). The timeline's lines and dates were in
    the soft and faint inks, which on the light palette read as washed out;
    they are now black. The rest of the page's grey text is darkened to match,
    so no section reads fainter than the one next to it.  */
.landing .timeline,
.landing .timeline h3,
.landing .timeline p,
.landing .timeline .muted,
.landing .timeline .tl-head,
.landing .timeline .tl-say { color: #111111; }
.landing .timeline .mono { font-weight: 600; }
.landing .muted,
.landing .section-sub,
.landing .prose,
.landing figcaption span,
.landing .phone figcaption span { color: #2A2F3A; }

/*  WHAT'S NEW AND WHAT WE ARE BUILDING, ARRANGED (24 Sep 2026, the owner:
    "arrange these points"). Each entry is a card of the same shape: the
    picture on the left, then the date as a small gold label, the heading and
    its line - so a long heading no longer knocks its date onto a row of its
    own and the list reads straight down.  */
.landing .timeline { gap: 12px; }
.landing .timeline li {
    display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start;
    background: #fff; border: 1px solid var(--lp-line); border-left: 3px solid var(--lp-gold);
    border-radius: 10px; padding: 12px 14px;
}
.landing .tl-say { display: grid; gap: 4px; }
.landing .tl-when {
    justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #7A5418; background: #FBEFD9; border-radius: 999px; padding: 2px 10px;
}
.landing .tl-title { font-size: 1rem; line-height: 1.35; color: #111111; }

/*  BLACK TEXT ACROSS THE WHOLE PAGE (24 Sep 2026, the owner: "complete
    landing page font black which has visibility issue"). The soft and faint
    inks are redefined for the landing page only, so every section that used
    them - the counter, pricing, contact, feedback, the roadmap - reads in
    near-black. The navy bands set their own light text and are untouched.  */
html.landing[data-theme] { --ink: #111111; --ink-soft: #1F232B; --ink-faint: #2E333D; }
html.landing[data-theme] { --lp-soft: #2A2F3A; }

/*  SEE IT BEFORE YOU BUY IT, AS A SHOWCASE (24 Sep 2026) - the owner's
    reference: the screens as a list on the left, the chosen one large in a
    browser frame on the right. On a phone the list becomes a row of chips
    above the picture.  */
.show { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
.show-list { display: grid; gap: 6px; position: sticky; top: 90px; }
.show-tab {
    display: grid; gap: 2px; text-align: left; cursor: pointer;
    padding: 12px 16px; border-radius: 10px; border: 1px solid transparent;
    background: transparent; color: var(--ink); font: inherit;
}
.show-tab b { font-size: 1.02rem; }
.show-tab span { font-size: .84rem; color: var(--ink-soft); line-height: 1.35; }
.show-tab:hover { background: #fff; border-color: var(--lp-line); }
.show-tab.on { background: var(--lp-navy); border-color: var(--lp-navy); }
.show-tab.on b { color: #fff; }
.show-tab.on span { color: #C9D3E3; }
.show-stage { min-width: 0; }
.show-pane { margin: 0; background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(14,34,64,.12); }
.show-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--lp-navy); }
.show-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); }
.show-url { margin-left: 10px; font-size: .8rem; color: #C9D3E3; }
.show-pic { position: relative; aspect-ratio: 16 / 9; background: #F5F6F8; }
.show-pic .poster-open img { object-fit: contain; object-position: top center; background: #fff; }
.show-pic.is-drawn { display: grid; place-items: center; padding: 20px; }
.show-pic.is-drawn svg { width: 90%; height: auto; }
.show-pic:hover .poster-zoom, .show-pic .poster-open:focus-visible .poster-zoom { opacity: 1; }
.show-pane figcaption { padding: 12px 16px; border-top: 1px solid var(--lp-line); font-size: .95rem; }
@media (max-width: 860px) {
    .show { grid-template-columns: minmax(0, 1fr); }
    .show-list { position: static; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .show-tab { flex: 0 0 auto; padding: 8px 14px; border-color: var(--lp-line); background: #fff; border-radius: 999px; }
    .show-tab span { display: none; }
}

/*  THE SIGN-IN PANEL, DRESSED (24 Sep 2026, the owner: "make this part better
    look and attractive layout"). The grey panel beside the form becomes the
    landing page's navy with a gold glow: the logo on its white plate, a gold
    rule, the line in white serif, the paragraph in soft white, and the three
    things the product does as rows with gold ticks - straight under the words
    rather than pushed to the foot of the panel, which left a hole in the
    middle. The fine print closes as a small badge. Owner sign-in, register
    and the counter's sign-in all share it.  */
.auth .auth-say {
    gap: 16px;
    padding: 38px 36px;
    color: #E6ECF5;
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(214, 165, 72, .28) 0%, transparent 60%),
        radial-gradient(70% 60% at 0% 100%, rgba(214, 165, 72, .14) 0%, transparent 60%),
        linear-gradient(160deg, #0E2240 0%, #16345F 100%);
    border-right: 0;
}
.auth .auth-say .brandmark img, .auth .auth-say > img { box-shadow: 0 14px 34px rgba(0, 0, 0, .35); background: #fff; }
.auth .auth-back { color: #C9D3E3; }
.auth .auth-back:hover { color: #E9C27A; }
.auth .auth-say .rule { background: linear-gradient(90deg, #E9C27A, #C8901F); width: 56px; }
.auth .auth-say h2 { color: #FFFFFF; font-size: 2rem; }
.auth .auth-say p { color: #D6DEEB; font-size: .98rem; }
.auth .auth-say ul { margin: 4px 0 0; gap: 10px; }
.auth .auth-say li {
    align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 10px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
    color: #FFFFFF; font-size: .93rem; line-height: 1.4;
}
.auth .auth-say li::before {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; margin: 0;
    background: linear-gradient(180deg, #E9C27A, #C8901F); color: #0E2240;
    content: "\2713"; font-weight: 800; font-size: .8rem; line-height: 24px; text-align: center;
    border: 0; transform: none;
}
.auth .auth-say .fine {
    align-self: flex-start; margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(214, 165, 72, .16); border: 1px solid rgba(214, 165, 72, .4);
    color: #F3DEB0; font-size: .82rem;
}
.auth .auth-say .fine::before { content: "\1F6E1"; font-size: .9rem; }
@media (max-width: 860px) { .auth .auth-say { padding: 28px 22px; } .auth .auth-say h2 { font-size: 1.6rem; } }

/*  THE CONTACT BAND, TIDIED (24 Sep 2026, the owner: "correct this also").
    Long values - the account name, the UPI id - ran out past the card's edge,
    the three cards stood at three heights, and a wide label column made short
    addresses wrap after one word. Each row is now a two-column grid with a
    narrower label, values wrap inside their card (a UPI id breaks at any
    character rather than overflowing), and the cards stretch to one height.  */
.contact-grid { align-items: stretch; }
.contact-grid .card { display: flex; flex-direction: column; }
.contact-list { gap: 10px; }
.contact-list div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.contact-list dt, .pay-list dt { min-width: 0; font-size: .8rem; }
.contact-list dd { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; color: #111111; }
.contact-list dd.mono, .pay-list dd.mono { font-size: .95rem; }

/*  SIGN-IN ON ONE SCREEN (25 Sep 2026: "minimize login page vertical
    scroll") - less margin round the box, less padding in both panels, a
    smaller JD plate, tighter feature rows, and a compact Keycode block
    beside its logo. Desktop only; a phone already stacks it short.  */
@media (min-width: 641px) {
    .auth { margin: 14px auto 18px; }
    .auth .auth-say { gap: 10px; padding: 20px 30px; }
    .auth .auth-say .brandmark img, .auth .auth-say > img { height: 92px; padding: 6px 16px; border-radius: 12px; }
    .auth .auth-back { margin-top: 0; }
    .auth .auth-say h2 { font-size: 1.55rem; }
    .auth .auth-say p { font-size: .92rem; line-height: 1.5; }
    .auth .auth-say ul { gap: 6px; }
    .auth .auth-say li { padding: 7px 12px; font-size: .88rem; }
    .auth .auth-say li::before { flex-basis: 20px; width: 20px; height: 20px; line-height: 20px; font-size: .72rem; }
    .auth-do { padding: 22px 34px; }
    .auth-do .enquiry { gap: 10px; margin-top: 10px; }
    .auth-do .muted { margin-top: 10px; }
    .auth-do .made-by { margin-top: 12px; padding: 10px 12px; gap: 4px; }
    .auth-do .made-by-logo img { width: 120px; }
}