/*
    myduka.ai — the marketing site.

    Separate from storefront.css on purpose. That stylesheet is themed per merchant: --brand is set
    inline by the shop layout from whatever colour the shopkeeper picked. This one is our own brand
    and never changes, so sharing tokens between them would mean one shop's terracotta leaking into
    our footer.

    Every value below is a --duka-* token from the design's tokens.css, unchanged. Colour pairings
    are the ones the design tested for contrast: Ink on Paper 13.9:1, Slate on Paper 5.5:1, Slate on
    Cream 4.8:1, Paper on Green 700 7.6:1, Green 100 on Green 900 10.4:1. Terracotta never carries
    text — it appears in the wordmark's ".ai", the mark's awning stripes and one example shop's
    theme, and nowhere else.

    No shadows anywhere. Mist borders and surface changes do the lifting, which is also what keeps
    the page readable on a cheap screen in daylight.
*/

:root {
    --duka-green-900: #0A3D2C;
    --duka-green-700: #0E5C43;
    --duka-green-500: #1A7A5A;
    --duka-green-100: #DCEFE7;

    --duka-terracotta-700: #B85A24;
    --duka-terracotta-500: #E07A3F;

    --duka-cream: #F5E9D7;
    --duka-ink: #132B23;
    --duka-slate: #5B6B64;
    --duka-mist: #E3E8E5;
    --duka-paper: #FFFFFF;

    --duka-radius-sm: 6px;
    --duka-radius-md: 10px;
    --duka-radius-lg: 16px;

    --duka-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* The scale is a ceiling, not a starting point: even the desktop hero stays at 28px, and
       hierarchy comes from weight and spacing instead. */
    --duka-text-xs: 12px;
    --duka-text-sm: 14px;
    --duka-text-base: 16px;
    --duka-text-lg: 18px;
    --duka-text-xl: 22px;
    --duka-text-2xl: 28px;

    --duka-touch: 44px;
    --duka-touch-cta: 52px;

    --wrap: 1152px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--duka-paper);
    color: var(--duka-ink);
    font-family: var(--duka-font);
    font-size: var(--duka-text-base);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }

h1 { font-size: var(--duka-text-2xl); line-height: 1.2; font-weight: 600; text-wrap: pretty; }
h2 { font-size: var(--duka-text-xl); line-height: 1.2; font-weight: 600; text-wrap: pretty; }
h3 { font-size: var(--duka-text-lg); line-height: 1.2; font-weight: 600; }

a { color: var(--duka-green-700); }
a:hover { color: var(--duka-green-900); }

:focus-visible { outline: 2px solid var(--duka-green-700); outline-offset: 2px; }

img { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 16px; width: 100%; }

.stack { display: flex; flex-direction: column; }
.stack--4 { gap: 4px; }
.stack--8 { gap: 8px; }
.stack--12 { gap: 12px; }
.stack--16 { gap: 16px; }
.stack--24 { gap: 24px; }
.stack--28 { gap: 28px; }

.section { padding-block: 48px; }
.section--cream { background: var(--duka-cream); }
.section--head { max-width: 36em; }

.eyebrow { font-size: var(--duka-text-sm); color: var(--duka-slate); font-weight: 600; }
.lede { color: var(--duka-slate); text-wrap: pretty; max-width: 34em; }
.meta { font-size: var(--duka-text-sm); color: var(--duka-slate); }

/* One markup for both widths. The grids collapse on their own, so 360 and 1200 are the same page
   rather than two. */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

