/* SAISHO — design system grounded in Apple's Human Interface Guidelines.
 *
 * Applied from the HIG foundations that carry over to the web: design
 * principles, typography, layout, color, materials. Apple's platform
 * conventions (tab bars, sheets, safe areas) do not apply to a marketing
 * page and are deliberately not imitated.
 *
 * Rules honoured here, with their source page:
 *   typography.md › Ensuring legibility   avoid light weights; 17pt body
 *   typography.md › Conveying hierarchy   few typefaces; weight+size+colour
 *   layout.md     › Visual hierarchy      differentiate controls from content
 *   layout.md     › Platform considerations  avoid full-width buttons
 *   materials.md  › Liquid Glass          glass on the functional layer ONLY
 *   color.md                              semantic colours for light and dark
 */

/* ---------------------------------------------------------------- tokens */

:root {
    color-scheme: light dark;

    /* One typeface family. SF Pro on Apple platforms, graceful fallbacks
       elsewhere. typography.md: "Minimize the number of typefaces you use". */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
            "Helvetica Neue", Inter, system-ui, sans-serif;

    /* Type scale derived from Apple's iOS text styles (typography.md ›
       Specifications), converted to rem for the web. */
    --type-caption:    0.75rem;   /* 12 */
    --type-footnote:   0.8125rem; /* 13 */
    --type-subhead:    0.9375rem; /* 15 */
    --type-callout:    1rem;      /* 16 */
    --type-body:       1.0625rem; /* 17 — iOS default size */
    --type-title3:     1.375rem;  /* 22 */
    --type-title2:     1.75rem;   /* 28 */
    --type-title1:     2.125rem;  /* 34 */

    /* Spacing on a 4pt grid. layout.md asks for generous, consistent space. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --radius-pill: 980px; /* Apple's pill radius */

    --measure: 34rem;  /* readable line length for body copy */
    --page: 71rem;

    /* Semantic colours, light appearance. color.md: name colours by role,
       never hard-code a system value. */
    --bg:              #ffffff;
    --bg-secondary:    #f5f5f7;
    --label:           #1d1d1f;
    --label-secondary: #5c5c61;
    --label-tertiary:  #6e6e73;
    --separator:       rgba(0, 0, 0, 0.12);

    /* One accent, one meaning: the primary action. Darkened from the logo
       teal so it clears 4.5:1 against white. */
    --accent:          #0d6a7d;
    --accent-hover:    #0a5867;
    --accent-on:       #ffffff;

    /* Liquid Glass, regular variant (liquid-glass.md › Cross-platform
       translation): blur 20–40px, fill 60–80%, saturation 1.2–1.5. */
    --glass-fill:   rgba(255, 255, 255, 0.72);
    --glass-blur:   saturate(1.4) blur(24px);
    --glass-border: rgba(0, 0, 0, 0.08);

}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:              #000000;
        --bg-secondary:    #1c1c1e;
        --label:           #f5f5f7;
        --label-secondary: #a1a1a6;
        --label-tertiary:  #8e8e93;
        --separator:       rgba(255, 255, 255, 0.16);

        --accent:          #5ad4e6;
        --accent-hover:    #7fe0ee;
        --accent-on:       #00222b;

        --glass-fill:   rgba(28, 28, 30, 0.72);
        --glass-border: rgba(255, 255, 255, 0.12);

    }
}

/* ----------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--label);
    font-family: var(--font);
    font-size: var(--type-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-on); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

/* ------------------------------------------------- functional layer: nav */
/* materials.md › Liquid Glass: the ONLY glass on this page. It floats above
   the content layer; content scrolls beneath and shows through. */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 52px;
}

.nav__logo { height: 22px; width: auto; }

/* Reduce Transparency has an answer: fall back to an opaque bar. */
@media (prefers-reduced-transparency: reduce) {
    .nav {
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* --------------------------------------------------------------- buttons */
/* layout.md: "Avoid full-width buttons." They stay inset and sized to their
   content. 44px minimum target (accessibility.md › Controls). */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-6);
    border: 0;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: var(--type-subhead);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}

/* buttons.md: "Always include a press state for a custom button. Without a
   press state, a button can feel unresponsive, making people wonder if it's
   accepting their input." The file had hover states only. */
.btn:active { transform: scale(0.97); }

/* liquid-glass.md › Colour: "To emphasize a primary action, color the
   background rather than the symbol or label." One prominent button per view. */
.btn--primary {
    background: var(--accent);
    color: var(--accent-on);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--compact { min-height: 36px; padding: 0 var(--space-4); }

/* ------------------------------------------------------------------ hero */
/* The one place boldness is spent. Everything around it stays quiet. */

.hero {
    padding-block: clamp(var(--space-24), 13vw, 10rem) var(--space-24);
}

.hero__title {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(2.25rem, 5.4vw, 4rem);
    line-height: 1.06;
    /* Apple tightens tracking as display type grows (typography.md › Tracking). */
    letter-spacing: -0.028em;
    font-weight: 600;
    text-wrap: balance;
}

/* Only the claim itself carries the bold weight. typography.md › Conveying
   hierarchy: weight separates the two halves, so the qualifier reads as a
   subordinate clause without a second type size or colour. */
.hero__title-tail { font-weight: 400; }

.hero__lead {
    margin: var(--space-8) 0 0;
    max-width: var(--measure);
    font-size: clamp(var(--type-callout), 1.35vw, var(--type-title3));
    line-height: 1.5;
    color: var(--label-secondary);
    text-wrap: pretty;
}

.hero__actions {
    margin-top: var(--space-12);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

/* -------------------------------------------------------------- partners */
/* Quiet by design. layout.md: grouping and negative space do the work; the
   logos are monochrome so none competes with another or with the hero. */

.partners {
    border-block: 1px solid var(--separator);
    padding-block: var(--space-8);
    background: var(--bg-secondary);
}

.partners__label {
    margin: 0 0 var(--space-6);
    text-align: center;
    font-size: var(--type-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--label-tertiary);
}

.partners__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-8) var(--space-16);
}

.partners__logo {
    height: 26px;
    width: auto;
    object-fit: contain;
    /* Normalise a set of mixed-provenance logos to one visual weight. */
    filter: grayscale(1) opacity(0.6);
    transition: filter 0.2s ease;
}
.partners__logo:hover { filter: grayscale(1) opacity(0.95); }

@media (prefers-color-scheme: dark) {
    .partners__logo { filter: grayscale(1) invert(1) brightness(1.6) opacity(0.65); }
    .partners__logo:hover { filter: grayscale(1) invert(1) brightness(1.6) opacity(1); }
}

/* Logos whose artwork carries heavy internal whitespace need a taller box to
   read at the same optical size as the rest. */
.partners__logo--tall  { height: 44px; }
.partners__logo--short { height: 18px; }

/* --------------------------------------------------------------- contact */

.contact { padding-block: var(--space-32); }

.contact__title {
    margin: 0;
    font-size: clamp(var(--type-title2), 3vw, var(--type-title1));
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.contact__lead {
    margin: var(--space-4) 0 var(--space-8);
    max-width: var(--measure);
    color: var(--label-secondary);
}

/* ---------------------------------------------------------------- footer */

.footer {
    border-top: 1px solid var(--separator);
    padding-block: var(--space-8);
    font-size: var(--type-footnote);
    color: var(--label-tertiary);
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.footer__logo {
    height: 16px;
    width: auto;
    filter: grayscale(1) opacity(0.45);
}

.footer a { color: var(--label-secondary); text-decoration: none; }
.footer a:hover { color: var(--label); }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}