:root { --canino-ink: #163f4a; --canino-ink-deep: #10353f; --canino-cream: #f4efe5; --canino-sand: #dfd2bd; --canino-rust: #ad745c; --canino-moss: #78907b; --canino-line: rgba(22,63,74,.18); }
.canino-page { --paper: var(--canino-cream); color: var(--canino-ink); background: var(--canino-cream); font-family: var(--display); }
.canino-page *, .canino-page *::before, .canino-page *::after { box-sizing: border-box; }
.canino-container { width: min(100%, 1240px); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 5rem); }
.canino-header { position: absolute; z-index: 5; top: 0; right: 0; left: 0; color: var(--canino-cream); }
.canino-header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 5.5rem; border-bottom: 1px solid rgba(244,239,229,.25); }
.canino-brand { display: inline-flex; align-items: center; gap: .7rem; font-size: .75rem; letter-spacing: -.02em; }
.canino-brand span, .canino-footer-brand span { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .8rem; font-weight: 700; }
.canino-brand strong, .canino-footer-brand strong { font-weight: 700; }
.canino-nav { display: flex; gap: clamp(.7rem, 2vw, 1.7rem); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.canino-nav a { opacity: .76; transition: opacity .2s ease; }.canino-nav a:hover, .canino-nav a:focus-visible { opacity: 1; }
.canino-hero { min-height: min(52rem, 100vh); padding: 9.5rem 0 4rem; overflow: hidden; color: var(--canino-cream); background: var(--canino-ink); }
.canino-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .88fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.canino-eyebrow { margin: 0 0 1.5rem; color: var(--canino-rust); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.canino-hero h1, .canino-page h2 { margin: 0; font-size: clamp(3rem, 6.5vw, 6.6rem); font-weight: 600; line-height: .94; letter-spacing: -.07em; }
.canino-hero h1 em, .canino-page h2 em { color: var(--canino-rust); font-style: normal; }
.canino-lede { max-width: 29rem; margin: 2rem 0 0; color: rgba(244,239,229,.75); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.65; }
.canino-button, .canino-disabled-button { display: inline-flex; align-items: center; gap: 1rem; margin-top: 2.4rem; padding: .95rem 1.1rem; color: var(--canino-ink); background: var(--canino-cream); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }
.canino-button:hover, .canino-button:focus-visible { color: var(--canino-cream); background: var(--canino-rust); transform: translateY(-2px); }
.canino-proof { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.5rem 0 0; padding: 0; list-style: none; color: rgba(244,239,229,.7); font-size: .72rem; }
.canino-proof li:not(:last-child)::after { margin-left: .8rem; color: var(--canino-rust); content: '•'; }
.canino-hero-image { position: relative; min-height: 27rem; margin: 0; }.canino-hero-image::before { position: absolute; top: -1.2rem; right: -1.2rem; bottom: 1.2rem; left: 1.2rem; border: 1px solid rgba(244,239,229,.35); content: ''; }.canino-hero-image img { position: relative; display: block; width: 100%; height: min(41vw, 38rem); min-height: 27rem; object-fit: cover; object-position: center; }
.canino-intro { padding: clamp(6rem, 13vw, 11rem) 0; background: var(--canino-cream); }.canino-intro-grid { display: grid; grid-template-columns: minmax(12rem,.55fr) minmax(0,1.45fr); gap: clamp(3rem, 9vw, 10rem); }.canino-intro h2, .canino-section-heading h2, .canino-includes h2, .canino-approach h2, .canino-purchase h2, .canino-faq h2 { max-width: 49rem; font-size: clamp(2.7rem, 5vw, 5.4rem); }.canino-intro h2 + p { max-width: 36rem; margin: 2rem 0 0; color: rgba(22,63,74,.73); font-size: 1.05rem; line-height: 1.75; }.canino-checks { display: grid; gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }.canino-checks li { display: flex; align-items: baseline; gap: .8rem; font-weight: 600; }.canino-checks li::before { color: var(--canino-rust); content: '✦'; }
.canino-modules { padding: clamp(6rem, 12vw, 10rem) 0; color: var(--canino-cream); background: var(--canino-ink-deep); }.canino-section-heading { display: grid; grid-template-columns: minmax(16rem, .9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: end; padding-bottom: 4rem; border-bottom: 1px solid rgba(244,239,229,.22); }.canino-section-heading h2 { color: var(--canino-cream); }.canino-section-heading > p:last-child { max-width: 25rem; margin: 0; color: rgba(244,239,229,.65); }.canino-module-list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }.canino-module-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; min-height: 12.5rem; padding: 1.6rem 1.4rem 1.6rem 0; border-right: 1px solid rgba(244,239,229,.16); border-bottom: 1px solid rgba(244,239,229,.16); }.canino-module-list li:nth-child(even) { padding-left: 1.4rem; border-right: 0; }.canino-module-list li:nth-last-child(-n+2) { border-bottom: 0; }.canino-module-list span { color: var(--canino-rust); font-size: .68rem; font-weight: 700; }.canino-module-list h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: -.05em; }.canino-module-list p { margin: .9rem 0 0; color: rgba(244,239,229,.62); font-size: .85rem; line-height: 1.6; }
.canino-includes { padding: clamp(6rem, 12vw, 10rem) 0; }.canino-includes-grid { display: grid; grid-template-columns: minmax(15rem,.9fr) minmax(0,1.1fr); gap: clamp(3rem, 8vw, 9rem); }.canino-includes-list { border-top: 1px solid var(--canino-line); }.canino-includes-list article { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.8rem 0; border-bottom: 1px solid var(--canino-line); }.canino-includes-list span { color: var(--canino-rust); font-size: .68rem; font-weight: 700; }.canino-includes-list h3 { margin: 0; font-size: 1.2rem; letter-spacing: -.04em; }.canino-includes-list p { margin: .55rem 0 0; color: rgba(22,63,74,.72); font-size: .9rem; }
.canino-approach { padding: clamp(6rem, 12vw, 10rem) 0; color: var(--canino-cream); background: var(--canino-moss); }.canino-approach-grid { display: grid; grid-template-columns: minmax(15rem,.8fr) minmax(0,1.2fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }.canino-approach h2 { color: var(--canino-cream); }.canino-approach h2 em { color: var(--canino-cream); opacity: .72; }.canino-approach h2 + p { max-width: 34rem; margin: 2rem 0 0; color: rgba(244,239,229,.8); line-height: 1.75; }.canino-approach-art { position: relative; min-height: 21rem; overflow: hidden; border: 1px solid rgba(244,239,229,.34); }.canino-orbit { position: absolute; border: 1px solid rgba(244,239,229,.55); border-radius: 50%; }.orbit-one { width: 12rem; height: 12rem; top: 19%; left: 21%; }.orbit-two { width: 19rem; height: 19rem; top: 7%; left: 7%; }.canino-paw { position: absolute; top: 44%; left: 42%; color: var(--canino-cream); font-size: 3.5rem; }.canino-line { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(244,239,229,.45); }.canino-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.2rem; }.canino-tags span { padding: .5rem .65rem; border: 1px solid rgba(244,239,229,.34); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.canino-purchase { padding: clamp(6rem, 12vw, 10rem) 0; background: var(--canino-sand); }.canino-purchase-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem,.8fr); gap: clamp(3rem, 10vw, 12rem); align-items: center; }.canino-purchase h2 { max-width: 42rem; }.canino-purchase h2 + p { max-width: 33rem; margin: 2rem 0 0; color: rgba(22,63,74,.74); }.canino-purchase-card { padding: clamp(2rem, 4vw, 3rem); color: var(--canino-cream); background: var(--canino-ink); }.canino-price { margin: 0; font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 600; letter-spacing: -.07em; }.canino-purchase-card ul { display: grid; gap: .7rem; margin: 2rem 0; padding: 0; list-style: none; color: rgba(244,239,229,.74); font-size: .85rem; }.canino-purchase-card li::before { margin-right: .65rem; color: var(--canino-rust); content: '✦'; }.canino-disabled-button { margin-top: 0; color: rgba(244,239,229,.56); background: rgba(244,239,229,.12); cursor: not-allowed; }.canino-availability { margin: 1rem 0 0; color: rgba(244,239,229,.55); font-size: .74rem; }
.canino-faq { padding: clamp(6rem, 12vw, 10rem) 0; }.canino-faq-grid { display: grid; grid-template-columns: minmax(15rem,.85fr) minmax(0,1.15fr); gap: clamp(3rem, 9vw, 10rem); }.canino-faq h2 + p { max-width: 25rem; margin: 2rem 0 0; color: rgba(22,63,74,.7); }.canino-faq-list { border-top: 1px solid var(--canino-line); }.canino-faq-list details { border-bottom: 1px solid var(--canino-line); }.canino-faq-list summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; cursor: pointer; font-weight: 700; list-style: none; }.canino-faq-list summary::-webkit-details-marker { display: none; }.canino-faq-list summary span { color: var(--canino-rust); font-size: 1.2rem; font-weight: 400; transition: transform .2s ease; }.canino-faq-list details[open] summary span { transform: rotate(45deg); }.canino-faq-list details p { max-width: 38rem; margin: 0; padding: 0 0 1.5rem; color: rgba(22,63,74,.72); font-size: .9rem; }
.canino-footer { padding: 2rem 0; color: var(--canino-cream); background: var(--canino-ink-deep); }.canino-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-size: .68rem; }.canino-footer-brand { display: inline-flex; align-items: center; gap: .7rem; margin: 0; }.canino-footer-inner > p:not(.canino-footer-brand) { margin: 0; color: rgba(244,239,229,.57); }.canino-graven-link { padding-bottom: .25rem; border-bottom: 1px solid rgba(244,239,229,.45); font-weight: 700; }
@media (max-width: 760px) { .canino-header-inner { min-height: 4.5rem; }.canino-nav { gap: .7rem; font-size: .55rem; }.canino-brand strong { font-size: .64rem; }.canino-hero { min-height: auto; padding: 7.5rem 0 3rem; }.canino-hero-grid, .canino-intro-grid, .canino-includes-grid, .canino-approach-grid, .canino-purchase-inner, .canino-faq-grid { grid-template-columns: 1fr; }.canino-hero-grid { gap: 3rem; }.canino-hero-image { width: min(100%, 25rem); margin-inline: auto; }.canino-hero-image img { height: 25rem; min-height: 0; }.canino-intro-grid { gap: 1.5rem; }.canino-section-heading { grid-template-columns: 1fr; padding-bottom: 2.5rem; }.canino-section-heading > p:last-child { margin: 0; }.canino-module-list { grid-template-columns: 1fr; }.canino-module-list li, .canino-module-list li:nth-child(even) { min-height: auto; padding: 1.35rem 0; border-right: 0; border-bottom: 1px solid rgba(244,239,229,.16); }.canino-module-list li:last-child { border-bottom: 0; }.canino-includes-grid { gap: 3rem; }.canino-approach-art { min-height: 16rem; }.canino-purchase-inner { gap: 3rem; }.canino-footer-inner { align-items: flex-start; flex-direction: column; }.canino-footer-inner > p:not(.canino-footer-brand) { order: 3; } }
@media (prefers-reduced-motion: reduce) { .canino-page *, .canino-page *::before, .canino-page *::after { scroll-behavior: auto !important; transition: none !important; } }