/* Armadia website — colours are the app's own Blush palette (constants/colors.ts) */
/* The website uses only the Blush light palette from the app, in every section, light or plum:
   Background #F5F0EE, Text #3B2B2D, Accent #513B3C, Tint #EEE5E6, Muted text #655356, Card #FFFFFF.
   Plum sections turn the palette round: Text becomes the background, Background becomes the text, Accent is the
   quiet fill (dividers, tick circles), Tint is the secondary text. */
:root {
  --bg: #3B2B2D;
  --ink: #F5F0EE;
  --ink-soft: #EEE5E6;
  --primary: #F5F0EE;
  --on-primary: #3B2B2D;
  --card: #513B3C;
  --secondary: #513B3C;
  --muted: #513B3C;
  --border: #513B3C;
  --radius: 12px;         /* the app's corner radius */
  --radius-lg: 24px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: hidden; overflow-x: clip; background: var(--bg); } /* the hero iPad deliberately runs off the right edge; never let it make the page scroll sideways */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  touch-action: pan-y pinch-zoom; /* iPhone Safari: scroll up and down and zoom, never sideways */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 8px; top: 8px; transform: translateY(-300%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 30; } /* hidden above the page, not off to the side, so it can never widen it */
.skip:focus { transform: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* type */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.12; }
h3 { font-size: 1.1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 16px; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 34em; margin: 20px 0 28px; }
.note { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* header — translucent, content scrolls behind it */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(245, 240, 238, 0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(59, 43, 45, 0.08); color: #3B2B2D; }
.nav .btn { background: #513B3C; color: #fff; }
.nav .btn:hover { background: #3B2B2D; color: #fff; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; height: 70px; } /* a fixed height, so the hero can fill exactly the rest of the first screen */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.brand img { width: 40px; height: 40px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav-links a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.btn { display: inline-block; background: var(--primary); color: var(--on-primary); text-decoration: none; font-weight: 600; border-radius: 999px; padding: 10px 22px; font-size: 0.95rem; transition: background .2s, transform .2s; }
.btn:hover { background: #fff; transform: translateY(-1px); }

/* placeholders — grey boxes standing in for the Canva images */
.ph-phone { aspect-ratio: 690 / 900; max-width: 320px; width: 100%; }        /* top two-thirds of an iPhone screen, cut off at the bottom */
.ph-phone-full { aspect-ratio: 690 / 1496; max-width: 260px; width: 100%; } /* a whole iPhone screen, kept small */
.ph-ipad { aspect-ratio: 1180 / 820; width: 100%; }                         /* iPad, landscape */
.ph-tile { aspect-ratio: 1; width: 100%; }                                  /* square detail */
.ph-wide { aspect-ratio: 16 / 9; width: 100%; }

/* a real image inside a frame: the frame just rounds and shadows it */
.ph.shot { padding: 0; border: 0; background: none; display: block; overflow: hidden; border-radius: 5% / 2.73%; } /* matches the screenshot's own corner radius, about 5.7% of its width */
.ph.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* iPhone images: plain app screenshots (967 x 2000), with an iPhone screen's corner rounding and nothing else */
:root { --iphone-w: 230px; }
.ph.shot.iphone { aspect-ratio: 967 / 2000; border-radius: 14% / 6.8%; width: var(--iphone-w); max-width: 100%; box-shadow: none; }

/* hero — fills the first screen, text and one iPhone side by side */
.hero { min-height: calc(100vh - 71px); min-height: calc(100svh - 71px); /* 70px header plus its 1px bottom line */ padding-top: 24px; padding-bottom: 34px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero-art { display: block; }
/* hero devices at Michelangelo's scale: a 290px iPhone in front, the landscape iPad behind it */
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.badge img { height: 54px; width: auto; }
.hero-note { margin: 22px 0 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 34em; }


/* features */
.feature { padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature > * { min-width: 0; }
.feature.flip .feature-text { order: 2; } /* images on the left; sides alternate down the page */ /* never let an image block push the section wider than the screen */
.feature .sub { margin: 14px 0 0; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.5; max-width: 30em; }
.points { margin-top: 20px; max-width: 32em; }
.points p { position: relative; margin: 0 0 12px; padding-left: 30px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; }
.points p::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 50%; background: var(--secondary); }
.points p::after { content: ""; position: absolute; left: 6px; top: 0.3em; width: 4px; height: 8px; margin-top: 3px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.art-center { display: flex; justify-content: center; }
/* the hero pair: positioned children, sized by the composition rules below */
.art-combo { position: relative; }
.art-combo .ph-ipad, .art-combo .ph-phone-full { position: absolute; margin: 0; }
/* two iPhones side by side, the second a little lower */

/* why I made this */
.why { padding: 72px 0; }
.why .wrap { max-width: 720px; }
.why blockquote { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.5; font-weight: 500; }
.why .sig { margin-top: 20px; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.why .sig img { width: 36px; height: 36px; border-radius: 10px; }

/* pricing — mirrors the Plans screen in the app */
.pricing { padding-top: 72px; padding-bottom: 72px; text-align: center; scroll-margin-top: -48px; } /* so the Pricing link lands with the heading just under the bar */
.pricing-sub { max-width: 36em; margin: 14px auto 28px; color: var(--ink-soft); font-size: 1.1rem; }
.controls { position: relative; max-width: 960px; margin: 0 auto 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.controls .region { position: absolute; right: 0; top: 0; }
.toggle { display: inline-flex; background: var(--muted); border-radius: 999px; padding: 4px; }
.toggle button { font: inherit; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; border: 0; background: transparent; color: var(--ink-soft); padding: 9px 22px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.toggle button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.toggle.region button { padding: 9px 16px; min-width: 44px; }
.save-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; background: var(--primary); color: var(--on-primary); vertical-align: 1px; }
.toggle button[aria-pressed="true"] .save-badge { background: var(--bg); color: var(--ink); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; }
.plan { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px 26px; text-align: left; }
.plan .tier { font-size: 1.15rem; font-weight: 700; margin: 0; }
.plan .price { margin: 2px 0 0; font-size: 1.15rem; color: var(--ink-soft); font-weight: 500; }
.plan .price .per { font-size: 0.95rem; }
.plan .tagline { margin: 18px 0 10px; font-weight: 600; font-size: 1.05rem; }
.plan .points { margin-top: 0; }
.plan .points p { margin: 0 0 8px; font-size: 1rem; }
/* credits under the plans: an add-on, kept quiet, no cards */
.credits { margin: 28px auto 0; text-align: center; }
.credits p { margin: 0; }
.credits-title { font-weight: 600; margin-bottom: 8px; }
.credits .amt { color: var(--ink); }
.credits .for { color: var(--ink-soft); }
.packs { font-size: 1.02rem; }
.packs .dot { color: var(--border); margin: 0 12px; }
.pricing .foot { max-width: 44em; margin: 28px auto 0; color: var(--ink-soft); font-size: 0.95rem; text-wrap: pretty; }
.pricing .foot + .foot { margin-top: 10px; }
.pricing .foot.small { font-size: 0.85rem; }

/* FAQ: each question opens and closes; the answers stay in the page for search engines and AI tools */
.faq { padding: 72px 0; }
.faq .wrap { max-width: 760px; }
.faq h2 { text-align: center; margin-bottom: 32px; }

/* get in touch: same heading, intro size and spacing as Pricing and the FAQs */
.contact { padding: 72px 0; text-align: center; }
.contact .wrap { max-width: 640px; }
.contact p { margin: 14px 0 0; font-size: 1.1rem; color: var(--ink-soft); text-wrap: pretty; }
.contact .contact-email { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.copy { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0; }
.copy:hover { background: var(--secondary); color: var(--ink); }
.copy svg { width: 17px; height: 17px; }
.copy .done { display: none; }
.copy.copied .idle { display: none; }
.copy.copied .done { display: block; }
.copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read out by screen readers only */


footer { border-top: 1px solid var(--border); }
footer .wrap { padding-top: 28px; padding-bottom: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; font-size: 0.9rem; color: var(--ink-soft); } /* one line at every width, text and links on the same baseline */
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { text-decoration: none; display: inline-block; padding: 10px 0; }
footer a:hover { text-decoration: underline; }

/* legal pages */
.legal { width: 100%; box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: 32px 20px 72px; } /* width 100% because main is a flex item and would otherwise shrink to its content */
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 6px; }
.legal .last-updated { margin: 0 0 28px; color: var(--ink-soft); }
.legal .last-updated strong { font-weight: 500; }
.legal h2 { font-size: 1.2rem; letter-spacing: -0.01em; margin: 40px 0 8px; }
.legal p { margin: 12px 0; }
.legal ul { margin: 8px 0 14px; padding-left: 1.4rem; }
.legal li { margin: 6px 0; }
.legal strong { font-weight: 600; }
.legal a { text-decoration-color: var(--ink-soft); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--ink); }
/* the contents card uses the light Blush palette, the one light moment on an otherwise plum page */
.toc { --bg: #F5F0EE; --ink: #3B2B2D; --ink-soft: #655356; margin: 8px 0 48px; padding: 24px 28px; background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); }
.toc p { margin: 0 0 10px; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 28px; }
.toc li { margin: 4px 0; break-inside: avoid; }
.toc a { text-decoration: none; display: inline-block; padding: 8px 0; }
.toc a:hover { text-decoration: underline; }

/* tablet and phone */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; text-align: center; }
  .lede, .hero-note { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature.flip .feature-text { order: 0; } /* one column: text always first */
  .feature-text { text-align: center; width: 100%; max-width: 34em; margin: 0 auto; }
  .feature .sub { margin-left: auto; margin-right: auto; }
  .points { max-width: none; text-align: left; }
  .hero { min-height: 0; }
  .art-center, .art-combo, .hero-art { width: 100%; }
  .art-combo { max-width: 520px; margin: 0 auto; }
  .art-duo > .ph.framed { width: 50%; }
  .art-duo { max-width: 440px; margin: 0 auto; width: 100%; } /* two phones share the screen width */
  .art-duo > .ph { flex: 0 1 auto; }
  .plans { grid-template-columns: 1fr; max-width: 440px; }
  .controls .region { position: static; }
}
@media (max-width: 600px) {
  .nav-links { gap: 14px; }
  .toc ol { columns: 1; }
  footer .wrap { font-size: 0.85rem; gap: 12px; }
  footer nav { gap: 16px; }
}

/* ink theme details */
.why .sig img { filter: invert(1) brightness(1.6); }

/* a finished image with its own rounded corners and shadow on a transparent background: show it exactly as is.
   The phone screen inside sits within a transparent margin, so the frame is a little wider than --iphone-w
   to keep the visible phone the same size as the others (screen is 926 of 1043 px wide). */
:root { --framed-w: calc(var(--iphone-w) * 1070 / 950); }
.ph.shot.framed { aspect-ratio: 1070 / 2051; width: var(--framed-w); max-width: 100%; border-radius: 0; box-shadow: none; overflow: visible; background: none; }
.ph.shot.framed img { object-fit: contain; }

/* a finished iPad image with its own corners and shadow on a transparent background: shown exactly as is */
.ph.shot.framed-ipad { aspect-ratio: 3184 / 2293; border-radius: 0; box-shadow: none; overflow: visible; background: none; padding: 0; border: 0; }
.ph.shot.framed-ipad img { object-fit: contain; }
/* the same for a portrait iPad screenshot; in a section it stands as tall as the image block */
.ph.shot.framed-ipad-portrait { aspect-ratio: 2293 / 3184; border-radius: 0; box-shadow: none; overflow: visible; background: none; padding: 0; border: 0; }
.ph.shot.framed-ipad-portrait img { object-fit: contain; }
.feature .ph.framed-ipad-portrait { max-width: min(100%, 374px); }

/* the hero pair: the iPhone leads, tilted left, with the landscape iPad behind it tilted right */
@media (min-width: 901px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: clamp(2rem, 3.5vw, 3.1rem); }
  .hero h1 span { white-space: nowrap; }
  .hero { grid-template-columns: 0.8fr 1.2fr; gap: 40px; }
}

/* a deep, lifted shadow under the transparent screenshots; drop-shadow follows their rounded shape */
.ph.shot.framed img.ready, .ph.shot.framed-ipad img.ready, .ph.shot.framed-ipad-portrait img.ready { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)) drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6)); }

/* two iPhones of the same size side by side, level, with a gap between them */
.art-duo { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.art-duo > .ph { flex: 0 1 var(--framed-w); min-width: 0; }
.art-duo > .ph + .ph { margin-left: 0; } /* the screenshots carry their own transparent margins, which leaves a visible gap of about 28px */

.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.08rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.faq-list summary:hover, .faq-list details[open] summary { text-decoration-color: var(--ink-soft); }
.faq-list summary:hover { color: #fff; }
.faq-list .answer { color: var(--ink-soft); padding: 0 32px 22px 0; }
.faq-list .answer p { margin: 0; }
.faq-list .answer p + p { margin-top: 10px; }


/* light bands: every other section switches to the app's Blush light palette, the full width of the window */
.light {
  --bg: #F5F0EE; --ink: #3B2B2D; --ink-soft: #655356; --primary: #513B3C; --on-primary: #FFFFFF;
  --card: #FFFFFF; --secondary: #EEE5E6; --muted: #EEE5E6; --border: #EEE5E6;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); /* paints the band edge to edge even when the section itself is page-width */
}
.light .btn:hover { background: #3B2B2D; }
/* short pages: push the footer to the bottom of the window so no plum shows beneath it */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.light .ph.shot.framed img.ready, .light .ph.shot.framed-ipad img.ready, .light .ph.shot.framed-ipad-portrait img.ready { filter: drop-shadow(0 2px 6px rgba(59, 43, 45, 0.10)) drop-shadow(0 14px 28px rgba(59, 43, 45, 0.16)); }


/* feature images on desktop: one straight image block per section at a fixed height, so every section is the same
   height and the only thing that changes down the page is the background colour */
@media (min-width: 901px) {
  .feature > .art-center, .feature > .art-duo { height: 520px; width: 100%; max-width: none; margin: 0; display: flex; align-items: center; justify-content: center; }
  .feature .ph-ipad { width: 100%; max-width: 540px; }
  .feature .ph.framed { flex: none; width: var(--framed-w); }
  .feature .art-duo > .ph.framed { width: min(var(--framed-w), 50%); } /* a pair shrinks a touch if the column is tight */
}
/* a dashed stand-in the shape of an iPhone, for screenshots still to come */
.framed:not(.shot) { aspect-ratio: 1070 / 2051; width: var(--framed-w); max-width: 100%; border-radius: 12%; } /* low specificity on purpose so the phone-width rule for pairs still wins on small screens */




/* hero pair composition, at every width (on small screens the pair is centred and up to 520px wide) */
/* The pair is designed 836 units wide and fills its column exactly, so the iPad's right edge lines up with the
   Download button. The iPhone is drawn at just under half the iPad's width, so it leads without the iPad disappearing behind it. */
.art-combo { container-type: inline-size; height: auto; aspect-ratio: 836 / 580; } /* a little headroom so the tilted phone's top corner stays inside */
.art-combo > * { --u: calc(100cqw / 836); }
.hero .art-combo .ph-phone-full { z-index: 2; left: calc(16 * var(--u)); bottom: 0; width: calc(290 * var(--u)); max-width: none; transform: rotate(-4deg); }
.hero .art-combo .ph-ipad { top: calc(79 * var(--u)); /* centred on the iPhone's height */ left: calc(200 * var(--u)); right: auto; width: calc(620 * var(--u)); transform: rotate(4deg); }

/* Packing: a portrait iPad showing the trip, with a smaller, tilted packing list laid over its bottom corner.
   The trip is 88% of the stack, which makes it the same 374px as the other portrait iPads on desktop. */
.art-stack { position: relative; width: 100%; max-width: 425px; margin: 0 auto; aspect-ratio: 425 / 519; }
.art-stack .ph { position: absolute; margin: 0; }
.feature .art-stack .ph-ipad.back { left: 0; top: 0; width: 88%; max-width: none; }
.feature .art-stack .ph-ipad.front { right: -10%; bottom: 0; width: 54%; max-width: none; transform: rotate(4deg); z-index: 2; } /* bottoms aligned, the same 4 degree tilt as the hero */
@media (max-width: 600px) { .feature .art-stack .ph-ipad.front { right: 0; } } /* on phones keep it inside the screen */


/* page not found: the same shell as the legal pages, with the message in a small light card */
.notfound { padding-top: 56px; padding-bottom: 72px; text-align: center; }
.notfound .card { --bg: #F5F0EE; --ink: #3B2B2D; --ink-soft: #655356; --primary: #513B3C; --on-primary: #fff; background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); padding: 40px 32px 36px; display: inline-block; min-width: min(100%, 420px); }
.notfound h1 { margin-bottom: 20px; }
.notfound .notfound-links { margin: 0; }
.notfound .btn { color: var(--on-primary); text-decoration: none; }