.card {
    background: var(--duka-paper);
    border: 1px solid var(--duka-mist);
    border-radius: var(--duka-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card--plain { border: 0; }
.card--pad { padding: 24px; gap: 16px; }

.badge {
    width: 44px;
    height: 44px;
    border-radius: var(--duka-radius-md);
    background: var(--duka-green-100);
    color: var(--duka-green-700);
    font-weight: 600;
    font-size: var(--duka-text-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--duka-touch-cta);
    padding: 0 24px;
    background: var(--duka-green-700);
    color: var(--duka-paper);
    border-radius: var(--duka-radius-md);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.btn:hover { background: var(--duka-green-500); color: var(--duka-paper); }
.btn:active { background: var(--duka-green-900); }

.btn--compact { min-height: var(--duka-touch); padding: 0 14px; font-size: var(--duka-text-sm); white-space: nowrap; }
.btn--cream { background: var(--duka-cream); color: var(--duka-green-900); }
.btn--cream:hover { background: #FFF3E2; color: var(--duka-green-900); }

/* Underlined rather than colour alone, so it is still a link to someone who cannot separate the
   green from the ink. */
.link {
    display: inline-flex;
    align-items: center;
    min-height: var(--duka-touch);
    padding: 0 8px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- header and footer ---------- */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    min-height: 68px;
    border-bottom: 1px solid var(--duka-mist);
    max-width: var(--wrap);
    margin: 0 auto;
}

.nav__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: var(--duka-touch); }
/* The lockup is 260x66, so height drives width: 34px draws it 134px wide, 44px draws it 173px.
   Sized against the bar rather than against the design's artboard, which used the mark alone on a
   phone and could therefore afford to be small. */
.nav__logo img { display: block; height: 34px; width: auto; }
@media (min-width: 720px) { .nav__logo img { height: 44px; } }
.nav__links { display: none; gap: 4px; }

.nav__link {
    min-height: var(--duka-touch);
    display: flex;
    align-items: center;
    padding: 0 14px;
    text-decoration: none;
    color: var(--duka-ink);
}

.nav__link[aria-current="page"] {
    color: var(--duka-green-700);
    font-weight: 600;
    box-shadow: inset 0 -2px var(--duka-green-700);
}

.nav__end { display: flex; align-items: center; gap: 4px; }

/* Which logo is drawn is settled by <picture> in the layout, not here: two elements toggled by
   display rules can both survive a cascade mistake, and did. */

.nav__menu {
    width: var(--duka-touch);
    height: var(--duka-touch);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
}

.nav__menu span { width: 20px; height: 2px; background: var(--duka-ink); }

@media (min-width: 720px) {
    .nav__links { display: flex; }
    .nav__menu { display: none; }

    /* Room for a 44px lockup with air above and below it. */
    .nav { min-height: 76px; }
}

.nav__cta { display: none; }
@media (min-width: 720px) { .nav__cta { display: inline-flex; } }

/* The call to action the header gives up on a phone. */
.nav__drawer-cta { font-weight: 600; color: var(--duka-green-700) !important; }

/* Opened by the menu button on small screens; on wide ones the links are always in the bar. */
.nav__drawer { border-bottom: 1px solid var(--duka-mist); }
.nav__drawer a { display: flex; align-items: center; min-height: var(--duka-touch); padding: 0 16px; text-decoration: none; color: var(--duka-ink); }
@media (min-width: 720px) { .nav__drawer { display: none; } }

.foot { background: var(--duka-green-900); color: var(--duka-paper); }

/* Scoped to the footer's own links, not every anchor inside it. As `.foot a` this outranked
   .btn--cream and painted the call to action white on cream: 1.1:1, an invisible button on the one
   place the page asks for the click. */
.foot__link, .foot__fine a { color: var(--duka-paper); }
.foot__cta { padding-block: 40px 32px; display: flex; flex-direction: column; gap: 28px; }
.foot__row { display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: center; border-top: 1px solid rgba(255,255,255,.18); padding-top: 20px; }
.foot__logo { display: flex; align-items: center; gap: 8px; margin-right: auto; min-height: var(--duka-touch); }
.foot__logo img { display: block; height: 32px; width: auto; }
.foot__link { text-decoration: none; min-height: var(--duka-touch); display: flex; align-items: center; padding: 0 10px; font-size: var(--duka-text-sm); }
.foot__fine { font-size: var(--duka-text-sm); color: var(--duka-green-100); }
.foot__slim { padding-block: 28px; display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: center; }

/* ---------- the chat mock ---------- */

.chat {
    max-width: 400px;
    width: 100%;
    background: var(--duka-mist);
    border-radius: var(--duka-radius-lg);
    overflow: hidden;
}

.chat__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--duka-green-700); }

.chat__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--duka-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.chat__avatar img { display: block; height: 24px; width: auto; }
.chat__who { font-size: var(--duka-text-sm); font-weight: 600; color: var(--duka-paper); line-height: 1.2; }
.chat__state { font-size: var(--duka-text-xs); color: var(--duka-green-100); line-height: 1.3; }
.chat__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }

/* 86% so both sides stay distinguishable at 328px. Body stays 16px: these are the words a
   shopkeeper reads outdoors. */
.bubble {
    max-width: 86%;
    padding: 8px 12px;
    font-size: var(--duka-text-base);
    line-height: 1.5;
    color: var(--duka-ink);
}

/* Only the message text keeps its newlines. On the bubble itself this also preserved every line
   break in the template's indentation, which is why bubbles came out with blank lines in them. */
