/* Twin Pay digital design system · 2026
   The 18 accent colours below are extracted from the supplied master SVG.
   Supporting dark text, surfaces and accessible CTA green follow the proposed Twin brand guide.
   This layer is presentation-only: no changes to Django forms, contact POST processing or APIs. */
:root {
  --ink: #172333;
  --muted: #617080;
  --green: #0A9969;
  --green-deep: #086349;
  --mint: #e9f7f1;
  --pale: #F4F7F8;
  --line: #E1E8ED;
  --shadow: 0 17px 52px rgba(23,35,51,.075);
  --font: 'Inter','Avenir Next','Segoe UI',Arial,sans-serif;
  --violet: #442F8E;
  --blue: #08739A;
  --amber: #DD8B2F;
  --magenta: #D01E8E;
}
html {scroll-padding-top:100px}
body {color:var(--ink); font-family:var(--font); background:#fff; font-size:16px; line-height:1.62;}
body::selection {background:#c9f1df;color:#172333}
h1,h2,h3,h4 {font-family:var(--font);letter-spacing:-.045em;line-height:1.12;color:var(--ink)}
p {color:var(--muted)}
a,button,summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #08739A; outline-offset:4px; }
.shell {width:min(100% - 72px,1240px)}
.site-header {background:rgba(255,255,255,.94);border-bottom:1px solid rgba(225,232,237,.87);box-shadow:0 3px 24px rgba(23,35,51,.018)}
.nav-row {min-height:94px}
.brand {width:122px;max-width:122px}
.brand img {object-fit:contain;display:block}
.brand-pay {font-family:var(--font);font-size:18px;font-weight:650;letter-spacing:-.065em;color:#086349;margin-top:-11px}
.site-nav {gap:29px}
.site-nav>a:not(.button) {font-size:13px;color:#47586c;font-weight:600}
.site-nav>a:not(.button):hover,.site-nav>a[aria-current=page] {color:#086349}
.site-nav>a[aria-current=page]::after {background:#0A9969;height:2px}
.button {border-radius:12px;font-size:13px;font-weight:750;min-height:46px;padding:12px 22px;letter-spacing:-.01em;transition:transform .23s ease,background .23s ease,box-shadow .23s ease}
.button:hover {transform:translateY(-2px)}
.button-green {background:#086349;color:white;box-shadow:0 9px 18px rgba(8,99,73,.12)}
.button-green:hover {background:#054934;color:white;box-shadow:0 12px 25px rgba(8,99,73,.19)}
.button-outline {border:1px solid #cbded5;color:#086349;background:white}
.button-outline:hover {background:#f0faf5;color:#086349}
.site-nav .nav-button {margin-left:2px}
.eyebrow {letter-spacing:.15em;color:#086349;font-weight:750;font-size:11px}
.eyebrow-line {background:#0A9969}
/* Larger editorial hero with a genuine in-app screenshot stack. */
.hero {background:radial-gradient(ellipse 65% 60% at 76% 45%,#ebf9f4 0%,#f7fbfe 56%,transparent 100%),#fff}
.hero-layout {min-height:690px;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:5px}
.hero-copy {position:relative;z-index:5;padding:70px 0 78px}
.hero-copy h1 {font-size:clamp(52px,5.7vw,82px);line-height:1.035;letter-spacing:-.066em;max-width:670px;margin:0 0 25px;font-weight:800}
.hero-copy h1 span {color:#086349}
.hero-lead {font-size:clamp(16px,1.35vw,19px);line-height:1.65;max-width:500px;margin-bottom:28px;color:#566779}
.hero-badges {gap:19px;flex-wrap:wrap;margin-bottom:29px}
.hero-badges>span {color:#384c5f;font-weight:650;font-size:12px}
.mini-circle {background:#e1f5eb;color:#086349}
.hero-detail-link {color:#086349;font-size:13px}
.hero-art {height:690px}
.dot-art-hero {max-width:740px;width:740px;right:-19%;bottom:-11%;opacity:.73;filter:saturate(.94)}
.phone-showcase {height:585px;max-width:620px}
.phone {border-color:#101820;box-shadow:0 20px 46px rgba(23,35,51,.17)}
.phone-centre {width:233px;box-shadow:0 33px 60px rgba(23,35,51,.25)}
.phone-left {transform:translate(-115%,-44%) rotate(-8deg)}
.phone-right {transform:translate(25%,-42%) rotate(8deg)}
.trust-strip {background:white;border-top:1px solid #edf1f4;border-bottom:1px solid #edf1f4}
.trust-layout {min-height:81px}
.trust-layout>span {font-weight:600;color:#586a79;font-size:12px}
.green-tick {color:#086349}
/* Section details, deliberate circular dot motif rather than simulated graphics. */
.section {padding:104px 0}
.section-light {background:#F4F7F8}
.section-title {margin-bottom:43px}
.section-title h2 {font-weight:800;font-size:clamp(33px,3.75vw,52px);line-height:1.12;letter-spacing:-.055em}
.section-title p {font-size:16px;line-height:1.7}
.step-card {transition:transform .25s ease,box-shadow .25s ease}
.step-card:hover {transform:translateY(-4px)}
.step-image {border-radius:19px;background:linear-gradient(140deg,#f3fbf8,#edf4f8);border-color:#e5eeea;height:230px}
.step-image img {box-shadow:0 15px 32px rgba(23,35,51,.13)}
.step-number {background:#086349;color:white;border:0;box-shadow:0 5px 15px rgba(8,99,73,.17)}
.step-body h3 {font-size:19px;letter-spacing:-.03em}
.step-body p {font-size:13px;max-width:295px}
.section-note {color:#617080}
.feature-grid {gap:17px}
.feature-card {border-color:#e2eaed;border-radius:20px;padding:27px 21px 26px;min-height:249px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;box-shadow:0 5px 24px rgba(23,35,51,.025)}
.feature-card:hover {transform:translateY(-4px);box-shadow:0 14px 37px rgba(23,35,51,.075);border-color:#b8ddce}
.feature-card h3 {font-size:16px;letter-spacing:-.03em;margin:19px 0 9px}
.feature-card p {font-size:12px;line-height:1.72}
.feature-icon {border-radius:15px}
.feature-icon.mint,.mini-circle {background:#e4f5ed;color:#086349}
.feature-icon.pink {background:#ffedf3;color:#bd285b}
.feature-icon.amber {background:#fff3df;color:#97640d}
.feature-icon.blue {background:#eaf2ff;color:#145a9f}
.feature-icon.lilac {background:#f0eafd;color:#6a318c}
/* Branded transfer from the neutral site into the operator message. */
.business-band {background:linear-gradient(115deg,#eaf8f0 0%,#f5fbf8 60%,#eef4fa 100%);position:relative;padding:95px 0}
.business-band::before {content:"";position:absolute;left:-85px;top:-105px;width:180px;height:180px;border-radius:50%;background-image:radial-gradient(circle,#0A9969 2.8px,transparent 3px);background-size:15px 15px;opacity:.27;mask-image:radial-gradient(circle,black 28%,transparent 71%);pointer-events:none}
.business-copy h2 {font-size:clamp(35px,3.7vw,51px);max-width:570px}
.business-copy>p {font-size:15px;line-height:1.78}
.business-art .dot-art-business {opacity:.8}
.signage-visual {background:#172333;box-shadow:0 24px 70px #23493825}
.signage-visual strong {color:#172333}
.download-band {background:#fff}
.download-callout {border-radius:24px;background:radial-gradient(circle at 96% -20%,#e7f7ef 0%,transparent 34%),#f7faf9;padding:38px 48px;border:1px solid #e6f0eb}
.download-callout h2 {font-size:clamp(26px,2.9vw,40px)}
/* Footer: restrained original-colour dot edge makes white-space purposeful. */
.site-footer {background:#f8fbfa;border-color:#e0ebe7;padding-top:72px;position:relative;overflow:hidden}
.site-footer::before {content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#442F8E,#08739A,#0A9969,#DD8B2F,#D01E8E,#893187)}
.footer-about p {font-size:13px}
.footer-col h2 {font-size:13px}
.footer-col a {font-size:12px;line-height:1.5}
.footer-bottom {font-size:11px}
/* All marketing subpages share the same premium editorial language. */
.page-hero {background:linear-gradient(115deg,#f7fffb,#eef6f5);position:relative}
.page-hero::after {content:"";background:url('../images/redesign/dot-corner.svg') no-repeat center / contain;position:absolute;width:min(380px,36vw);height:290px;right:-100px;top:-70px;opacity:.4;pointer-events:none}
.page-hero-layout {position:relative;z-index:1;min-height:420px}
.page-hero-layout h1,.simple-page-hero h1 {font-size:clamp(43px,4.5vw,68px);font-weight:800;letter-spacing:-.058em}
.page-hero-layout p,.simple-page-hero p {font-size:17px;line-height:1.7;color:#536778}
.page-visual::before {background:#def5e8}
.page-visual img {border-color:#172333}
.editorial-card {border-radius:21px;border-color:#e1eaed}
.editorial-card h3 {font-size:23px}
.editorial-card p {font-size:14px}
.benefit-grid article {border-radius:20px;border-color:#e1e8ed;box-shadow:0 5px 30px rgba(23,35,51,.02)}
.benefit-grid h3 {font-size:20px}
.benefit-grid p {font-size:14px}
.journey-item {border-radius:23px;border-color:#e1e8ed}
.journey-copy p,.about-layout p {font-size:15px;line-height:1.76}
.faq-list summary {font-size:16px}
.faq-list p {font-size:14px}
.business-visual-panel,.feature-bottom-decoration,.help-image,.download-image {border-radius:21px}
.app-download-hero {background:#f2faf6}
/* The actual server-rendered contact form continues to handle POST, CSRF, Turnstile and email. */
.contact-layout {gap:80px}
.contact-information h2 {font-size:clamp(34px,3.7vw,50px)}
.contact-information>p {font-size:15px}
.contact-warning {background:#fff8e9;border:1px solid #f7e4b9;border-left:4px solid #BFA63D;border-radius:10px}
.contact-method h3 {font-size:14px}
.contact-method a,.contact-method p {font-size:14px}
.contact-form-panel {border-radius:24px;box-shadow:0 22px 54px rgba(23,35,51,.067);padding:45px;border-color:#dde9e4}
.form-heading h2 {font-size:31px}
.form-heading p {font-size:14px}
.field label {font-size:12px;color:#2c4050}
.field input,.field textarea {font-size:15px;padding:14px 16px;min-height:49px;border-radius:11px;border:1px solid #cedbdc;background:#fff}
.field input:hover,.field textarea:hover {border-color:#b2c9c5}
.field input:focus,.field textarea:focus {outline:3px solid #d5eee3;outline-offset:0;border-color:#086349}
.field .errorlist {font-size:12px}
.notice {font-size:14px;border-radius:11px}
/* Preserve all legal wording and PDF destinations. Only the wrapper receives the design system. */
.standard-page {padding:58px 0 94px;background:#f7faf9}
.legal-paper {border-radius:23px;box-shadow:0 16px 47px rgba(23,35,51,.046);border:1px solid #e0e9e7;padding:clamp(28px,5vw,63px)}
.legal-paper>h1 {font-size:clamp(30px,3.2vw,43px)}
.legal-paper h2 {color:#172333;font-size:clamp(22px,2.2vw,29px)}
.legal-paper p,.legal-paper li {font-size:14px;line-height:1.86}
.legal-paper a {color:#086349;text-underline-offset:3px}
/* Screen-reader skip link should remain visible when focused. */
.skip-link:focus {z-index:1000}
@media (max-width:1140px) {
 .site-nav{gap:17px}.site-nav>a:not(.button){font-size:12px}
 .hero-layout{min-height:640px}.hero-art{height:640px}.hero-copy h1{font-size:clamp(52px,5.9vw,69px)}
}
@media (max-width:950px) {
 .shell{width:min(100% - 42px,1240px)}
 .nav-row{min-height:82px}.brand{width:112px}
 .site-nav{background:#fff;box-shadow:0 22px 35px rgba(23,35,51,.09)}
 .site-nav>a:not(.button){font-size:15px}
 .hero-layout{grid-template-columns:1fr;min-height:0}
 .hero-copy{padding:71px 0 0}
 .hero-art{height:570px}
 .hero-copy h1{max-width:690px;font-size:clamp(53px,7vw,77px)}
 .dot-art-hero{right:0;max-width:630px;width:100%}
 .section{padding:85px 0}
 .feature-grid{grid-template-columns:repeat(3,1fr)}
 .download-callout{padding:32px}
}
@media (max-width:650px) {
 .shell{width:min(100% - 34px,1240px)}
 .nav-row{min-height:74px}
 .brand{width:106px}
 .brand-pay{font-size:16px;margin-top:-10px}
 .hero-copy{padding:54px 0 0}
 .hero-copy h1{font-size:clamp(42px,10.8vw,56px);line-height:1.045;margin-bottom:18px}
 .hero-lead{font-size:15px}
 .hero-badges{gap:13px;margin-bottom:26px}
 .hero-badges>span{font-size:11px}
 .hero-art{height:435px}
 .phone-showcase{transform:scale(.69)}
 .dot-art-hero{width:480px;right:-130px;bottom:0}
 .trust-layout{min-height:77px}
 .section{padding:73px 0}
 .section-title h2{font-size:clamp(31px,8vw,42px)}
 .section-title p{font-size:14px}
 .steps-grid{grid-template-columns:1fr;gap:27px}
 .step-image{height:210px}
 .step-body h3{font-size:18px}
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
 .feature-card{padding:21px 16px;min-height:224px;border-radius:17px}
 .feature-card h3{font-size:14px}.feature-card p{font-size:12px}
 .business-band{padding:70px 0 33px}.business-copy h2{font-size:36px}
 .download-callout{border-radius:20px;padding:27px 22px}
 .footer-grid{gap:25px}.footer-about p{font-size:13px}
 .page-hero{padding:56px 0 0}.page-hero::after{width:240px;top:-65px;right:-130px;opacity:.3}
 .page-hero-layout h1,.simple-page-hero h1{font-size:clamp(39px,9.7vw,49px)}
 .page-hero-layout p,.simple-page-hero p{font-size:15px}
 .page-visual{height:240px}
 .contact-layout{gap:31px}.contact-form-panel{padding:25px 20px}
 .field input,.field textarea{font-size:16px}
 .standard-page{padding:28px 0 62px}.legal-paper{padding:28px 19px}
 .legal-paper p,.legal-paper li{font-size:14px}
}
@media(max-width:390px){.hero-art{height:385px}.phone-showcase{transform:scale(.59)}.feature-grid{grid-template-columns:1fr 1fr}.feature-card{min-height:237px;padding:18px 13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Only present in the static preview document; never needed by the live form. */
.preview-banner {margin:0 0 17px;background:#e9f7f1;border:1px solid #b7dec9;color:#07553d;border-radius:10px;padding:12px 14px;font-size:13px;font-weight:650}

/* Original Twin Pay lockup and unmodified official store badge artwork. */
.brand { width: 142px; max-width: 142px; align-items: flex-start; }
.brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.footer-brand { width: 132px; max-width: 132px; }
.store-badge--official,
.store-badge--official:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; min-width: 0; min-height: 64px; }
.store-badge--official { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.store-badge--official img { display: block; max-width: none; width: auto; object-fit: contain; }
.store-badge__apple { height: 44px; }
.store-badge__google { height: 64px; }
@media (max-width: 650px) {
  .brand { width: 119px; max-width: 119px; }
  .footer-brand { width: 119px; max-width: 119px; }
  .store-badge--official { min-height: 56px; }
  .store-badge__apple { height: 40px; }
  .store-badge__google { height: 58px; }
}

/* Corporate-site wayfinding — 29 Sep 2026 SEO release */
.twin-parent-bar{background:#172b32;color:#e7f6f0;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,#442F8E,#08739A,#0A9969,#DD8B2F,#D01E8E) 1}
.twin-parent-bar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:5px;padding-bottom:5px}
.twin-parent-note{font-size:11px;letter-spacing:.005em;color:#e1eee9}.twin-parent-note strong{color:#fff}
.twin-parent-link{font-size:11px;font-weight:750;white-space:nowrap;color:#fff;text-decoration:none;border-bottom:1px solid #81c9b3;padding-bottom:1px;transition:color .2s ease}
.twin-parent-link:hover,.twin-parent-link:focus-visible{color:#b4ecd8}
.business-cta-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.twin-corporate-text-link{color:#086349;text-decoration:underline;text-underline-offset:4px;font-weight:750;font-size:13px;line-height:1.5}
.twin-corporate-text-link:hover{color:#054934}
@media(max-width:650px){.twin-parent-bar-inner{gap:8px}.twin-parent-note,.twin-parent-link{font-size:10px;line-height:1.3}.twin-parent-note{max-width:180px}.twin-parent-link{white-space:normal;text-align:right;max-width:155px}.business-cta-links{align-items:flex-start;gap:14px;flex-direction:column}}