.bubble__text { display: block; white-space: pre-line; }

.bubble--in { align-self: flex-start; background: var(--duka-paper); border-radius: 4px 12px 12px 12px; }
.bubble--out { align-self: flex-end; background: var(--duka-green-100); border-radius: 12px 4px 12px 12px; }
.bubble__time { display: block; text-align: right; font-size: var(--duka-text-xs); color: var(--duka-slate); margin-top: 2px; line-height: 1.2; }

.bubble__photo {
    aspect-ratio: 4 / 3;
    background: var(--duka-mist);
    border-radius: var(--duka-radius-sm);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--duka-text-xs);
    color: var(--duka-slate);
    min-width: 160px;
}

/* ---------- the example shop, drawn as a phone ---------- */

.phone { background: var(--duka-ink); border-radius: 28px; padding: 8px; width: 100%; max-width: 260px; }
.phone__screen { background: var(--duka-paper); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.phone__head { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.phone__shop { font-size: var(--duka-text-base); font-weight: 600; line-height: 1.2; }
.phone__area { font-size: var(--duka-text-xs); color: var(--duka-slate); }
.phone__rule { height: 3px; }
.phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
.phone__item { display: flex; flex-direction: column; gap: 4px; }
.phone__thumb { aspect-ratio: 1; background: var(--duka-mist); border-radius: var(--duka-radius-sm); }
.phone__name { font-size: var(--duka-text-xs); line-height: 1.3; }
.phone__price { font-size: var(--duka-text-xs); font-weight: 600; }
.phone__foot { padding: 10px 14px 14px; }

.phone__order {
    height: var(--duka-touch);
    border-radius: var(--duka-radius-md);
    font-size: var(--duka-text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.example { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.example__caption { text-align: center; display: flex; flex-direction: column; gap: 4px; max-width: 280px; }

/* ---------- lists ---------- */

.ticks { display: flex; flex-direction: column; gap: 10px; }
.tick { display: flex; gap: 10px; align-items: flex-start; }
.tick svg { flex: none; margin-top: 2px; }

.qa { padding: 16px 0; border-top: 1px solid var(--duka-mist); display: flex; flex-direction: column; gap: 6px; }
.qa--cream { border-top-color: rgba(19, 43, 35, .15); }
.qa__q { font-weight: 600; }

.price { font-size: var(--duka-text-2xl); line-height: 1.2; font-weight: 600; }
.price span { font-size: var(--duka-text-base); font-weight: 400; color: var(--duka-slate); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- the buttons a message really carries ----------

   WhatsApp draws reply buttons under the bubble, separated by a hairline and full width. Copying
   that shape matters more than copying its colours: a merchant recognises the affordance, and the
   mock stops implying they have to type a reply. */

.bubble__buttons {
    display: block;
    margin: 8px -12px -8px;
    border-top: 1px solid var(--duka-mist);
}

.bubble--out .bubble__buttons { border-top-color: rgba(19, 43, 35, .12); }

.bubble__button {
    display: block;
    text-align: center;
    padding: 8px;
    font-size: var(--duka-text-sm);
    font-weight: 600;
    color: var(--duka-green-700);
}

.bubble__button + .bubble__button { border-top: 1px solid var(--duka-mist); }
.bubble--out .bubble__button + .bubble__button { border-top-color: rgba(19, 43, 35, .12); }

/* ---------- the setup form, drawn as a screen ----------

   Setup is a web form, not a conversation. Drawing it as one is the difference between a mock that
   prepares a merchant for what happens and one that surprises them. */

.form__head { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--duka-mist); }
.form__title { font-size: var(--duka-text-base); font-weight: 600; line-height: 1.2; }
.form__note { font-size: var(--duka-text-xs); color: var(--duka-slate); }
.form__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.form__row { display: flex; flex-direction: column; gap: 3px; }
.form__label { font-size: var(--duka-text-xs); color: var(--duka-slate); }

.form__value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--duka-text-xs);
    border: 1px solid var(--duka-mist);
    border-radius: var(--duka-radius-sm);
    padding: 8px 10px;
    min-height: 34px;
}

.form__swatch { width: 12px; height: 12px; border-radius: 6px; flex: none; }

.form__cta {
    margin-top: 2px;
    height: 38px;
    border-radius: var(--duka-radius-md);
    background: var(--duka-green-700);
    color: var(--duka-paper);
    font-size: var(--duka-text-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}